2021 年最受欢迎 JavaScript 明星项目榜:zx、Vite 、Next.js 、React 领衔大热门(1)

简介: 2021 年最受欢迎 JavaScript 明星项目榜:zx、Vite 、Next.js 、React 领衔大热门

近日,risingstars 出炉了“2021 JavaScript Rising Stars”报告。该报告结合过去 12 个月里 GitHub 上新增的 star 数而对 2021 年 JavaScript 领域的优秀项目做了总结。

image.png

本次“2021 JavaScript Rising Stars”报告里共包括以下部分:最受欢迎项目、前端框架、Node.js 框架、构建工具、Vue 生态圈、React 生态圈、CSS in JavaScript、测试框架、移动开发、桌面开发、静态网站生成器、状态管理

GraphQL。

本次总结报告里,有不少有意思的结果,比如在“最受欢迎项目”里,此次的新 “冠军”居然是一个命令行工具。下面就是此次报告的主要部分,快一起来看看吧!

最受欢迎项目

Top10

image.png

image.png

image.png

本次年度流行项目 Top10 里最受欢迎的是 zx —— 一款由谷歌推出的全新的工具,可用于以 JavaScript 或 TypeScript 编写简单的命令行脚本。基本上它可以让你在代码中嵌入任何 bash 表达式(ls, cat, git...等任何命令),并 await 使用 JavaScript 模板字符串的结果。

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

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

排在第二位的 Vite 是一款采用 esbuild 编译器的性能优秀的构建工具。最初创建时,它仅与 Vue.js 社区相连,但现在它已经为 React、Svelte、Lit 这些主流的 UI 框架都提供了支持。

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

除了前三位,前十位里的第五名 Tauri 是一款使用 Web 技术构建桌面应用程序的解决方案。与 Electron 相比,Tauri 是用 Rust 编写的,且它不在每一个应用程序中搭载 Node.js runtime(Tauri 的 1.0 测试版刚于 5 月发布)。

除了前十位,也有一些特选项目值得讨论。比如 Astro 尽管没有进入前十名,但却是今年最值得注意的项目之一。由于采用较少的 JavaScript, Astro 也因此成为了一款加载速度更快的建站工具。

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

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

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

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

前端框架

image.png

此次报告结果中,“前端框架”一栏里的排名前五分别是:React,Vue.js,Svelte,Angular,Solid。

其中,排名第一的 React ,是“JavaScript Rising Stars "活动评选以来首次被评为头号 UI 框架的项目,但考虑到 Vue.js 被分成了两个仓库(第二和第三版本),所以实际上 Vue.js 才是第一名。

本次”前段框架“一栏排名最大的变化是 Svelte 的崛起,它超越 Angular 占据第三位。如今,已有越来越多的工具或组件将 Svelte 纳入目标框架中(如 Vite)。

此前关于“Svelte 的创造者 Rich Harris 正在加入 Next.js 背后的 Vercel 团队”的重磅新闻相信大家都有所耳闻。与 Next.js 一样,Svelte 也有自己的元框架来构建高性能的应用程序:SvelteKit。

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

值得注意的是,Solid 的出现也启发了 Mitosis,后者一个针对任何框架(React, Vue.js, Angular, Svelte...)编写和编译组件的工具。

Node.js 框架

本次榜单的“Node.js 框架”一栏里,排名前五的项目分别是 Next.js,Nest,Strapi,Remix,Nuxt。

image.png

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

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

如排在第四的 Remix 就是一款构建 React 应用的全栈框架。作为该类别中的新秀,Remix 也是今年最“有故事”的项目之一,因为它是由 React Router 的作者创建的,在 10 月之前,它只对付费支持者开放。

Remix 项目自公开以来得到了很多助力,其座右铭很明确:“Web 基础,现代用户体验”,因为它的 API 尽可能遵循 web 标准(HTTP响应,表单提交...)。

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

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

构建工具

在“构建工具”一项里,排名前五的分别为:Vite,esbuild,swc,Turborepo,Nx。

image.png

刚刚过去的 2021 年里,一些显现的趋势更进一步在发展。比如对原生 ES 模块的接纳仍在持续,而 Vite 也已被广泛采用(比 snowpack 更快),引领了一个新的工具生态系统(如 Vitest —— 一款基于 ES 的现代测试框架)。ES 模块也在 Node.js 生态系统中逐渐被接纳,TypeScript 甚至在 Node.js 中推迟了对 ES 模块的支持。

知名开发者 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 收购后受益于巨大的营销。


相关文章
|
9月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
511 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
8月前
|
JavaScript 安全 前端开发
关于Node.js,一定要学这个10+万Star项目 !!
一篇关于Node.js的宝藏项目——Node.js Best Practices。该项目在GitHub上已有102k Star,汇集了100+条最佳实践,涵盖架构、安全、性能等多方面。每条实践不仅有简明说明和详细解释,还附带代码示例及资源链接。文中通过三个实战案例(利用CPU多核、避免阻塞事件循环、使用中间件处理错误)展示了其实际应用价值,并推荐了几条对前端转Node.js开发者特别有用的最佳实践。强烈建议每位Node.js开发者学习此项目,理解“怎么做”与“为什么要这么做”,以提升开发能力。
312 3
|
10月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
394 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
10月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
551 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
10月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
458 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
10月前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
498 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
1616 4
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。
1221 4
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
339 0