盘点近6年最受关注的Javascript项目

这篇文章，是今年沉淀最久的一篇，从今年2月份开始构思，迟迟没发文，一直到今天。主要原因是需要花时间去整理它们，整理分类，整理Start排名，前端的生态和最前沿的技术值得关注。

身为前端从业者，关注最新技术和趋势是必须的。学不学是一回事，知不知道是另外一回事。
紧跟前端技术的更新热潮，往自己感兴趣或自己擅长的方向去“深耕”它~

说个题外话，先来接触些名词，能知道它们是啥吗？
全栈、大前端、微前端、
MidWay、Serverless、BaaS、FaaS、PaaS、Web Components、
WebAssembly、CSR、SSG、SSR、ISR、Islands Architecture、
Web3.0、Progressive Web App、Service Workers、
low Code、no Code、GraphQL…

在前端领域，会给人种感觉，好卷。
好卷是什么意思？指努力收益比下降。同行之间付出更多努力，竞争有限资源，从而导致个人“努力收益比”下降，俗称“大家都在努力，我也不得不努力”。在技术内卷的时代，是不是非要掌握上面提到的这些技术或深入学习呢？答案是未必。

上面提到的名词，说有用，也有用，说没用，也没用~想表明的是，前端体系已变得庞大且多元化，想全部掌握且精通很难，找准自己喜欢的方向，深耕一个领域，自力更生下去是完全可行的。

以前前端体系简单明了，写HTML页面、加CSS样式、用JS请求数据、加点击事件，回显到页面，一个html搞定。现在呢？尽管还是同样的流程，但实现方式却大不相同，被拆分到各个细微的点。
实现，首先需要一个脚手架来生成前端项目；脚手架需要npm或yarn安装，所以需要先装node环境，再安装好脚手架，再安装对应node_modules，运行启动项目。大致流程如下：
1.安装node环境 ->
2.安装yarn/npm/cnpm/pnpm/npx ->
3.npx create-react-app my-app ->
4.cd my-app && yarn add ->
5.yarn start启动 ->
6.创建tsx文件、在render里写HTML片段、用JS请求数据、加点击事件 ->
7.创建css文件，加CSS样式，页面渲染完成

这都是举最简单的常规化操作的例子了，如果还想更多的定制，修改 webpack 构建工具配置，作前端性能优化，作上传部署，集成各类插件运行和打包，安装预编译CSS，适配响应式方案，重置浏览器CSS默认颜色、引入喜欢的UI组件库、工具库…那么这条链子会拉的更长~

---

本篇文章主要分为四个大章：

• ①.中国国内前端大厂公司开源框架排名
  • 一、阿里排名
    • 1.Antd系：
      • antd、ant-design-pro、ant-design-mobile、ant-design-charts、pro-components
    • 2.Umi Max系：
      • umi、dumi、dvajs、qiankun、ahooks
    • 3.Node系：
      • eggjs、midway
    • 4.Ice系：
      • ice、icestark、icestore、ice pkg、appworks、apptoolkit
    • 5.其他
      • ：lowcode-engine、rax、fusion、father、formily
  • 二、百度排名：
    • amis、san、fis3
  • 三、京东排名：
    • Taro、NutUI、Taro UI
  • 四、腾讯排名：
    • wechat mini program、weui、wepy、weui-wxss、omi、westore
  • 五、有赞排名：
    • vant、vant-weapp、zent
  • 六、饿了么排名：
    • vue-element-admin、element、element-plus、vue-admin-template、mint-ui
  • 七、字节排名：
    • arco-design、arco-design-pro、arco-design-mobile、arco-design-vue、modern.js、garfish
• ②.全球前端开源框架排名
  • 一、最受欢迎项目排名：
    • Vue.js、React、Bootstrap、VS Code、React Native、Electron、D3、Node.js/Deno/Bun
  • 二、前端框架排名：
    • Vue.js、React、Angular、Svelte、Preact、Alpine.js
  • 三、Vue 生态圈排名：
    • Vue Element Admin、Elemet、Vite、Nuxt、Vuetify、Vue3、Vue-cli、Vuex、iView、Slidev、Vant、Pinia
  • 四、React 生态圈排名：
    • Create React App、Next.js、Ant Design、Material UI、Storybook、Gatsby、React Router、Docusaurus、React-Use、Ant Design Pro
  • 五、GraphQL 生态圈排名：
    • Gatsby、GraphQL Engine、Prisma、React Starter Kit、GraphQL、Directus、Apollo Client/Apollo Server、Relay、RedwoodJS
  • 六、Node.js 生态圈排名：
    • Next.js、Express、Nestjs、Strapi、Meteor、Nuxt、Koa、Fastify、Sails、Remix、RedwoodJS
  • 七、React 状态管理排名：
    • RxJs、Mobx、Zustand/Valtio/Jotai、React-Redux、Redux-Saga/Redux-Thunk、XState、Recoil、Dvajs
  • 八、CSS框架和CSS in JavaScript排名：
    • Bootstrap、Animate.css、Tailwindcss、Semantic-UI、Normalize.css、Bulma、Materialize CSS、Styled Components、Foundation CSS、PureCSS、CSS Modules
  • 九、桌面客户端开发排名：
    • Electron、Tauri、NW.js、Nativefier、Electron-Builder、NodeGUI、NeutralinoJS
  • 十、移动端开发排名：
    • React Native、Ionic、Quasar、NativeScript、Expo、Flipper
  • 十一、前端测试框架排名：
    • Puppeteer、Storybook、Playwright、Cypress、Jest
  • 十二、编译工具和CSS预处理排名：
    • TypeScript、Babel、PostCSS、Less、Sass、Stylus
  • 十三、构建工具排名：
    • Webpack、Vite、Parcel、Esbuild、Rollup、SWC
  • 十四、IDE和编辑器排名：
    • VS Code、Atom、Sublime Text、WebStorm、HBuilder
  • 十五、静态网站生成器排名：
    • Next.js、Gatsby、Nuxt、Docusaurus、Hexo、Astro、Vuepress
• ③.2016年~2021年，6年最受欢迎项目
  • 一、2016年 JavaScript 明星项目
  • 二、2017年 JavaScript 明星项目
  • 三、2018年 JavaScript 明星项目
  • 四、2019年 JavaScript 明星项目
  • 五、2020年 JavaScript 明星项目
  • 六、2021年 JavaScript 明星项目
• ④.前端未来趋势
  • 一、阿里前端职级
  • 二、前端岗位类型
  • 三、值得一学的好文章
  • 四、值得关注的新技术
    • 构建工具：Vite
    • 桌面客户端开发：Tauri
    • 编程语言：Rust
    • 全栈框架：Next.js
    • 静态站点生成器：Gatsby
    • 轻量静态网站生成器：Astro
    • 移动开发：Flutter
    • CSS框架：Tailwindcss
    • 奇葩框架：RxJS、XState

请放心，我不会细讲太多，一个东西基本一句话带过，在本文的最后，会说下自己对未来前端的思考和感悟~

---

①.中国国内前端大厂公司开源框架排名

一.阿里系

---

---

---

---

---

---

---

---

---

---

②.全球前端开源框架排名

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

③.2016年~2021年，6年最受欢迎项目

2016年 JavaScript 明星项目

---

2017年 JavaScript 明星项目

---

2018年 JavaScript 明星项目

---

2019年 JavaScript 明星项目

---

2020年 JavaScript 明星项目

---

2021年 JavaScript 明星项目

上一节的全球前端开源框架排名，我是根据以上的排名进行二次排名，算出每个项目的总Start数，再排序整理，因此花的时间特别长~

---

④.前端未来趋势

一、阿里前端职级

通过阿里对前端的要求，可以判断自己属于哪个职级的前端人员，对自己未来的规划和职业生涯都是有帮助的。对标我来说，目前算P6+，我的目标是P7，还有很多需要学习和深入的地方，P8我就不想了。

---

二、前端岗位类型

通过上图，可以判断自己工作目前从事哪方面前端、擅长哪方面，对自己未来的规划和职业生涯都是有帮助的。对标我来说，目前主要从事中后台技术、技术-前端-开发，偶尔做些前端工程化的工作，擅长跨端技术。

---

三、值得一学的好文章

在这么多新框架的时代，学习是有成本的，时间就是金钱，选择性、针对性地学习才能有所进步。好文章能帮助自己能力得到提升~

TypeScript方面：

简单学TS：TypeScript高级类型备忘录（附示例）
系统学TS：重学TS专题

---

React方面：

系统学React API：React全部api解读+基础实践大全

---

系统学React hooks API：React 全部 Hooks 使用大全

---

Webpack方面：

推荐文章：Webpack5从零搭建完整的react18+ts开发和打包环境

---

代码规范方面：

推荐文章：配置React+ts项目完整的代码及样式格式和git提交规范

---

四、值得关注的新技术

构建工具：Vite

截止目前 vite 已拥有49.3k，webpack 是62.1k，它俩开源时间分别是2017年8月和2012年3月~
vite 仅用短短5年时间，就能和10年的 webpack 相提并论？
尽管 vite 插件和生态上没有 webpack 那么多，但是后生可畏~

推荐文章：
将 React 应用迁移至 Vite、
Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架、
Vite 3.0 正式发布，下一代前端构建工具！

---

桌面客户端开发：Tauri

截止目前 tauri 已拥有54.1k，electron 是104k，它俩开源时间分布是2019年7月和2013年4月~
tauri 仅用短短3年时间，就能和9年的 electron 相提并论？
尽管 tauri出道时间不长，但凭借小巧强大的性能，和 electron 还是有的一拼~

推荐文章：
初步尝试 tauri，并且与 electron.js 对比、
扔掉 Electron，拥抱基于 Rust 开发的 Tauri、

---

编程语言：Rust

为什么我对Rust编程语言比较看好，理由有三点：
1.客户端 Tauri 由 Rust 构建
2.编译器 SWC 由 Rust 构建
3.Figma 网页由 Rust 实现

---

来个小插曲：第一次知道Rust 语言是我在阮一峰博客：《Figma 为什么赢了 Sketch》这期里面看到的。

---

Figma 是什么？Figma是一个类似 Sketch 的设计软件。

微软 2018年收购 GitHub 的价格是 75亿美元，
Adobe 2022年收购 Figma 的价格是 200亿美元。

为什么一个面向专业用户、2016年才问世的设计软件，能值这么多钱？
Sketch 是一个原生 MacOS 应用，只能在苹果电脑上安装运行，没有免费版。
Figma 则是一个 Web 应用，只要有浏览器就能用，有免费版。

你想想看，一个要用 Mac 电脑下载安装，付费才能用，另一个只要打开浏览器就能用，谁占优势不言而喻。

但是，事情没这么简单。原生应用则可以调用底层的系统 API，网页应用受限于浏览器，很多功能实现不了。所以，Sketch 功能和性能肯定强于 Figma。

Figma 怎么解决这个问题呢？答案就是 Rust 语言。虽然 Figma 是网页应用，但它不是用 JavaScript 写的，而是用 Rust 写的，再编译成浏览器能理解的 WebAssembly 字节码格式，从而达到接近原生应用的性能。一旦解决了浏览器的性能瓶颈，能够接近原生应用的体验，Figma 赢出就毫无悬念了。

近年来，大家好像有一个观念：原生应用是标配，Web 应用是选配。 很多软件明明有非常好用的 Web 版，还一定要用 Electron 去包一个桌面版，让用户下载安装。仿佛只有存在一个可以安装的桌面客户端，才感到安心。

这一次，Figma 以200亿美元被收购，证明 Web 应用并没有过时。即使不走原生应用那条路，依然有机会成功。

---

推荐文章：
一起学 Rust、
Rust 是 JavaScript 基础设施的未来（译）
用 Rust + Tauri 编写一个抖音批量下载器、
Rust Wasm 图片转 ASCII 艺术、
Rust Tauri & OpenCV 写一个桌面摄像头

---

全栈框架：Next.js

Next.js 既支持服务端渲染也支持客户端渲染~
拥有接近100k的Start数，完全值得深入学习，配合Prisma、react-query、NextAuth.js等可以轻松实现一个全栈应用。

推荐文章：
Next.js 全栈开发实战、
Next.js 应用开发实战

---

静态站点生成器：Gatsby

Gatsby 基于 React 和 GraphQL 的静态网站生成器~
想接触GraphQL，可以尝试 Gatsby，因为它绝对是最易上手使用 GraphQL 的工具之一。

推荐文章：
Next.js与Gatsby，选择哪个更合适？
Gatsby + Ant desgin + TypeScript + GraphQL 开发静态博客、
如何用Gatsby和MDX建立一个开发者博客（译）

---

轻量静态网站生成器：Astro

Astro是一个基于Islands Architecture孤岛架构的SSG静态网站生成器，拥有更少的JS、更快的加载、网络使用减少、可交互时间更快等特点。

上面是 Astro 官网和 Gatsby等其他静态网站生成器作对比，我就喜欢它的自信。

推荐文章：
Astro 1.0 正式发布，给前端带来了什么？、
Islands 架构原理和实践、
使用 Strapi + PostgreSQL + Astro 快速构建博客

---

移动开发：Flutter

我擅长React Native，但也推荐Flutter。为什么？因为它比 RN 火~
截止目前 flutter 已拥有147k，react native 是106k，它俩开源时间分布是2018年12月和2015年1月~
想用Flutter，又得学一门编程语言 Dart，所以想从 RN 换 Flutter 成本高~
国内闲鱼团队开发的APP，就是使用 Flutter + Dart 实现。

推荐文章：
再谈移动端跨平台框架 Flutter 与 React Native、
闲鱼正在悄悄放弃 Flutter 吗？

---

CSS框架：Tailwindcss

Tailwindcss 是 2017-11 开源的 CSS 框架，能帮开发者快速编写样式，目前Start数为62k，已经非常优秀了。

推荐文章：
2021 年了，你不还来试试 TailwindCSS 吗、
TailwindCSS 为什么这么好用？

---

奇葩框架：RxJS、XState

为什么说 RxJS 和 XState 是奇葩框架？让我们先看下它俩的庐山真面目：

引入其他人写 RxJS 的文章片段：

为什么使用RxJS？
我想大多数人对于RxJS可能只是停留在听过的地步，也可能是出于好奇，到谷歌搜一下什么是 RxJS ，找来找去，只找到了一个英文官网和一个停留在V7版本的中文官网。
说了这么多，还是没说什么是RxJS🐶，引用一句官网上边的话来说就是Think of RxJS as Lodash for events，额，好像连Lodash是什么都不知道😮‍💨。
恶贼，放（别）弃（放）吧（弃）。还是要回到正题，说说为什么要使用RxJS，答案其实很简单，是的，它会让你的程序变得很简单，就是这么简单。

该如何对RxJS下手？
大部分关于RxJS的介绍，可能开篇第一句就是再说RxJS的上手难受呈指数级增长，但实际真的是这样的吗？确实如此😅。那到底如何对RxJS下手呢，对的，你跟着我学就行了，循序渐进，让你慢慢的爱上如此优雅的RxJS。

最后
这篇文章只是简单说了下RxJS，但是好像又没有说。

看到这，我也很懵逼，RxJS到底是啥玩意儿？能TM解决啥问题？真正用到它的公司有多少？至今为止，我都不知道它是干嘛的。
就这么一个玩意儿，我之前在面试的时候经常被面试官问到，你之前用过RxJS吗？说说你对于RxJS的看法？（面试官想考知识广度可以，当个聊天话题还是不错，但真正作用于项目，可得仔细掂量！前端卷得厉害啊~）

推荐文章：
RxJS入门、
RxJS——给你如丝一般顺滑的编程体验

---

再来聊聊另一个奇葩框架：XState

XState 是一个基于状态机和状态图模型的状态管理库。
我就不多说了，好像是状态管理的一种新流派，叫有限状态机流派，观念较新，和rxjs一样，都比较高级。（我应该不会用，学不懂，先进的理念不懂，比较笨）

推荐文章：
与 XState 作者畅聊 JS 状态机
降低前端业务复杂度新视角：状态机范式、
一文讲通状态机 SCXML与XState对应关系

---

最近又看到一个开源项目，将这两个奇葩框架组合成一个新的状态管理库：xhook

xhook为了实现状态管理的约束以及代码逻辑的进一步抽象，基于React hook引入xstate和rxjs分别用于状态管理和逻辑代码组织，以此规避状态过度拆分导致的混乱、以及hooks使用过程中的一些心智负担。
真的妙啊，我😅~

推荐文章：
[xhook]让你的React开发体验更丝滑(基于rxjs和xstate)

---

文章最后，我想说Rust是JavaScript基础设施的未来！，因此给自己定个小目标，用 Rust 编译成 WebAssembly 来画页面~

距离这个浩如烟海的前端文化本身来说，我们都是井底之蛙，还不够，还不够，所以一定要不断的学习，不断的学习。

加油~我要去学 Rust 啦…

附上完整的思维导图方便大家下载和查看：
国内前端开源框架排名：

---

全球前端开源框架排名：

---