如今，Web开发人员面临两大问题。
- 第一个是如何自动化繁琐的web开发工作。要为标准web应用程序设置一个项目，您必须花费宝贵的时间学习用于常见任务的几个库，如身份验证和数据库处理，并将它们捆绑在一起。
- 第二个问题是如何使网络应用程序更轻、更高性能。使用React等库构建的简单单页应用程序（SPA）在客户端处理大部分逻辑。在使用这些应用程序时，客户端必须预先加载大量JavaScript，这会导致页面加载时间过长，而用户从不喜欢页面加载时间较长。
在这篇综述中，我选择了七个即将出现的JavaScript框架，它们可以解决其中一个或两个重大问题。虽然有些只用于构建用户界面（UI），但另一些则是全栈的，可以为您提供web应用程序所需的一切。
我将介绍每个JavaScript框架带来的主要功能和创新，以及它们与React的对比，React是目前web应用程序中的首选框架。
Remix
Remix是在React之上构建的全栈web框架，由创建React Router的同一团队构建。
Remix使用服务器端渲染：文件在服务器上渲染，然后发送到客户端，而不是像Vanilla React那样在浏览器中渲染。正因为如此，浏览器不需要预先加载一个大的JavaScript文件（React经常发生这种情况），这减少了启动时间，并使页面对搜索引擎优化更友好。
与其他框架相比，它的主要优势之一是嵌套路由。组件会根据它们在服务器上的路径自动相互嵌套。若要加载或重新加载零部件，不需要重新加载其父零部件。此外，错误是有界的——如果错误发生在组件中，它不会影响其父组件。
如果你正在构建一个不需要很多客户端状态的应用程序，Remix可能是一个不错的选择，尽管由于最近被Shopify收购，它的未来还不确定。
单击Remix示例应用程序的链接。
Blitz
Blitz是在Next.js之上构建的全栈应用程序工具包。
Next.js是一个React框架，使开发人员能够构建服务器端的渲染和静态站点。Blitz采用了Next.js构建的基础，并为身份验证、用户和表单添加了方便的工具。有了这些额外的工具，您可以更轻松、更快地设置全栈应用程序。
作为一个工具包而不是一个完整的框架，Blitz比框架有着显著的优势。这是一个巨大的优势，因为Next.js是当前网络开发生态系统中最活跃的项目之一。
此外，虽然Blitz提供了一系列固执己见的选择，但它也具有高度的可定制性。如果你想快速为下一个项目设置Next.js应用程序，你应该试试Blitz。
单击闪电战示例应用程序的链接。
Qwik
Qwik是一个能够构建具有惊人启动性能的JavaScript应用程序的框架。
通常，如果您使用JavaScript进行服务器端渲染，则会向用户发送包含HTML和CSS的网站快照。但之后，您仍然需要“水合”它——将JavaScript附加到将处理用户事件的页面上。在接收快照和水合之间，用户无法与页面进行交互。
Qwik不是加载一束JavaScript，而是根据需要加载JavaScript。首先，它加载一个小的（1KB）JavaScript文件。然后，每次与页面交互时，这个小的JavaScript片段都会加载交互所需的JavaScript，仅此而已。
单击Qwik示例应用程序的链接。
RedwoodJS
RedwoodJS是一个固执己见的、全栈的React应用程序框架，与GraphQL、Prisma、Jest和Storybook集成，可实现最高生产力和快速的项目设置时间。
如果你正在为你的启动或附带项目构建一个网络应用程序，RedwoodJS会为你提供帮助。你不必花很多时间建立图书馆或学习图书馆。基本上，你可以构建一个应用程序并开始开发你的项目。
但它也带来了固执己见的框架的所有缺点。如果你想使用不同于框架提出的工具，那么节省时间的元素就会消失。因此，它更适合React初学者或希望选择标准工具的开发人员。
单击RedwoodJS示例应用程序的链接。
Svelte
Svelte是一个独特的项目：它更像是一个编译器，而不是一个框架。Svelte没有在浏览器中发送和执行大量代码，而是将代码编译为纯JavaScript。这使得捆绑包更小，执行速度更快。客户端在其他框架中完成的许多工作都是在编译期间完成的。
这使Svelte能够删除虚拟文档对象模型，也称为虚拟DOM，它是浏览器内存中UI的虚拟表示。
对于常规框架，当发生更改时，更新虚拟DOM比更新真实DOM更快。然后，通过将真实DOM与虚拟DOM进行比较，可以频繁地更新真实DOM。Svelte减少了虚拟DOM的开销，而是将代码编译为JavaScript，可以对真实DOM进行快速、有针对性的更新。
用户还报告称，Svelte提供了出色的开发体验。它是2022年Stack Overflow调查中第二受欢迎的框架。因此，如果你正在寻找一种已经被广泛认可的React替代品来构建UI，这应该是你的选择。
单击Svelte示例应用程序的链接。
SolidJS
SolidJS是一个前端框架，它比React本身更具反应性。它的主要技术是注意变量和UI之间的关系，这些关系会随着时间的推移而持续存在。在SolidJS中，称为信号的特殊变量知道哪些函数使用它们。当它们的值更改时，会导致效果（函数）重新运行。该系统的功能与React挂钩类似。
与Svelte一样，SolidJS不使用虚拟DOM。相反，模板被编译为真正的DOM。由于代码中记录了信号和效果之间的关系，因此每当信号发生变化时，只有受影响的部分才会更新。
如果你想要一个比React更快、更容易使用的UI框架，你应该试试SolidJS。
单击SolidJS示例应用程序的链接。
Vue 3
Vue是一个与React非常相似的前端框架。请注意，它不像我们列表中以前的条目那样是最近的突破工具，因为它与React和Angular大约同时出现。虽然Vue的指导思想类似，但与刚才提到的两个框架不同，它不是由Facebook或谷歌这样的企业集团运营的。
与React类似，您通常会使用Vue构建接口和SPAs。但如果你想要一个全栈框架，它确实支持使用Nuxt的服务器端渲染的全栈应用程序。
Vue拥有丰富的库和教程生态系统。此外，它已经成熟，并在许多web应用程序项目中证明了自己。简言之，对于任何不想在技术选择上冒险的项目来说，这都是一个很好的选择。
单击Vue示例应用程序的链接。
JavaScript框架的比较
总之，这里有一个表，比较了我讨论过的不同JavaScript框架：
| 框架 | 主要优点 | 前端还是全栈？ | 基于 React? |
在GitHub上首次发布 |
| Remix | 语义代码分组 | Full-stack | ✔ | September 2021 |
| Blitz | 快速应用设置 | Full-stack | ✔ | April 2020 |
| Qwik | 页面加载时间低 | Full-stack | ❌ | July 2021 |
| RedwoodJS | 快速应用设置 | Full-stack | ✔ | June 2019 |
| Svelte | Fast apps | Frontend | ❌ | November 2016 |
| SolidJS | Reactivity | Frontend | ❌ | March 2019 |
| Vue | Maturity | Frontend | ❌ | December 2013 |
结论
本文涵盖了2023年要考虑的七个有前景的JavaScript框架。一些提供了速度和更好的页面加载时间等性能优势，而另一些则通过包括用于身份验证和处理数据库等常见任务的附加工具来改善应用程序设置体验。
如果您正在试用这些JavaScript框架中的任何一个，并且需要一个数据网格组件，请查看Handontable。它可以与主要的框架配合使用，因此您可以将它与您尝试的任何web框架集成。
- 登录 发表评论