【JavaScript框架】2024年需要学习的顶级JavaScript框架：Blitz、SolidJS、Svelte等

news2024/11/27 18:40:04

Top JavaScript frameworks to learn in 2023: Blitz, SolidJS, Svelte, and more

第一个是如何自动化繁琐的web开发工作。要为标准web应用程序设置一个项目，您必须花费宝贵的时间学习用于常见任务的几个库，如身份验证和数据库处理，并将它们捆绑在一起。
第二个问题是如何使网络应用程序更轻、更高性能。使用React等库构建的简单单页应用程序（SPA）在客户端处理大部分逻辑。在使用这些应用程序时，客户端必须预先加载大量JavaScript，这会导致页面加载时间过长，而用户从不喜欢页面加载时间较长。

在这篇综述中，我选择了七个即将出现的JavaScript框架，它们可以解决其中一个或两个重大问题。虽然有些只用于构建用户界面（UI），但另一些则是全栈的，可以为您提供web应用程序所需的一切。

我将介绍每个JavaScript框架带来的主要功能和创新，以及它们与React的对比，React是目前web应用程序中的首选框架。

Remix是在React之上构建的全栈web框架，由创建React Router的同一团队构建。

Remix使用服务器端渲染：文件在服务器上渲染，然后发送到客户端，而不是像Vanilla React那样在浏览器中渲染。正因为如此，浏览器不需要预先加载一个大的JavaScript文件（React经常发生这种情况），这减少了启动时间，并使页面对搜索引擎优化更友好。

与其他框架相比，它的主要优势之一是嵌套路由。组件会根据它们在服务器上的路径自动相互嵌套。若要加载或重新加载零部件，不需要重新加载其父零部件。此外，错误是有界的——如果错误发生在组件中，它不会影响其父组件。

如果你正在构建一个不需要很多客户端状态的应用程序，Remix可能是一个不错的选择，尽管由于最近被Shopify收购，它的未来还不确定。

单击Remix示例应用程序的链接。

Blitz是在Next.js之上构建的全栈应用程序工具包。

Next.js是一个React框架，使开发人员能够构建服务器端的渲染和静态站点。Blitz采用了Next.js构建的基础，并为身份验证、用户和表单添加了方便的工具。有了这些额外的工具，您可以更轻松、更快地设置全栈应用程序。

作为一个工具包而不是一个完整的框架，Blitz比框架有着显著的优势。这是一个巨大的优势，因为Next.js是当前网络开发生态系统中最活跃的项目之一。

此外，虽然Blitz提供了一系列固执己见的选择，但它也具有高度的可定制性。如果你想快速为下一个项目设置Next.js应用程序，你应该试试Blitz。

单击闪电战示例应用程序的链接。

Qwik是一个能够构建具有惊人启动性能的JavaScript应用程序的框架。

通常，如果您使用JavaScript进行服务器端渲染，则会向用户发送包含HTML和CSS的网站快照。但之后，您仍然需要“水合”它——将JavaScript附加到将处理用户事件的页面上。在接收快照和水合之间，用户无法与页面进行交互。

Qwik不是加载一束JavaScript，而是根据需要加载JavaScript。首先，它加载一个小的（1KB）JavaScript文件。然后，每次与页面交互时，这个小的JavaScript片段都会加载交互所需的JavaScript，仅此而已。

单击Qwik示例应用程序的链接。

RedwoodJS是一个固执己见的、全栈的React应用程序框架，与GraphQL、Prisma、Jest和Storybook集成，可实现最高生产力和快速的项目设置时间。

如果你正在为你的启动或附带项目构建一个网络应用程序，RedwoodJS会为你提供帮助。你不必花很多时间建立图书馆或学习图书馆。基本上，你可以构建一个应用程序并开始开发你的项目。

但它也带来了固执己见的框架的所有缺点。如果你想使用不同于框架提出的工具，那么节省时间的元素就会消失。因此，它更适合React初学者或希望选择标准工具的开发人员。

单击RedwoodJS示例应用程序的链接。

Svelte是一个独特的项目：它更像是一个编译器，而不是一个框架。Svelte没有在浏览器中发送和执行大量代码，而是将代码编译为纯JavaScript。这使得捆绑包更小，执行速度更快。客户端在其他框架中完成的许多工作都是在编译期间完成的。

这使Svelte能够删除虚拟文档对象模型，也称为虚拟DOM，它是浏览器内存中UI的虚拟表示。

对于常规框架，当发生更改时，更新虚拟DOM比更新真实DOM更快。然后，通过将真实DOM与虚拟DOM进行比较，可以频繁地更新真实DOM。Svelte减少了虚拟DOM的开销，而是将代码编译为JavaScript，可以对真实DOM进行快速、有针对性的更新。

用户还报告称，Svelte提供了出色的开发体验。它是2022年Stack Overflow调查中第二受欢迎的框架。因此，如果你正在寻找一种已经被广泛认可的React替代品来构建UI，这应该是你的选择。

单击Svelte示例应用程序的链接。

SolidJS是一个前端框架，它比React本身更具反应性。它的主要技术是注意变量和UI之间的关系，这些关系会随着时间的推移而持续存在。在SolidJS中，称为信号的特殊变量知道哪些函数使用它们。当它们的值更改时，会导致效果（函数）重新运行。该系统的功能与React挂钩类似。

与Svelte一样，SolidJS不使用虚拟DOM。相反，模板被编译为真正的DOM。由于代码中记录了信号和效果之间的关系，因此每当信号发生变化时，只有受影响的部分才会更新。

如果你想要一个比React更快、更容易使用的UI框架，你应该试试SolidJS。

单击SolidJS示例应用程序的链接。

Vue是一个与React非常相似的前端框架。请注意，它不像我们列表中以前的条目那样是最近的突破工具，因为它与React和Angular大约同时出现。虽然Vue的指导思想类似，但与刚才提到的两个框架不同，它不是由Facebook或谷歌这样的企业集团运营的。

与React类似，您通常会使用Vue构建接口和SPAs。但如果你想要一个全栈框架，它确实支持使用Nuxt的服务器端渲染的全栈应用程序。

Vue拥有丰富的库和教程生态系统。此外，它已经成熟，并在许多web应用程序项目中证明了自己。简言之，对于任何不想在技术选择上冒险的项目来说，这都是一个很好的选择。

单击Vue示例应用程序的链接。

总之，这里有一个表，比较了我讨论过的不同JavaScript框架：