共计 6024 个字符，预计需要花费 16 分钟才能阅读完成。
2021 JavaScript Rising Stars 每年都会对前端开源我的项目进行点评，其根据是去年 Star 的增幅。Star 尽管只是一个维度，但至多反馈了风行度，依据这个排行榜能够大体剖析出前端社区的趋势。
精读
该榜单蕴含整体榜单、前端框架、Node 框架、构建工具、Vue 生态、React 生态、CSS-In-JS、测试、挪动端、桌面、动态建站、状态治理、GraphQL 共 13 个子榜单，都是前端开源最沉闷的几个畛域，上面别离介绍。
整体榜单
第一名 zx 是一个命令行工具，它基于 Node 语法拓展了 Bash 反对，能够十分不便的进行 Node 与 Bash 之间的输入输出，就像 Node 原生就反对 Bash 一样。它解决了离不开 Bash，但 Bash 写起大段逻辑不如 Node 天然的痛点。
第二名 vite 是去年最闪耀的星，它是一个 bundless 概念的前端构建工具，最后服务与 vue，起初进行框架无关降级后，在 react、angular 生态都大受欢迎。它解决了 webpack 编译太慢，其余 bundless 计划不够开箱即用且存在大量兼容问题的痛点。
第三名 next.js 2016 年开始的我的项目，是一个大而全的 React 全家桶，定位就是各大厂都会本人做一套的前端一体化框架，但它更时尚，一直退出许多风行性能比方 Server Component。这和 next.js 所在的明星公司 Vercel 无关，这家公司挖了大量开源出名人物，包含 Svelte 作者与 React 团队核心成员，所以兴许将来社区的新玩具会先用在 next.js 再独立开源。它给出了前端最佳实际，并解决了没有精力继续给我的项目进行全方位优化，或追赶不上潮流的问题，因为 next.js 自身正在成为前端潮流的发源地。
第四名 react 不必多说了，数据驱动、响应式编程、函数式的领军框架，它扭转了前端开发效率。
第五名 tauri 比 electron 更轻量的桌面利用开发框架，基于任何前端框架。它解决了前端开发者遇到桌面利用开发场景时各平台微小的原生开发学习老本的痛点。
第六名 Tailwind CSS 是 css 框架，它提供了大量语义化 className，提供了许多最佳实际，让你有机会把 css 打理的颠三倒四。它解决了前端我的项目 css 横七竖八又没有人真的在意的痛点。
第七名 vscode 宇宙级 IDE，它解决了程序员没有真正趁手软件写代码的痛点。
第八名 Slidev 是一个把 markdown 渲染成 PPT 的框架，基于 vite + vue 等技术栈开发。用它开发的 PPT 十分简洁好看，非常适合在公开场合分享时应用，不仅看起来赏心悦目，还能够不经意间切换到 Markdown 源码 hotfix 一下小谬误，展现出你的极客精力。它解决了你真的只想展现几句话，但又要以 PPT 形式 show 进去的痛点。
第九名 NocoDB 是一个反对多种数据源的数据库 UI 管理工具。但其实它有更大的格局，即对标 airtable，即用 NocoDB 连贯数据库后，所有数据可视化的操作与性能都成为了可能，且提供了大量工作罕用的甘特图、电子表格等视图，并可相互转换，最终其实数据存储到连贯的数据库，但你无需关怀细节。它解决了基于二维表格数据开发各类生产工具需投入大量研发资源的痛点。
第十名 Vue 和 React 一样不多说了。
前端框架
第一名 react 在整体榜单里了。
第二名 Vue 也在整体榜单里了。
第三名 svelte 是一个相似 vue 的框架，但特色是极度器重编译时，而疏忽运行时，即运行时除了必要逻辑外是齐全不引入任何 runtime 框架的。说实话我感觉和 vue、react 相比在正儿八经我的项目中并没有外围劣势，因为它并没有那种魔法能力，能够极大的缩小大型项目体积与晋升性能，反而会受制于其语法与编译时的个性产生副作用。但惟一一个益处是框架无关，即利用 svelte 编译的组件简直没有额定运行时框架代码，能够最低老本，最大隔离性的与其余我的项目联合。
第四名 angular 笔者曾经很久没有关注 angular 框架了，无奈给出什么点评。但从 svelte 新增热度超过 angular 来看，可能大部分开发者对 angular 的态度和我一样。
第五名 solid 相似 svelte，提前编译，按需打包，重要的是，其相似 React useEffect 的 API createEffect 在依赖变动后，仅该函数会从新执行，而不会导致整个组件从新执行，在点对点更新上做得更极致。
前端框架的亮点是 svelte 与 solid 的概念，即重编译时，轻运行时，更加原子化的更新粒度，与更间接的调用原生浏览器办法带来性能晋升。很难不让人感觉这是一个前端框架新趋势，但我翻了不少材料发现，这种翻新带来的收益在失常我的项目里微不足道，所以实际上 2021 年前端框架还是没能跳出三巨头发明新的概念，而以 svelte 与 solid 为代表的“动态化”框架只能算微翻新。
Node 框架
第一名 next.js 在整体榜单里了，在 Node 框架一骑绝尘。
第二名 nest 和 next.js 很像，据我过后的理解，是因为 next.js 起步较慢，源码还不反对 ts，所以就有了这个更时尚的新框架。但实际上 next.js 早就全副改为 ts 了，而且正如整体榜单所说，当初曾经开始引领潮流了，所以不怪 nest 定位重合，只能怪 next.js 后续发力太猛了。nest 的惟一特点就是没有绑定 UI 库。
第三名 Strapi 专门为 API 场景服务，提供了一个 API 治理后盾，解决了只须要一个便捷 API 治理，而不心愿理解一个大而全的后端框架的痛点。
第四名 remix 其实和 next.js 定位差不多，由 react-router 作者开发，才开源不久，须要进一步察看。
第五名 nuxt.js 是 vue 畛域的 next.js。
值得一提的是，svelte 也有本人的专属框架 sveltekit，所以 Node 后端框架之争大部分其实在打全栈的牌，毕竟 Node 的劣势就是反对 js 语言，而以后端利用基于某个框架编写时，如果有一个 Node 框架能够无缝集成这个前端框架，它就比非 Node 框架更优。
不过大厂简直都是前后端拆散的，所以这种全栈劣势框架在国内没有太多出场机会，如果你是一个集体博主，还是首推应用全栈框架建站。
构建工具
第一名 vite 在整体榜单里了，在构建工具里也是一骑绝尘。
第二名 esbuild 是用 go 编写的构建工具，实用应用范畴更广，其压缩模块在 bundless 还未成熟时就被各大构建全家桶提前集成了，而 vite 也是基于 esbuild 进行编译的，但 vite 的炽热度更高，阐明了整体 bundless 计划已在 2021 年成熟了。
第三名 swc 因采纳 rust 编写而出名，相似 esbuild，但因为依靠 rust 编译到 wasm 的个性，反对了在线编译器，十分不便。swc 还被大量新生代构建工具作为基建，这在 精读《Rust 是 JS 基建的将来》时提到过。
第四名 turborepo 是用 go 写的 monorepo 项目管理工具，是 lerna 的替代品。
第五名 nx 也是一个 monorepo 管理工具。
与框架不同，构建工具往往出现套娃构造，不是你中有我，就是我中有你，每个热门库都重点解决某一块关键问题，一直套娃套娃，最初套成一个很棒的全家桶。
Vue 生态
第一名 Slidev 在整体榜单里了。
第二名 Vue Element Admin 基于 vue 的治理后盾，在权限验证有一些最佳实际，应用 vuex 治理状态。
第三名 Headless UI 是一个齐全无款式的根底组件库，反对 React 与 Vue，官网的例子都是利用 Tailwind CSS 内置款式组合而成的。它解决了 UI 组件库绑定款式后，自定义款式“实际上十分恶心”的痛点。
第四名 Naive UI 是一个 Vue 组件库，没有太多特别之处，但居然上了排行榜。看了一下 star 趋势，在 2021.6 月份 star 涨幅是之后的十倍，预计刚开源推广了一波，后续涨幅很慢了，不出意外明年会跌出这个榜单。
第五名 vue-next 即 vue3，star 数量只有 vue2 的 13%，但往年 star 增幅有 vue2 的一半。
vue3 还自带了状态治理库 pinia，其生态曾经十分齐备。
React 生态
第一名 next.js 在整体榜单里了。
第二名 Ant Design 尽管立志成为西湖区最好的 React 组件库，但事实上曾经成为了寰球最好的 React 组件库。
第三名 MUI 就是赫赫有名的 material design UI 组件库，我对它影响最深的是按钮点击后呈现的水波纹，这是 material design 的一大特色。早在 2014 年就创立了，在 Ant Design 没火的时候，是开源组件库首选。
第四名 remix 在 Node 框架榜单里了，和 next.js 一样，是绑定了 React 生态的 Node 框架，所以也呈现在 React 生态中。
第五名 react-use 是很玲珑的 React Hook 库，提供了如 usePrevious、useDebounce 等罕用的 Hook。
看残缺个 React 生态榜单，无论是优质生态库数量，还是去年增长的 Star 数，都比 Vue 生态更胜一筹。这背地是无副作用的纯函数与主动依赖收集的响应式视图之争，甚至在 React 生态里也有比方 mobx-react 等优质 MVVM 库，这两种编程范式都会长期并存。
CSS-In-JS
第一名 vanilla-extract 作为 2021 年的黑马，主打零运行时与 TS 反对。零运行时是通过 @vanilla-extract/webpack-plugin 插件在编译时就实现内容输入。
第二名 styled-components 是推出最早，也最成熟的一个 CSS-In-JS 框架，尽管版本间呈现过运行时不兼容让我放弃过，但不得不说是这个方向的鼻祖。
第三名 stitches 和第一名很像，也主打零运行时，不过没有提对 TS 是否敌对。
第四名 Twin 基于 Tailwind CSS 实现了 CSS-In-JS 版的语法，能够认为是内置了一套最佳实际的 CSS-In-JS 库，也没解决太大的痛点，只是如果你同时喜爱 Tailwind CSS 与 CSS-In-JS，可能会爱屋及乌的抉择 Twin。
第五名 Emotion 也是一个绝对齐备的库，基本上 CSS-In-JS 各类语法都能反对。
相比传统 CSS-In-JS 库，第一名 vanilla-extract 的零运行时是一大亮点，是这个方向的新趋势。
测试
第一名 Playwright 是一个跨浏览器跨平台的测试框架，能够利用 js 代码关上任意 url 地址截图或者比照，解决了搭建自动化测试平台须要从零开始编写底层框架的痛点。
第二名 Storybook 是十分有名的文档工具，很多开源组件、我的项目的文档都基于 Storybook 创立。神奇的是它还反对单元测试，在你拜访 UI 组件时进行测试并打印出测试后果。Storybook 曾经变成了一个 all-in-one 的组件开发工具。
第三名 Cypress 与 Playwright 且诞生比拟早，但因为不反对多 tab 页面，且仅反对 js，所以仅在前端风行，在测试工程师角度却不如反对多语言的 Playwright 好用。
第四名 Puppeteer 是 2017 年谷歌推出基于 Chrome 无头浏览器的测试工具，但 2020 年微软的 Playwright 具备跨浏览器个性还是更胜一筹。
第五名 Jest 是代码级别单测工具的佼佼者，笼罩了全框架，只有你想对代码进行单元测试，选 Jest 是不会错的。
测试框架围绕单测与浏览器测试这两个子畛域，2021 年在浏览器测试畛域呈现了跨浏览器这个特色方向，在单测畛域没有太大变动，顶多出了一个 Vitest 让单测跑得更快，这个库在 2022 年稳固后可能会大放异彩，甚至可能因为 Vite 风行的起因取代 Jest。
挪动端
第一名 ReactNative 是基于 React 的 Mobile Native 开发框架，笔者用过一段时间，只能说不能抱有太大期待，因为极大的局限了 web 语法，如果你感觉仅把握前端常识就能够轻松应用，那么肯定会让你悲观，不要一开始就抱着这种期待。另外跨端真是十分痛，比方 SwitchAndroid、SwitchIOS 让你感触不到 Write Once, Run everywhere（尽管官网也没这么说）。
第二名 Ionic 是一个跨前端框架的跨平台构建工具，解决了 ReactNative 无奈 Run everywhere 的痛点，但也带来了不够灵便的问题，即无奈应用平台特定个性。
第三名 Expo 是基于 ReactNative 的一站式跨端开发工具，它的 App 应用十分傻瓜化，并且内置了调试能力，能够说是把 ReactNative 要踩的坑帮你踩完了。
第四名 Quasar 能够认为是 Vue 版的 ReactNative。
第五名 Flipper 是一个 Native 利用调试工具，能够认为是手机利用版本的 Chrome DevTools，反对连贯近程终端，解决了手机利用难以用电脑调试的痛点。
其实还少了 Flutter 这个优良框架，尽管不属于前端方向，但就像前端脚手架越来越多用 Rust、Go 写一样，Native 用 Dart 也是能够承受的。
从前端角度看挪动端，惟一需要就是 Write Once，Run Anywhere，而后再把调试体验做好一些，Native 的兼容性、拓展性做强一些，就是一个完满计划了。
说到跨端，基于 Flutter 的 kraken 也相对值得一提，它利用 Flutter 高一执行渲染层能力，并解决了 Dart 生态对前端不敌对的问题，做了一个 html+css+js 到 dart 的桥接层，如果明年能够在手淘稳固笼罩大量场景，那肯定是个值得思考的计划。
总结
还有更多榜单就不一一总结了，如果感觉不过瘾，能够去 2021 JavaScript Rising Stars 翻翻这些 top star 我的项目的介绍和源码深刻理解一下。
最初总结一下 2021 前端畛域的几个要害特色：
- 编程语言全面开花。当前 JS 开发者不等于前端开发者了，因为 Go、Rust、Dart、C++ 语言都能够为前端服务，并且 2021 年是真的有不少场景做到了生产环境可用，不管咱们接不承受，前端不止有 JS 一种语言了。
- 前端开发全家桶逐步产生技术壁垒。在前几年，抄一个前端全家桶很容易，在过程中还能够学到很多底层常识，但当初前端全家桶的积攒越来越多，波及的畛域越来越广，甚至 next.js 引入的个性会超过你本人调制的全家桶，这阐明全家桶的常识量曾经逐步达到集体常识广度的极限，如果你没有足够精力继续学习，跟进时代步调的最好形式是应用一个成熟的全家桶。
探讨地址是：精读《2021 前端新秀回顾》· Issue #390 · dt-fe/weekly
如果你想参加探讨，请 点击这里，每周都有新的主题，周末或周一公布。前端精读 – 帮你筛选靠谱的内容。
关注 前端精读微信公众号
<img width=200 src=”https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg”>
版权申明：自在转载 - 非商用 - 非衍生 - 放弃署名（创意共享 3.0 许可证）
