值得学习的七个 JS 框架

今天的 Web 开发人员正在为两个大问题而求索。

首先是如何将繁琐的 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 可能是一个不错的选择。

示例链接：

https://stackblitz.com/edit/node-wldsmj?file=README.md

Blitz

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

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

它作为一个工具包而不是一个成熟的框架，Blitz 比框架具有显著的优势，这是因为 Next.js 是当前 Web 开发生态系统中最活跃的项目之一。

此外，虽然 Blitz 带有一组固定的选项，但它也是高度可定制的。如果想为下一个项目快速设置 Next.js 应用程序，不妨尝试 Blitz。

示例链接：

https://codesandbox.io/s/blitzjs-2-0-codesandbox-demo-b5v8xy?file=/app/blitz-server.ts

Qwik

Qwik是一个框架，可以构建具有惊人性能的 JavaScript 应用程序。

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

Qwik 不是加载全部 JavaScript 包，而是按需加载 JavaScript。首先，它加载一个小的 (1KB) JavaScript 文件。然后每次与页面交互时，这个小的 JavaScript 代码片段都会加载交互所需的 JavaScript。

示例链接：

http://stackblitz.com/edit/qwik-todo-demo?file=README.md(opens%20in%20a%20new%20tab)

redwood JS

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

如果你正在为初创公司或业余项目构建 Web 应用，RedwoodJS 可以满足您的需求。您不必花费大量时间来设置库或学习它们。基本上，您可以搭建一个应用程序并开始开发您的项目。

但它也伴随着固执己见的框架的所有缺点。如果您想使用与框架建议的工具不同的工具，那么省时的元素就会消失。因此，它更适合 React 初学者或期望做出标准工具选择的开发人员。

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

Svelte

Svelte是一个独特的项目，它更像是一个编译器而不是一个框架。

Svelte 不是在浏览器中传输和执行大量代码，而是将代码编译为纯 JavaScript。这使得捆绑包更小，执行速度更快。客户端在其他框架中完成的许多工作都在其编译期间完成了。

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

对于常规框架，在发生更改时更新虚拟 DOM 比更新真实 DOM 快。然后，通过将真实 DOM 与虚拟 DOM 进行比对，可以异步更新真实 DOM。Svelte 降低了虚拟 DOM 的开销，而是将代码编译为 JavaScript，可以对真实 DOM 执行快速且有针对性的更新。

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

示例链接：

https://stackblitz.com/edit/simple-svelte?file=README.md

SolidJS

SolidJS是一个前端框架，比 React 本身更具反应性。它的主要技术是注重变量和 UI 之间随时持续存在的关系。

在 SolidJS 中，称为信号的特殊变量知道哪些函数使用它们。当它们的值发生变化时，它们会推动效果（功能）重新运行，其功能非常像 React hooks。

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

如果你想要一个比 React 更快、更易用的UI 框架，那就试试 SolidJS吧。

示例链接：

https://stackblitz.com/edit/solidjs-template?file=README.md

Vue 3

Vue是一个与 React 非常相似的前端框架。

请注意，它不像列表中的先前条目那样是最近的创新性工具，它与 React 和 Angular 是同一日期出现。虽然 Vue 遵循一组类似的想法，但与刚才提到的框架不同，它不是由像 Facebook 或谷歌这样的企业开发的。

与 React 类似，通常会使用 Vue 构建接口和 SPA。但是如果你想要一个全栈框架，它能够支持使用Nuxt 的服务器端呈现的全栈应用程序。

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

示例链接：

https://stackblitz.com/edit/vue-3-display-a-list-of-items-with-v-for?file=src%2FApp.vue

JavaScript 框架的比较

这是一张比较讨论过的 JavaScript 框架比较的表格：

框架	主要优势	前端还是全栈？	基于react	GitHub 首发日期
Remix	语义代码分组	全栈	✔	2021 年 9 月
Blitz	快速应用设置	全栈	✔	2020 年 4 月
Qwik	页面加载时间短	全栈	❌	2021 年 7 月
RedwoodJS	快速应用设置	全栈	✔	2019 年 6 月
Svelte	快速应用	前端	❌	2016 年 11 月
SolidJS	反应性	前端	❌	2019 年 3 月
vue3	快速	前端	❌	2013年12月

结论

本文涵盖了 2023 年需要考虑的七个有前途的 JavaScript 框架。

其中，一些框架具有性能优势，例如执行速度和更好的页面加载时间，其它框架则通过包含身份验证和处理数据库等常见任务的附加工具来改善应用程序设置体验。

作者：场长

参考：

https://handsontable.com/blog/javascript-frameworks-to-learn-in-2023-remix-blitz-solid-svelte

相关阅读：