前端框架

参考数据统计网站：2022.stateofjs.com/en-US/libra…

React

资料来源：statista.com

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

虽然 React 的学习曲线适度宽容，但工具的可访问性使流程易于管理。即，create-react-app自动化应用程序样板的构建过程。然后是React DevTools，提供可从浏览器访问的调试体验。

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

2022 年以提供新方法和概念的React 18 版本为标志。最重要的事情之一是实现并发机制。React 还提供了新功能，例如自动批处理和转换概念。它提供了新的客户端和服务器渲染 API 等。

进一步阅读：React App Development: UI, Styling, State Management, Testing

我们的团队热情地监控着 React 的状态，并期待 2023 年对 React 开发者来说是伟大的一年。如果您想提高效率，请在我们的文章中获取 React 开发的最佳实践和工具。

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

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

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

Angular 入门容易吗？不完全是。事实上，如果我们看一下调查数据——对该框架的满意度也大幅下降。主要原因是学习曲线，以及个人喜好。

Vue

Vue 仍然是真正现代 Web 开发的可靠选择。渐进式框架最近推出了 Vue 3 版本。而且，由于新功能和改进，旨在巩固自己作为构建现代堆栈的首选框架。

新版本带来了一些期待已久的实现。包括使用 Vite 的新构建工具链。通过 Pinia 改进了对状态的管理。还有一个完全修改过的文档，其中有大量教程可以帮助您入门。

至于它的受欢迎程度，Vue 擅长灵活。该框架不会强制执行严格的例程，而是让您决定要构建什么。

例如，您可以构造可在其他开发堆栈中重复使用的 Web 组件，包括大多数基本的 HTML 模板。此外，由于原生工具，包括CSR、DevTools、对 TypeScript 的支持和测试工具，Vue 通常用于处理强大的 SPA 项目。

有时，开发人员可能很难在项目的Vue.js 和 React 之间做出选择。Codica 的开发人员使用这两种框架。我们将它们应用于定制软件开发期间发生的不同任务。

Vue.js 以其模块化、弹性和渐进性而闻名。庞大的社区和出色的文档也增加了它的优势。

2022 年，我们看到了 Vue.js – 3.2.45的发布。现在，Vue.js 即将推出 3.3 版本。它已经提升了应用程序的性能、更小的包大小和增强的 TypeScript 支持。

让我们进一步了解将影响 2023 年 JS 框架趋势的 Vue 增强功能。

提高性能

对比之前的 Vue 版本，Vue 3.0 和 Vue 3.2，反应性系统有明显的改进，即：

在 ref 实现中读取速度提高 260%，写入速度提高 50%；
依赖项跟踪速度提高 40%；
最多可减少 17% 的内存使用量。

Vue 3.2 是如何取得如此惊人的成绩的？Vue 3.0 中发布的模板编译器可以快速渲染静态内容并扁平化模板的动态节点。现在它有了一些改进。例如，普通元素 VNodes 的创建速度可以提高 200%。

Vue 3.2 作为最强大的 JavaScript 趋势之一，为开发者提供了以下选择。通过编译器获得性能优化和类型绑定是否对您的项目更好？还是应该手动监控渲染？

大规模支持

在第三次发布之前，Vue 主要适用于小型项目。

但是 Vue 3.0 中内置的 Composition API 可以更轻松地组织和重用大型项目必须的代码。解决了组件来源不明、命名空间冲突、性能滞后等问题。因此，它提高了可读性和类型检查，并符合 2023 年最新的 JavaScript 趋势。

TypeScript 集成

新的虚拟 DOM 和 Composition API 与 TypeScript 兼容，TypeScript 是最重要的 JavaScript 趋势之一。Vue 3 是使用提供捆绑类型声明的 TypeScript 构建的。

分层模块

跟随 JavaScript 框架趋势，Vue 核心已经看到架构转向解耦模块的语料库。因此，该框架提高了可维护性，并引入了 tree-shaking，可减少高达 50% 的运行时大小。

构建 UI 组件库

新方法“定义自定义元素”允许使用 Vue 组件 API 构建自定义解决方案。此功能使开发人员能够创建由 Vue 驱动的 UI 组件库，并且它与您使用的任何框架都兼容。

因此，Vue 在 JavaScript 框架的流行度中仍然占有重要地位。此外，它继续为开发人员提供一种直接且灵活的方式来创建 Web 应用程序。

您可以在Vue 博客中阅读有关最新增强功能的更多信息。

Svelte

根据HTTP Archive 报告显示，2015 年网页的中位数大小为1280 KB ，到 2022 年已增长到了2000+ KB ，庞大的网页会占用大量网络带宽，使页面加载时长更长，一些网络资源不发达的地区更能体会到这种影响。为了改善这种趋势，Svelte 出现了。Svelte 旨在让开发者以最少量的代码，产生最轻量的响应式应用，并且在运行期间产生最小的性能开销。从原理上讲，Svelte 便与 React 和 Vue 两者有一点不同：它不依托 Virtual DOM 技术来实现响应式更新，取而代之的是直接利用自定义的语法规则来实现响应式数据的分析、绑定以及响应式过程代码的实现，大部分场景下最终编译生成的产物大小可以做到和原生实现媲美，且性能不逊色于 Vue 和 React。

Svelte 在 2021 年度 stackoverflow 网站上关于“最受欢迎的 web 框架”调研中位列第一，在 2022 年度的此项调研也位列第二，从好评比例来看使用者们对这个框架很满意。github stars 的增长速度也说明了 Svelte 是一个在开发者社区中十分有发展潜力的 Web 框架，在生态日趋完善之后，Svelte 很可能是一个比肩 React 和 Vue 的存在。

该框架最近得到了相当多的采用，甚至Vercel 对其创建者 Rich Harris进行了投资。从根本上说，Svelte 的工作方式与任何其他组件驱动的框架一样。与 React 等框架相比，主要区别在于 Svelte 不需要完整地传送到浏览器。相反，必须编译 Svelte 应用程序，这会将您的组件捆绑到一个预制的 JavaScript 文件中。

其他框架使用虚拟 DOM来渲染更新，而 Svelte 编译应用程序时使用预先分配的 DOM 节点。正如 Josh Collinsworth 所展示的那样，这种方法具有持久的性能优势。最后，Svelte 与原生 HTML 代码非常兼容，并且不强加严格的结构。

这是快速前端开发的理想选择。这是一个例子：

// Example.svelte
<script lang="typescript">
  export let name = 'Svelte';
  export let textColor = '#000';
  function reset() {
    name = 'Svelte';
    textColor = '#000';
  }
</script>
<h1 style="color: {textColor}" on:dblclick={reset}>Hello, {name}!</h1>
<style>
  h1 {
    margin: auto;
    font-family: Georgia, system-ui;
    font-size: 3rem;
    font-weight: regular;
    text-align: none;
  }
</style>

Svelte 是一个依赖于基于组件的架构的前端框架。该框架的第一个版本是用 JavaScript 编写的，并于 2016 年发布。但 2019 年发布的第三个版本使用的是 TypeScript。Svelte 肯定会成为 2023 年流行的 JavaScript 趋势之一。

自 TypeScript 版本发布以来，这个框架引起了开发者社区的极大兴趣。Svelte 是让大多数程序员满意的顶级框架之一。

Svelte 是一个轻量级框架，可帮助开发人员创建强大的 Web 应用程序。React 和 Vue 在运行时将应用程序转换为 Vanilla JS（无需任何其他框架或库即可使用 JS 的框架）代码。

相反，Svelte 在构建时执行它。Svelte 充当编译器，允许在没有抽象层的情况下在浏览器中运行 Web 应用程序。

让我们来讨论一下 Svelte 的特别之处，它是 2023 年不容忽视的 JavaScript 趋势之一。

Svelte 的优势

内置reactiveness：我们听说React是reactive的。但是 Svelte 发现了 React 的虚拟 DOM（文档对象模型）之外的另一个反应性来源。问题是，Svelte 应用程序中的所有组件都可以有一个状态。一旦更改组件的状态，DOM 就会更新。
增强的性能：Svelte 显示出出色的运行时性能。JavaScript 数据趋势也表明，这个框架特别适合中小型项目。
紧凑的语法：Svelte 的语法简单易读。此外，Svelte 应用程序不需要太多样板文件。

最新趋势表明 Svelte 的使用将继续扩大。

Preact

元框架一直是一回事。而且，在这种情况下，Preact 的目标是成为 React 的轻量级替代品。如果您过去使用过 React，那么掌握 Preact 会很容易。事实上，您可以轻松地在两个框架之间使用组件。

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

如果您正在寻找详细的案例研究，我建议您查看为什么 Etsy 从 React 迁移到 Preact。该出版物尽可能地衡量收益，以及在可维护性和迁移稳定性方面的长期优势。

Ember

Ember 历史悠久，早于上述所有框架。当然，这些年来 Ember.js 的使用量可能会少很多。但是，它仍然是使用 MVC 模式进行高效应用程序开发的有力竞争者。而且，虽然该框架在 Web 开发人员中很受欢迎，但它对于桌面和移动应用程序也非常灵活。

更重要的是，Ember 仍在积极开发中。Ember 4.0 版本添加了新功能以跟上前端趋势。使 Ember 与众不同的另一件事是集成的向后兼容性。就框架而言，Ember 在确保您的代码不会因框架本身的重大变化而中断方面做得非常出色。

Lit

Lit（以前称为 lit-HTML 和 LitElement）是由 Google 维护的 Web 组件框架。Lit 是Wordle 技术堆栈中使用的框架。流行的猜词游戏每天有数百万的访问者。因此，总而言之，Lit 最常用于构建具有简单和复杂界面的渐进式 Web 应用程序。

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

Alpine

Alpine.js 是一个用于自定义 UI 行为的 JavaScript 前端框架。而且，尽管 Alpine 类似于 Vue 和 Angular，但它对资源使用的要求要低得多。作者Caleb Porzio将其称为 “关闭 jQuery 和 React 之间漏洞的水龙头” 。

当您希望在没有所有开销的情况下向您的设计添加交互时，Alpine 最有效。例如，如果您有一个预构建的应用程序设计并且想要添加交互式菜单下拉菜单。将 React 用于基本的交互功能是矫枉过正的。

将 Alpine 视为优化服务器端 Web 框架的方法。事实上，作者自己强调Alpine 从 Laravel、Django 等框架中获得了很多灵感。同样，它是为静态站点生成器添加 jQuery 风格功能的完美轻量级解决方案：Jekyll、Hugo 等。

Solid

SolidJS 自 2019 年以来一直在积极开发。但是，该框架在 2021 年 6 月升级到 v1。从那以后，吸引了相当多的追随者。目前，Solid 在 GitHub 上有超过 14k star，每 3 个月左右有一次大更新。

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

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

Ryan Carniato 总结的一项基准测试表明，Solid 能够胜过 Svelte、Elm，但也胜过 Vue 和 Redux 等框架。

Stimulus

最后，至少在今年，我们有刺激计划。Basecamp 正在开发的最小 JS 框架。您会注意到的第一件事是它与 Alpine 有相似之处。换句话说，Stimulus 试图成为 jQuery 的适度替代品。

该框架最适合用于增强您已经用作页面结构一部分的 HTML。Stimulus 允许您通过添加 JavaScript 数据控制器来优化您的 HTML 元素。这些是交互式和动态功能，可用于增强表单提交、按钮外观等。

总结

如果从今年的趋势中得出一个结论，那就是开发人员正在寻求简化事情。通过 Lit 和 Solid 等框架，这一点非常明显。虽然 React 有一个很棒的生态系统，但并不总是需要它来构建简单的 SPA 和 PWA 应用程序。我也相信这种趋势本身就非常明显。

Angular 曾经是有史以来最好的东西，但它的结果让开发人员望而却步。因此，Vue、React 和 Angular 正在失去开发人员的兴趣也就不足为奇了。

而且，更小但更复杂的替代品越来越受欢迎。事实上，今年以来，影响前端开发者生态的项目不计其数。也就是说，Bun旨在作为事实上的 JS 运行时和Fresh进行竞争——它强调速度和简单性，我完全希望这些工具在明年的报告中名列前茅。

Library

lit-element：用于跨项目共享组件和开发 UI 设计系统的快速轻量级工具。
date-fns：用于浏览器和 Node.js 的现代实用程序库。它比 Moment 库更轻量级。
RxJS：它非常适合通过使用可观察序列来创建函数式、异步和基于事件的程序。
yup：带有 TypeScript 支持的用于验证的表现力 JavaScript 架构构建器。
agenda.js：MongoDB 支持的 Node.js 作业调度的低开销解决方案。
Bull：快速可靠的基于 Redis 的 Node.js 队列。此外，它还有用 TypeScript 编写的兄弟BullMQ。
Jest：用于构建、运行和构建测试的快速、安全且文档齐全的库。
Commander.js，受Ruby 编程语言Commander 库启发，用于在 Node.js 中创建 CLI 的库。它带有 TypeScript 支持。

趋势追踪

参考资料

the end~

【2023】前端趋势前瞻，学起来！（四）

前端框架

React

资料来源：statista.com

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

Vue

Svelte

Preact

Ember

Lit

Alpine

Solid

Stimulus

总结

Library

趋势追踪

参考资料

热门文章

最新文章

相关课程

相关电子书

相关实验场景

【2023】前端趋势前瞻，学起来！（四）

前端框架

React 资料来源：statista.com

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

Vue

Svelte

Preact

Ember

Lit

Alpine

Solid

Stimulus

总结

Library

趋势追踪

参考资料

热门文章

最新文章

相关课程

相关电子书

相关实验场景

React

资料来源：statista.com

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