2021 年 JavaScript 明星项目

802 阅读9分钟

欢迎来到第六期 JavaScript Rising Stars,这是我们对 JavaScript 领域的年度总结。

如果你在 2021 年休息了一段时间以便修复来自 JavaScript 的疲劳,那么你就来对地方了!

我们将讨论元框架、编译速度需求以及全明星逐渐加入科技公司的趋势。

但首先,我们今年终于有了一个新的 “冠军”,太出人意料了,而且它是一个命令行工具!


下列图表对比了各个项目在 GitHub 上于过去 12 个月新增的 star 数量。分析的数据来源为 Best of JS 网站 ,一个 WEB 领域优秀项目的精选网站。通过点击项目,可以查看更多信息。

目录

image.png

image.png

最受欢迎项目

image.png image.png

前三甲

年度流行项目是 zx,一个由谷歌推出的全新的工具,可用于以 JavaScript 或 TypeScript 编写简单的命令行脚本。

基本上它可以让你在代码中嵌入任何 bash 表达式(lscatgit...等任何命令!),并 await 使用 JavaScript 模板字符串的结果。

它引入了由几个流行的软件包提供的实用工具:

  • node-fetch 与浏览器中 fetch 有着相同的 API, 可创建 HTTP 请求。
  • fs-extra 可处理文件系统操作。
  • globby 以用户友好模式来匹配给定的文件名。

其次,Vite 是一个使用 esbuild 编译器的,有着优秀性能的构建工具。出生时,它仅与 Vue.js 社区相连,但现在它为主流的UI框架都提供了支持:ReactSvelteLit

排在第三位的 Next.js 依旧保持了其在 React 世界中 “元框架” 的领先地位。

Tauri

第五名,Tauri 是一个使用 Web 技术构建桌面应用程序的解决方案。

与 Electron 相比,它是用 Rust 编写的,而且它不在每一个应用程序中搭载 Node.js 运行时。1.0 测试版刚于 5 月发布的

特选

它没有进入前十名,但 Astro 是今年最值得注意的项目之一。Astro 是一个加载速度更快的建站工具,因为它使用较少的 JavaScript。

它的概念接近于静态网站生成(SSG),但关键的区别在于,Astro 可以让你在网页中引入被称为 “岛屿” 的动态互动部分。

在客户端渲染动态组件时可应用不同的策略:

  • 当页面加载时
  • 当页面空闲时,如果它是一个低优先级的组件(考虑跟踪。)
  • 当组件可见时,使用游览器 Intersection Observer API

最厉害的部分之一是 Astro 页面可以用任何框架编写的 HTML 和组件组合来构建。React、Vue.js 或 Svelte...

前端框架

image.png

自我们开展 JavaScript Rising Stars 活动以来,React  首次成为头号 UI 框架,但如果我们考虑到 Vue.js 被分成了两个仓库(第二和第三版本),实际上 Vue.js 才是第一名。

最大的变化是 Svelte 的崛起,它超越 Angular 占据第三位。

越来越多的工具或组件将 Svelte 纳入目标框架中(例如我们提到的 Vite)。

今年的主要头条新闻之一是,Svelte 的创造者 Rich Harris 正在加入 Next.js 背后的 Vercel 团队。

与 Next.js 一样,Svelte 也有自己的元框架来构建高性能的应用程序:SvelteKit

第五名的 Solid 是 React 的一个有趣的替代品。组件是用 JSX 编写的,但它不像 React 那样依赖虚拟 DOM。

它也启发了 Mitosis,一个针对任何框架编写和编译组件的工具:React, Vue.js, Angular, Svelte...

Node.js 框架

image.png

主要的 UI 框架都有自己的 “元框架” 来构建现代和可扩展的应用程序,提供诸如路由、服务器端渲染、提前静态生成页面、为生产优化构建...等功能。

  • React 的 Next.js,是这个类别的冠军,也可以说是这个领域的先驱者
  • Vue.js 的 Nuxt,现在分为 Vue.js v2 和 v3 两个版本
  • Svelte 也有 SvelteKit

Remix,一个构建 React 应用的全栈框架,是这个类别中的新秀。它也是今年最大的故事之一。它是由 React Router 的作者创建的,在 10 月之前,它只对付费支持者开放。

该项目自公开以来得到了很多助力(以及 300 万美元的种子资金,这也有帮助!)。它的座右铭很明确:“Web 基础,现代用户体验”,因为它的 API 尽可能遵循 web 标准(HTTP响应,表单提交...)。

这里有两个让我大吃一惊的示例:

要处理表单提交,你可以...只做正常的表单提交。这似乎是显而易见的,但开发人员更习惯于写 event.preventDefault() 来避免表单提交。最重要的是,即使 JavaScript 被禁用,表单也能正常工作。Remix 挑战了我们认为理所当然的行为,用注重用户和开发者体验的新方法 "remixing" 旧原则,这真是太有趣了。

此外,它还以一种非常聪明的方式处理嵌套路由,能够以一种有效的方式加载一个给定页面上所有组件所需的数据,而不是产生瀑布式的 HTTP 调用,而这往往会导致屏幕上出现大量的旋转指标。

除了这些元框架,在第二位的 Nest 是更传统的服务器端 Node.js 框架的领导者,不与任何 UI 库相联系。

最后在第三位的 Strapi 是 “无头 CMS” 的领导者,就是那些提供丰富的仪表盘让用户管理数据和现代 API 让开发者从数据中建立任何东西的应用程序。最新版本(4)提供了一个建立在 React 组件库之上的设计系统。

构建工具

image.png

在 2021 年,早已存在的趋势更进一步。

对原生 ES 模块的接纳仍在继续。Vite 已经被广泛采用(比 snowpack 更快),引领了一个新的工具生态系统(如 Vitest,一个基于 ES 的现代测试框架)。ES 模块也在 Node.js 生态系统中逐渐被接纳,但这并不容易。TypeScript 甚至在 Node.js 中推迟了对 ES 模块的支持

出于对性能的考虑,越来越多的前端工具开始用其他语言构建的(见awesome-js-tooling-not-in-js)。

Lee Robinson 写道,Rust 是 JavaScript 基础设施的未来。Rust 特别有趣,因为它既有很好的性能,又与 JavaScript 有互操作性。NAPI-RS 允许 JavaScript 和 Rust 在没有任何序列化成本的情况下相互通信。Next.js 正押注 SWC,这是一个可扩展的 Rust 编译器,允许他们将最流行的 Babel 插件移植到 Rust。

Parcel2 已经发布了一个新的 Rust 编译器Rome 工具链也正在用 Rust 重写,但其创始人之一 Jamie Kyle 刚悄无声息地离开了公司

Rust 显然是领先的非 JS 语言,但它并不是唯一提供出色性能的语言。Bun 是用 Zig 写的。Turborepo 和 esbuild 是用 Go 写的。值得注意的是,Evan Wallace 离开了Figma:这可能让他有更多的时间来研究 esbuild。

在 monorepo 领域,Lerna 仍然被广泛使用,但维护得不是很好。Nx,一个有助于大幅减少构建时间的单引擎工具,一直在快速增长。其较新的竞争者 Turborepo 在被 Vercel 收购后受益于巨大的营销。

Vue 生态圈

image.png

在 Vue 3 正式发布一年后,我们看到这个生态系统正伴随着许多伟大的创新迅速发展。

新的语法,如 Vue 3 核心中的 <script setup>,将组件创作的体验提升到一个新的水平。新的 VS Code 扩展 Volar 为 Vue 带来了一流的 TypeScript 支持;以 Composition API 为基础建立的新状态管理器 Pinia 成为 Vuex 的继承者。

随着 Vite 成为 Vue 新的默认工具,Nuxt 3Quasar 和 VitePress 等元框架现在都使用 Vite 作为其默认引擎。让开发者体验有了巨大的改进,并为创新打开了许多新的大门。

社区还在调整 Vue2 到 Vue3 的开发者体验上付出了许多努力,使迁移过程更加顺利。对于 Vue 开发者来说,这是伟大的一年,他们的应用在开发者体验和性能方面都得到了巨大的改善。迫不及待想看到 2022 年即将发生什么!

React 生态圈

image.png React 18 很快就会发布,现在已经可以使用 RC 版,并从一些开箱即用的改进中获益,比如自动批处理以减少渲染或 SSR 对 Suspense 的支持

React 18 增加了期待已久的并发渲染器和对 Suspense 的更新,但没有任何重大的突破性变化。一些并发功能如 startTransition 将在 18.0 的初始版本中提供,但我们还得再等等,才能得到 JavaScript Rising Stars 的前一版中提到的服务器组件

React 继续发力于浏览器和服务端,而且在 React Native 的多平台愿景下,它正变得无处不在。

CSS in JavaScript

image.png

测试框架

image.png \

Playwright

Playwright 是一个用于 Web 测试和自动化的框架。它允许使用单个 API 测试

移动开发

image.png

桌面开发

image.png

静态网站生成器

image.png

状态管理

image.png

GraphQL

image.png

总结

为了构建现代网站和应用程序,我们似乎已经进入了元框架的时代。Next.js、Nuxt、SvelteKit......以及前景广阔的新秀 Remix

Famous members of the JavaScript community joined tech companies to work on these solutions: 许多 JavaScript 社区的知名成员加入了科技公司,从事这些解决方案的工作。

  • Kent C. Dodds 加入了 Remix 团队,并高度评价说 Remix 使他"既能创建令人惊奇的用户体验,又能快乐编程"。
  • 似乎 Vercel 雇佣了剩余所有人:作为 Svelte 创建者的 Rich Harris,来自 React 核心团队的 Sebastian Markbåge 以及可管理 monorepos 的开源解决方案(Turborepo)创始人 Jared Palmer......它看起来像一个梦之队!

关于工具,对速度的需求导致了对 Rust 和 Go 等语言的转变,而不是 JavaScript。

Lee Robinson 放出豪言:Rust 是 JavaScript 基础设施的未来,并且我们也曾多次提到 Rust 语言的崛起:

SWC 也被 Deno 所使用,该服务器端运行时是 2020 年的冠军。并且我们想说的是,Deno 仍然是一个新事物! 它不断得到增强,Deno 部署文档也已经公开:它是一个构建和部署无服务器功能的解决方案,其在 “边缘” 运行,距离用户更近。

谈到无服务器功能,边缘计算也是 2021 年的一个重要主题。我们有 Vercel Edge FunctionsCloudFlare Workers 或 Netlify Edge 等解决方案,在靠近用户的地方运行后端代码。像 Next.js 或 Remix 这样的元框架利用了边缘计算的优势,使 React 应用程序中后端代码的整合变得轻而易举。

我们将在 2022 年进入 JavaScript 全栈应用的黄金时代吗?

来源: risingstars.js.org/2021/en