导读：本文总结2023最流行的前端框架，供开发时做选择。

各位，欢迎阅读我们关于最佳（最受欢迎）前端框架的年度文章。

这篇文章现在已经进入第二年，我们已经对它进行了（轻微）调整，确保我们可以在未来的很多年里继续使用它。关于前端框架流行度的所有数据均来自JavaScript 现状调查。不过，本文还涵盖了当前前端趋势、框架描述等相关内容。

2023 年前端框架格局会是什么样子？

以下是当前的前端框架排行榜：

如果我们将此数据与2022年进行比较，排名前5名的框架没有太多变化。

然后到了 2023 年，开发者似乎对 Lit 和 Alpine 都失去了一点点兴趣，这为 Solid 的排名上升铺平了道路。今年开发者们还有两个新项目，Stencil 和 Qwik，这将在本文后面介绍。

唯一没有进入今年列表的框架是 Stimulus（在 2022 年综述中排名第 10），与去年相比，它已经丢失了用户的欢迎度。

当前的前端趋势

除了比较框架排名和单独了解每个框架之外，本文还涵盖了当前的前端趋势。应解释为前端方法、工具和方法的总体脉搏。

Hydration、SPA和JAMStack是 2023 年的首选。

组件驱动开发仍然是一个热门话题，微前端架构（去年的趋势之一）在今年略有下降，难道是它学习起来有些困难吗？

Hydration

流行框架的一项关键特性是如何让它们在浏览器中高效工作。

当用户加载网页时，浏览器需要下载所有 HTML、CSS 和 JavaScript，然后解析并渲染页面。如果在页面完全交互之前需要执行大量 JavaScript 代码，则用户可能需要等待很长时间才能使用该应用。

这就是 Hydration 的用武之地。Hydration 获取服务器生成的静态 HTML 并在客户端附加 JavaScript 功能，它允许用户立即与页面交互，而 JavaScript 代码仍在加载和运行。

假设你有一个 React 应用程序。当用户首次加载页面时，服务器会生成一些包含应用程序基本结构的 HTML。然后，当浏览器加载页面时，React 框架通过将适当的 JavaScript 代码附加到每个 HTML 元素来“水合”HTML，以便它们可以响应用户事件并根据需要更新 UI。

水合的好处是它允许开发者创建复杂的交互式 Web 应用程序，这些应用程序可以在浏览器中平稳高效地运行。通过将初始 HTML 渲染与 JavaScript 功能分离，你可以优化页面/应用程序加载速度的各个方面。

单页应用程序

在过去的十年中，SPA 因其创建动态和响应式用户界面的能力而变得越来越流行。

事实上，许多最成功的现代 Web 应用程序（例如 Gmail、Google 地图和 Facebook）都是使用 SPA 构建的。

这是因为 SPA 通过消除页面重新加载，并最大限度地减少发送到服务器的数据量来实现无缝、流畅的用户体验。

SPA 流行的另一个原因是它们可以更清晰地分离应用程序的前端和后端。

对于 SPA，前端负责呈现 UI 并处理用户交互，而后端负责提供数据和 API 端点。这种关注点分离使得开发和维护大规模应用程序变得更加容易。

JAMStack

JAMstack 是构建静态网页的独特概念。

这是一种没有实现内容生成的后端解决方案，而是使用 API。可以让网站速度更快，而且从开发人员的角度来看也更易于管理。

JAMstack 的概念定义：

• J for JavaScript – 用于编写前端函数的语言。

• A代表 API – 从第三方服务请求内容（数据）。

• M代表标记——构建网页上的内容。

至于堆栈，它是您正在使用的工具的组合。JAMstack 可以与任何框架和服务组合一起使用，只要它遵循 JAM 结构即可。

2023 年之顶级前端框架

本文的以下部分将完全致力于描述框架系统本身。

#1 – React

React 框架继续主导前端领域。该框架以其自己的虚拟 DOM 脱颖而出，确保大规模应用程序的持久性能。同样，基于组件的结构意味着跨团队的开发更容易。

虽然 React 的学习曲线相对平缓，其工具的可访问性也使该过程更易于管理。也就是说，create-react-app自动执行应用程序样板的构建过程非常强大。然后是React DevTools，它提供了可从浏览器访问的良好调试体验。

由于 React 的广泛采用，前端开发人员可以享受许多开源项目的乐趣。例如，为 React 构建了十多个全面的设计系统，从开发过程中节省的时间也是巨大的。

#2 – Angular

虽然 Angular 在当今保持了相当大的使用比例，但开发者对该框架的兴趣却处于历史最低水平。谁知道呢，也许忠实的追随者是因为 Angular 基于 TypeScript而反水？当然，我也是开开玩笑。

Angular 为构建 SPA（单页应用程序）提供了相当大的灵活性。与其它前端框架类似，Angular 实现了基于组件的开发工作流程。并且，添加了模板系统，用它管理组件的动态特性。

最重要的是，Angular 可以并且正在被用来为所有平台构建应用程序。代码可以重复使用以在 Web 应用程序、移动项目以及本机桌面应用程序中实现。至于性能——它通过 SSR 和 Web Workers 进行优化。

Angular 容易上手吗？不完全是。事实上，如果我们看一下调查数据，人们对这个框架的满意度有些下降。主要原因是学习曲线、个人喜好等因素。

#3 – Vue

Vue 是真正现代 Web 开发的可靠选择。Progressive框架最近推出了Vue 3 版本。而且，由于新功能和改进，其目标是巩固自己作为构建现代堆栈的首选框架的地位。

新版本带来了一些新的实现。包括利用 Vite 的新构建工具链。还有一个完全修改的文档，其中有大量的教程可以帮助用户入门。

就其受欢迎程度而言，Vue 的优点在于灵活性。该框架并不强加严格的例程，而是让开发者决定要构建的内容。

例如，你可以构建可在其他开发堆栈中重用的 Web 组件，包括最基本的 HTML 模板。Vue 通常用于开发强大的 SPA 项目，包括CSR、DevTools、对 TypeScript 的支持和测试工具。

#4 – Svelte

Svelte 框架最近得到了相当多的使用率，此外Vercel VC还投资了其作者 Rich Harris。

从本质上讲，Svelte 的工作方式与任何其他组件驱动框架一样。开发者构建组件，然后使用这些组件构建应用程序的 UI。

与 React 等框架相比，主要区别在于 Svelte 不需要完整地交付到浏览器。相反，需要编译 Svelte 应用程序，将用户的组件捆绑到预制的 JavaScript 文件中。

其它框架均使用虚拟 DOM来呈现更改与渲染，而 Svelte 则使用预先分配的 DOM 节点来编译应用程序。

正如 Josh Collinsworth 所展示的，这种方法具有持久的性能优势。最后，Svelte 与本机 HTML 代码非常兼容，并且不强加严格的结构。

这是快速前端开发的理想选择。以下是一个代码示例：

// Example.svelte

Hello, {name}!

值得一提的是，最新版本 Svelte4已经发布。在性能和开发者体验能够进一步提升。

#5 – Preact

元框架一直在学习等方面存在一些曲线问题。

在这种情况下，Preact 的目标是成为 React 的轻量级替代品。如果你过去使用过 React，那么掌握 Preact 将会很容易。事实上，开发者可以轻松地在两个框架之间切换使用组件。

首先是文件包的大小，Preact 的 gzip 压缩后为 4kb，React 的 gzip 压缩为 38kb。同样，事件系统是通过addEventListener处理的，因此可以使用普通 JavaScript 来处理事件。

如果在寻找详细的案例研究，建议各位看一下Etsy 从 React 迁移到 Preact 的原因，它尽可能接近地衡量了在可维护性和迁移稳定性方面的好处并具有长期优势。

#6 – Ember

Ember 的历史很悠久，甚至早于上述所有的前端框架。

多年来 Ember.js 的使用量有所减少。但是它仍然是使用 MVC 模式进行高效应用开发的有力竞争者。并且该框架在 Web 开发人员中很受欢迎，但它对于桌面和移动应用程序也非常灵活。

更重要的是，Ember 仍在作者的领导下积极开发中。并且Ember 4.0版本增加了新功能以跟上前端趋势。

Ember 的另一个特别之处是集成的向后兼容性。就框架而言，Ember 在确保你的代码不会因框架本身的重大更改而中断方面做得非常出色。

#7 – SolidJS

SolidJS 自 2019 年以来一直在积极开发。但是作者对版本号一直比较珍惜，直到 2021 年 6 月，该框架才升级到 v1.0。

从1.0之后，吸引了相当多的追随者。目前，Solid 在 GitHub 上拥有超过 14k star，并且每 3 个月左右就有一次重大更新。

该框架是声明性的，没有使用虚拟 DOM。因此 Solid 与 Svelte 类似，它将组件编译为实际的 DOM。因此，更新状态特定于使用它的代码。

最后，SolidJS 深受 React 的启发。而且，在很多方面都有很多相似之处。包括对 JSX、Hooks API 的支持，以及 Web 组件、SSR 等功能。有趣的是，它的速度也非常快。

Ryan Carniato 得出的基准测试表明，Solid 的性能不仅优于 Svelte、Elm，而且在开发速度上还优于 Vue 和 Redux 等框架。

#8 – Lit

Lit（以前称之为 lit-HTML 和 LitElement）是由 Google 维护的 Web 组件框架。

Lit 是Wordle 技术堆栈中使用的框架 。正在流行的猜词游戏每天吸引着数百万访客。因此，总而言之，Lit 最常用于构建具有简单和复杂界面的渐进式 Web 应用程序。

一直以来它是可以直接使用 Web 组件，这样可以创建不会增加任何额外性能膨胀的组件。Lit 的运行时占用空间非常小。简单地说来，像 React 这样的框架依赖于 JavaScript，而 Lit 只实现了标准化的 Web 组件。

#9 – Alpine

Alpine.js 是一个用于自定义 UI 行为的 JavaScript 前端框架。尽管 Alpine 类似于 Vue 和 Angular，但它对资源使用的要求要低得多。其作者 Caleb Porzio称其为 “缩小 jQuery 和 React 之间差距的一步”。

当你希望在设计中添加交互而不需要任何开销时，Alpine 效果是最佳的。

例如，如果你有预构建的应用程序设计并想要添加交互式菜单下拉菜单，那么使用 React 来实现基本的交互功能有点矫枉过正，而可以将 Alpine 视为优化服务器端 Web 框架的方法。

作者本人强调 ，Alpine 从 Laravel、Django 等框架中获得了很多灵感。同样，它是将 jQuery 风格的功能添加到静态站点生成器（ Jekyll、Hugo 等）的完美轻量级解决方案。

#10 – Stencil

Stencil 是一个用于构建可重用、可扩展设计系统的扩展库。它旨在通过提供小型运行时、小型 API 和开箱即用的配置，使前端开发过程变得简单高效。Stencil 旨在提高性能且面向未来，并且允许开发人员基于开放 Web 标准，构建跨框架组件和设计系统。

Stencil 组件是一种 Web 组件，这使得它们与框架无关，并且与任何主要框架或根本没有框架的兼容问题。凭借 Web 组件、TypeScript 支持、异步渲染管道、文档生成和无依赖库等功能，Stencil 提供了直观的开发人员体验。

Stencil 支持 JSX 并提供完全类型化的 API、内置热重载开发服务器和自定义实用程序。Stencil 还具有出色的开箱即用的默认配置，并允许开发人员更改。该库包括一个本地开发服务器，具备热模块重新加载功能以及由 Stencil 团队和开源社区编写的综合技术文档。

Stencil 是构建设计系统的完美工具，可确保大规模一致的用户体验和品牌体验。它与 Angular、React 和 Vue 无缝集成，并在源映射、零配置、单元测试、代码生成、文档生成和类型方面提供出色的开发者体验。

#11 – Qwik

Qwik 是下一代前端框架，旨在满足现代 Web 开发的需求。

Qwik 专注于性能、可扩展性和开发者用户体验，提供了一种构建快速且响应灵敏的 Web 应用程序的全新方法。

Qwik 的主要功能之一是即时加载，允许应用程序以任何规模加载，无需额外的努力。这是通过一种独特的性能优化方法实现的，该方法消除了水合作用的需要，根据应用程序的复杂性，也只需要几秒钟的时间。

因此，Qwik 应用程序即使在速度较慢的移动设备上也能立即交互，从而获得完美的 Google PageSpeed 分值。

Qwik 也是可恢复的，这意味着应用程序以 SSR/SSG 的形式开始生命周期，在渲染时将应用程序的状态和框架状态序列化为 HTML。这允许 Qwik 在服务器中断的浏览器中恢复执行，而不需要下载或执行任何额外的代码。

总结

前端世界的开发者，正面临着开发工作变得更困难和复杂等挑战。

人们面临的最大问题不是特定库或渲染技术的复杂性，而是粘合在一起并包括大量糟糕的想法。包括一个微依赖系统，通过永无休止的破坏性更改将不同的工具和库粘合在一起。这些并不是一个好主意。

使用无法很好扩展的库也是一个不好的主意。一些组织盲目吹捧追随一种新时尚来保持相关性，而不考虑前端空间实际需要的大局，这让情况变得更加糟糕。

但给人们的好消息是，有一项技能在行业中受到高度重视，那就是工具。能够观察一个工具并想象它在不同场景中的表现是人类一项宝贵的技能。有时更简单的工具是最好的选择。

当然，开发人员对于框架的使用会持有不同的看法。有些人更喜欢纯 JavaScript，但当代码库变得太大时，它可能会变得混乱。另一方面，框架提供了一种严格的方法，但它们也会占用渲染占用一些不必要的时间。

总而言之，前端世界面临着一些挑战，但成功的关键便是对工具有很好的理解，并注重实用技能而不仅仅是流行的技术。