2023年你应该关注的JavaScript趋势

本文翻译者系360 奇舞团前端开发工程师

原文标题：Top JavaScript (JS) Trends You Should Follow in 2023

原文作者：yevheniia

原文地址：https://www.codica.com/blog/top-javascript-trends/#top-java-script-frameworks-and-libraries-to-watch-for-in-2023

正如他们所说，有多少个JavaScript框架和库，就有多少个银河系的星星。JS库和框架的数量是巨大的--我们完全同意！但是，到目前为止还不到3000亿。

然而，到目前为止，它还不到3000亿。幸运的是，开发者不需要花费一生的时间去寻找项目中流行的JavaScript框架。

性能、速度、还是流行度？开发人员在技术栈中寻求的最重要的特征是什么？几乎不可能有一个单一的理由来解释为什么某些框架会兴起，而其他框架则成为过去式。

你能做的就是观察前端领域内的驱动方向。因此，让我们深入了解2023年最值得关注的JavaScript趋势!

目前JavaScript开发的趋势是什么？

现在，我们来看一下JavaScript中10个最热门的趋势。

一、React独占鳌头

React保持领先地位你知道吗，在2022年，React是继Node.js之后第二大最常用的框架。祝贺所有使用React的开发者和粉丝们。首先来看一份2022年最多使用的WEB框架数据:

数据来源: statista.com^[1]

让我们稍微回顾一下历史，看看这个流行的JavaScript工具是如何创建的。

2011年，由于Facebook需要维护其服务的快速发展的流量，React库应运而生。React的早期阶段的原型被称为FaxJS。当时，它还不是一个如此强大、高效、便捷的库。这个版本的React帮助开发者创建用户界面。

后来，在2013年，React库变成了一个开源项目，也由Facebook维护。通过其维护者的集体努力，React站在了JavaScript开发者库的顶端。React被许多行业领导者使用，包括Pinterest、WhatsApp、Instagram、Reddit、Netflix等

截至2022年，React的npm包仍然处于首位。而且，它多年来一直处于大受欢迎的状态。此外，它多年来一直处于极大的青睐之中。它是最稳定的JS趋势之一。相比之下，Svelte最近才夺得第一名。

你可以在下面的图表中找到JavaScript框架的采用趋势。数据来源: Npm Trends^[2]

2022年React 18^[3]的发布，它提供了新的方法和概念。其中一个重要的东西是实现并发机制。React还提供了新的功能，如自动批处理和过渡的概念。它提供了新的客户端和服务器渲染API等。

二、需求激增的Node.js

Node.js已迅速成为最受欢迎的编程语言之一。有了它，开发人员开始以更快、更容易的方式构建可扩展的应用程序。它被采用于构建前端和后端应用程序。在2022年，它的下载量稳定增长。

数据来源:Node npm trends^[4]

为什么Node.js变得如此受欢迎？因为它的多功能性使开发更快，并为解决方案带来高效率。

这种JavaScript运行时环境允许创建轻量级和灵活的代码。通过纵向增加节点或横向增加额外的资源，WEB应用可以轻松地进行扩展。这样的模块化结构使项目的变化不会影响其系统。

以下每个用例都嵌入了Node.js的功能:

• 流媒体的网站和文件上传的资源。例如，Netflix。
• 处理许多短消息的实时应用程序，具有最轻微的延迟。例如，LinkedIn 和 Trello。
• 基于微服务的应用。例如，与PayPal的互动需要改变。因此，你可以只更新PayPal服务，而不是整个应用。
• Node.js社区对其潜力做出了开源贡献，改进了这个工具。这就是为什么它保持在最新的JavaScript技术中，而且这种趋势可能会在2023年继续下去。

三、Vue持续发展

有时，对于开发者来说，要在Vue.js和React之间选择一个项目是很困难的。

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

在2022年，我们看到了Vue.js的发布--3.2.45版本^[5]。现在，Vue.js正在走向它的3.3版本。它已经提升了应用程序的性能，更小的打包体积，并增强了对TypeScript的支持。

让我们了解更多关于Vue的强大，这将影响2023年JS框架的趋势!

3.1 性能更强

对比Vue的上一版本，即Vue 3.0和Vue 3.2，响应式系统显示出明显的改进，即:

• 在ref实现中，读取速度最高可达260%，写入速度最高可达50%。
• 高达40%的依赖跟踪速度。
• 减少了17%的内存使用量。Vue 3.2是如何获得如此惊人的成果的？Vue 3.0中发布的模板编译器快速渲染了静态内容，并将模板的动态节点扁平化。现在，它已经得到了一些改进。例如，普通元素VNodes的创建速度可以提高200%。

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

3.2 强大的支持阵容

在第三个版本之前，Vue主要适合于小型项目。

但Vue 3.0中构建的Composition API使其更容易组织和重用代码，这对大项目来说是必须的。它处理了诸如组件来源不明确、命名空间冲突和性能滞后等问题。因此，它提高了可读性和类型检查，并符合2023年的最新JavaScript趋势。

3.3 TypeScript集成

新的虚拟DOM和Composition API与TypeScript兼容，这是最重要的JavaScript趋势之一。Vue 3是用TypeScript构建的，并预置了一些必要的类型声明。

3.4 模块分层

Vue的核心架构已经跟随JavaScript框架的趋势高度解耦。因此，该框架的可维护性得到了改善，并引入了tree-shaking，减少了高达50%的运行时大小。

3.5 构建UI组件库

新的"自定义元素"方法可以使用Vue组件API构建自定义解决方案。这个功能使开发者能够创建由Vue驱动的UI组件库，而且它与你使用的任何框架都兼容。

因此，Vue仍然在今后的JavaScript框架中占有重要一席。而且，它还持续为开发者提供一种更加快捷高效的方式来创建WEB应用。

有兴趣的读者可以在blog.vuejs.org^[6]阅读更多关于最新的特性。

四、TypeScript发展迅猛

TypeScript是一种编程语言，是JavaScript的超集，由微软在2012年发布。它的创作理念来自于JS不限制对象类型的事实。正如他的名字所示，它支持JS所缺乏的可选类型。TypeScript还增加了枚举，以便于更好的组织代码。

微软的解决方案并不是市场上提出的唯一解决方案。然而，GitHub的状态显示，TypeScript年复一年稳居第四位。它仍然是这里使用最多的编程语言之一。

数据来源: The State of the Octoverse | GitHub^[7]

TypeScript采用了JavaScript的语法和语义。而且它带来了一些JavaScript开发者渴望的额外功能。这种语言提高了开发人员的生产力，使其更容易维护不断增长的代码库。

让我们回顾一下TypeScript作为最强大的JavaScript趋势之一的主要优势。

4.1 TypeScript 的优势

• 容易上手

对于那些熟悉Javascript的人来说，转换到这种语言并不那么具有挑战性。

• 广泛采用

TypeScript 受到顶级 JavaScript 库和框架的支持。此外，它还可以编译出可读的、基于标准的 JavaScript。

• 可选的静态类型化

TypeScript是基于结构性的，或 "鸭子 "类型。使用这种语言，你可以通过组合现有的类型来创建复杂的类型。为了这个目的，你可以使用联合或泛型。此外，这种语言还支持接口。

• 早期错误检测

TypeScript可以通过突出显示意外行为来降低程序错误的数量。而且它发生在编译时，而不是像JavaScript本身那样在执行过程中。这就是 TypeScript 如何设法生成更多优质代码的原因。

• 支持大规模的解决方案

JavaScript并不是为创建大型复杂系统而生的，现代网络中充斥着这种系统。为了达到这个目的，TypeScript借用了一些面向对象的功能，如接口、泛型和模块。

这就是为什么根据Stack Overflow开发者调查^[8]，TypeScript是2022年最受欢迎的5种编程语言之一。各项数据表明，TS的普及度将在2023年持续增长。

所以，这种语言的广泛接受是最近最有影响的JavaScript趋势之一。然而，它也有其缺点。TypeScript代码需要被编译成常规的JavaScript代码才能被浏览器执行。当在小项目上工作时，这种延迟可能会很严重。所以在这些情况下，JavaScript还是比较好用的。

五、Angular--性能更高、更贴向于人机工程学

尽管复杂，但Angular仍然是被广泛用于企业运行的坚实而广泛的解决方案。Angular团队持续改进这个框架，以跟上最新的JavaScript技术。

IBM、freelancer.com、Weather和Forbes都使用Angular建立了他们的网站^[9]:

• 由于Angular，网站确保了高性能，帮助它们承受重载。
• 以完美的响应性提供丰富的用户体验。
• 通过Angular，解决方案支持吸引人的视觉动画和主题。在2022年，发生了14个Angular版本。一基本上每一个新版本的Angular都涵盖了许多错误的修复和新功能。例如，从实现路由的强类型到更多的tree-shakable的错误信息。

这些新技术改善了开发过程，帮助开发者提供精简的解决方案。有兴趣的读者可以在blog.angular.io^[10]阅读更多关于v14的更新。

六、Svelte正在飞速发展

Svelte是一个依赖于基于组件架构的前端框架。这个框架的第一个版本是用JavaScript编写的，于2016年发布。但2019年问世的第三个版本则使用TypeScript。Svelte在2023年流行的JavaScript趋势中绝对占有一席之地。

自从TypeScript版本发布以来，这个框架在开发者社区带来了太多的兴趣。Svelte是满足大多数程序员的顶级框架之一^[11]。

以下是最受开发者欢迎的框架：

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

相比之下，Svelte在构建时执行。Svelte作为一个编译器，允许在没有抽象层的情况下在浏览器中运行WEB应用。

Svelte会是接下来的一年中不可忽视的框架之一。

6.1 Svelte的优势

• 内置响应式

我们已经听说React是响应式的。但Svelte在React的虚拟DOM（文档对象模型）之外找到了另一个响应式的来源。问题是，Svelte应用中的所有组件都可以有一个状态。只要你改变一个组件的状态，DOM就会被更新。

• 性能增强

Svelte显示了很好的运行时性能。JavaScript数据趋势也显示，这个框架特别适合中小型项目。

• 紧凑的语法

Svelte的语法简单明了，可读性强。而且，Svelte应用程序不需要太多的模板。

最新的趋势表明，Svelte将会更受欢迎。

七、 Jamstack--为数百万人服务

Jamstack是一个WEB开发解决方案，使用户能够创建快速和安全的应用程序。Netlify出品，Jamstack已经远远超出了JAM的范畴。它现在指的是一种广泛的架构方法，用许多库和方法制作网站。

Jamstack社区调查^[12]发现，47%的Jamstack开发者从事边缘动态网站的工作。此外，这些平台吸引了数百万的用户。

获得Jamstack的最突出的例子是路易威登(LV)^[13]、Victoria Beckham Beauty^[14]和一些其他网站。

7.1 Jamstack的优势。

• 可以根据需要进行定制，因此更改需要的代码较少。
• 标记和资产通过CDN交付，确保更好的性能。
• 如果你的项目遇到流量高峰或预计的增长，CDN还可以平滑地进行扩展。
• Jamstack使开发人员能够使用微服务方法来构建网站。因此，应用程序的可维护性变得更强。
• Jamstack的页面是快速和轻便的。这些措施使你的项目在Core Web Vitals中排名更高，加载速度是其中一个标准。
• 服务器端渲染模式有助于在用户请求页面时为高动态网站生成内容。
• Jamstack网站与敏感信息没有直接联系。所以它们是安全的，不会受到黑客的攻击。

7.2 Jamstack的缺点。

• 该解决方案可以使用第三方API，如天气表格或用户认证。所以要确保你有一个后备方案，使你的网站不会因为第三方的API故障而瘫痪。
• Jamstack在许多情况下需要编码。它不完全是插件式的。因此，如果你的项目没有连接到CMS，你可能需要改变。
• 你需要在进行修改后 "创建 "每一个页面。在网站有许多页面的情况下，这个过程是不方便的。

但好在Jamstack的工程师们一直在努力解决这些问题。因此，Jamstack有望在2023年更受欢迎。

八、 GraphQL--更高效的数据管理

GraphQL是Facebook在2015年发布的一种查询语言。

这个数据管理工具为从后端和前端查询数据提供了一个灵活的语法。现在，它被许多流行的公司使用，如GitHub、Pinterest、Coursera、Shopify等等。

如今，有各种盛行的JavaScript框架和库，可以获得最大的数据管理。此外，所有互联网的使用有很大一部分来自于移动设备，这使得高效的数据加载成为必须。

创建GraphQL的原因是Facebook需要提高其应用程序中数据调用的性能。而GraphQL很好地完成了这项工作。

让我们讨论一下，作为2023年最重要的JavaScript趋势之一，这种语言带来了哪些好处。

8.1 GraphQL的优势

• 快速的数据检索

这种语言在一个单一的端点下收集数据。因此，为了检索所需的数据，程序员只需要执行一次API调用。

• 提高查询效率

该语言的名称表明，它使用图形来定义服务器上的数据。这种基于图的方案允许以包的形式提供数据，而不是通过多次API调用。

• 定制化的请求

这种语言支持每个字段和嵌套对象的参数，包括标量字段。这种强类型化的特征来自于抽象原则。通过这样的方式，我们减少了复杂性，并专注于基本信息。

所有这些好处可以使GraphQL成为2023年的顶级JavaScript趋势之一。

九、Web components

没有人能够预测五年后的JavaScript框架。但是web components可以在任何流行的框架中广泛使用，甚至可以在普通的JavaScript中使用。

这就是为什么这些现代应用程序的构件被称为框架无关的。另一个名字是不可知的web components。它们促进了WEB开发，减少了创建一个应用程序所需的时间和成本。

但是，是什么让这个概念在其他JavaScript趋势中如此受欢迎，它是如何工作的呢？它是基于以下规范的:

• 自定义元素允许开发者创建具有完全可定制行为的新的自主HTML标签。

• Shadow DOM使得将DOM子树封装到WEB元素中成为可能。

• ES模块决定了如何包含JS模块并在其他JavaScript文档中重用它们。

• HTML模板提供了一种创建标记片段的方法，这些标记片段在运行时被实例化而不影响页面的加载。

当谈到最新的JavaScript趋势时，web components是众望所归的。

但为什么会这样呢？让我们来发现实施web components的好处，它是2023年最值得关注的JavaScript趋势之一。

9.1 web components的优势

• 互操作性和灵活性

web components是一个独立于平台的概念，可以在所有主要浏览器中使用，因为它只依赖于HTML、CSS和JavaScript。web components得到了顶级JavaScript库和框架的良好支持:来源:webcomponents.org^[15]

• 可重用性和封装

web components依赖于本地浏览器模型的实现。这使得组件可以在任何JavaScript应用程序中重复使用。

• 移动增强

渐进式WEB应用程序现在的势头越来越好。因此，PWA开发成为想要有效地与他们的移动客户接触的企业的必备条件。这就是web components可以提供很大帮助的地方，因为它们的打包体积小，运行时间快。

十、基于组件的架构体系

基于组件的架构将设计分解为逻辑性的或函数式元素。这些元素体现了众所周知的接口，如方法、属性和事件。

这种架构努力提高组件的重用性。组件是可自我部署的二进制单元，具备更良好的函数封装性。

谈到最新的JS趋势和一般的前端开发，我们不能不谈及一个叫做Bit^[16]的开源平台。它是一个分享、存储和组织任何项目的web components的伟大工具。它有助于提高代码的可重用性和对独立组件的协作。

10.1 基于组件的架构的优点

• 便于部署

当你需要推出一个新版本时，你不需要替换整个系统。与特定组件有关的一切都在其类中声明。

• 降低成本

你可以整合第三方组件，也可以在不同的应用程序中划分软件成本。

• 易于开发

组件使用接口，有助于不影响应用程序的其他部分。问题是，一个层次的架构（大多数情况下是视图）包含了逻辑、设计和辅助函数。

• 测试新的JavaScript技术 你可以进行新组件与现有应用程序或元素的兼容性测试。

那么，为什么你需要实施基于组件的方法是最近的JavaScript趋势之一？选择组件，你可以使用你的团队为另一个项目或整个开源社区开发的部分代码。

十一、2023年需要关注的顶级JavaScript框架和库

以上，我们已经强调了JavaScript的重大趋势。但许多JS扩展应用也有很高的关注度。

在本节中，我们将重点关注2023年保持趋势的最流行的JavaScript库和扩展。

11.1 前端框架

• Next.js^[17]。

一个基于react的JS框架，很适合服务器渲染的单页应用程序。它支持混合静态渲染、智能打包和路由预取。此外，它还具有强大的TypeScript和SEO支持。截至2022年，Next.js凭借其新的13个版本，显示出显著的人气上升。你可以在下面的图片中看到这种增长:数据来源: npm trends^[18]

• Nuxt.js^[19]。

它可以被描述为Vue上的Next.js。然而，它是一个有其优点的框架。例如，它能很好地处理建立通用的WEB应用，可以在前端和后端执行。另外，它有精细的元标签管理，可以促进SEO。

• "了不起的盖茨比"--Gatsby^[20]。

由React驱动的框架，用于构建电子商务平台、登录、博客和渐进式WEB应用。它为程序员提供了代码和数据分割的功能。它在速度、安全和SEO实践方面都很好。在我们公司内部，我们也是Gatsby的忠实粉丝。我们使用这个框架来建立我们公司的网站。所以，它的性能很高，工作起来也很顺畅。

• VuePress^[21]。

静态网站生成器，由Vue的创造者Evan You开发。它有利于技术文件的处理。使用VuePress，你只需使用两个命令就可以得到一个预渲染的SEO友好的单页应用程序。此外，你可以在你的VuePress应用程序中使用Vue组件。

11.2 后端框架

• Nest.js^[22]。

TypeScript编写的Node.js框架。它非常适用于开发稳健和可扩展的各类后端WEB应用。它抓住了面向对象、函数式和响应式编程的最佳理念。它的架构提供了代码的模块化、测试能力和可维护性。

• Express.js^[23]。

Node.js框架，主要用于构建RESTful API服务器。RESTful API是两个计算机系统应用于安全共享网络信息的接口。它提供对输入/输出请求处理的支持。Express带有一系列的工具和中间件模块，以促进WEB开发过程。同时，它很容易配置和扩展。

• Fastify^[24]。

它为前一个框架提供了一个快速和低开销的替代品。Fastify的特点是封装的插件、钩子和装饰器，有利于代码的重用和解耦。此外，它还支持TypeScript，这是当前最重要的JS趋势之一。

• Socket.io^[25]。

它包含一个Node.js服务器和JavaScript客户端API。Socket.io很适合聊天开发。Socket.io可以自动连接、断开连接检测、多路复用和任意通道支持。

11.3 库

• LitElement^[26]。快速、轻量级的工具，用于跨项目共享组件和开发UI设计系统。

• Date-fns^[27]。用于浏览器和Node.js的现代日期工具库。它比Moment库更轻量级。

• RxJS^[28]。它非常适用于通过使用可观察序列创建函数式的、异步和事件驱动的应用程序。

• Yup^[29]。Yup是一个用于运行时值解析和验证的模式构建器,支持TypeScript。

• Agenda.js^[30]。由MongoDB支持的Node.js中工作调度的低开销解决方案。

• Bull。用于Node.js的基于Redis的快速和可靠的队列。此外，它还有TypeScript编写的兄弟BullMQ^[31]。

• Jest^[32]。用于构建、运行和结构化测试的快速、安全且文档齐全的库。

• Commander.js^[33]。支持TS,用于在Node.js中创建CLI的库，灵感来自Ruby编程语言的Commander库。

十二、结语

在2023年，我们可以预测JavaScript根本不会消失，而TypeScript也越来越流行。在这些推陈出新的趋势的推动之下,JS定会蓬勃发展。

参考资料

[1]

statista.com: https://www.statista.com/statistics/1124699/worldwide-developer-survey-most-used-frameworks-web/

[2]

JavaScript框架的采用趋势: https://npmtrends.com/angular-vs-backbone-vs-jquery-vs-react-vs-svelte-vs-vue

[3]

React 18: https://reactjs.org/blog/2022/03/29/react-v18.html

[4]

Node npm trends: https://npmtrends.com/node

[5]

Vue 3.2.45: https://github.com/vuejs/core/blob/main/CHANGELOG.md

[6]

blog.vuejs.org: https://blog.vuejs.org/

[7]

The State of the Octoverse | GitHub: https://octoverse.github.com/2022/top-programming-languages#:~:text=Top%20languages%20used%20in%202022,place%20year%2Dover%2Dyear.

[8]

Stack Overflow开发者调查: https://survey.stackoverflow.co/2022/

[9]

IBM、freelancer.com、Weather和Forbes都使用Angular建立了他们的网站: https://www.madewithangular.com/categories/angular/

[10]

blog.angular.io: https://blog.angular.io/angular-v14-is-now-available-391a6db736af

[11]

满足大多数程序员的顶级框架之一: https://survey.stackoverflow.co/2022/#section-most-loved-dreaded-and-wanted-web-frameworks-and-technologies

[12]

Jamstack社区调查: https://jamstack.org/survey/2022/

[13]

LV: https://eu.louisvuitton.com/eng-e1/homepage

[14]

Victoria Beckham Beauty: https://www.victoriabeckhambeauty.com/

[15]

webcomponents.org: https://www.webcomponents.org/

[16]

Bit: https://bit.dev/

[17]

Next.js: https://nextjs.org/

[18]

Next.js npm trends: https://npmtrends.com/gatsby-vs-next-vs-nuxt

[19]

Nuxt.js: https://nuxtjs.org/

[20]

Gatsby: https://www.gatsbyjs.com/

[21]

VuePress: https://vuepress.vuejs.org/

[22]

Nest.js: https://nestjs.com/

[23]

Express.js: https://expressjs.com/

[24]

Fastify: https://www.fastify.io/

[25]

Socket.io: https://socket.io/

[26]

LitElement: http://lit.dev/

[27]

Date-fns: https://date-fns.org/

[28]

RxJS: https://rxjs-dev.firebaseapp.com/

[29]

Yup: https://github.com/jquense/yup#api

[30]

Agenda.js: https://github.com/agenda/agenda

[31]

BullMQ: https://docs.bullmq.io/

[32]

Jest: https://jestjs.io/

[33]

Commander.js: https://github.com/tj/commander.js/

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。