2021JavaScriptRisingStars每年回顾前端开源项目，在去年Stars增加的基础上。虽然明星只是一个维度，但至少体现了人气。根据这个排名，我们可以大致分析一下前端社区的趋势。精读清单包括总表、前端框架、Node框架、构建工具、Vue生态、React生态、CSS-In-JS、测试、移动端、桌面、静态建站、状态管理、GraphQL、总13个子榜单中，这些都是前端开源最活跃的领域，下面分别介绍。总榜首位的zx，是一款基于Node语法扩展Bash支持的命令行工具，可以方便的在Node和Bash之间进行输入输出，就像Node原生支持Bash一样。解决了和Bash密不可分的痛点，但是Bash在写大块逻辑上不如Node自然。第二名vite是去年最亮的明星。它是一个具有无捆绑概念的前端构建工具。最初服务于vue，经过framework-independent升级后，在react和angular生态中大行其道。解决了webpack编译速度太慢，其他bundleless解决方案不是开箱即用，存在大量兼容性问题的痛点。2016年启动的第三名next.js项目是一个大而全的React全家桶。它的定位是各大厂都会做自己的前端集成框架，但是比较时髦，不断加入很多流行的功能比如ServerComponent。这与next.js所在的明星公司Vercel有关。这家公司挖掘了一大批知名的开源人物，包括Svelte的作者和React团队的核心成员，所以或许社区的新玩意会先在next.js中使用，然后再独立开源。给出了前端的最佳实践，解决了因为next.js本身正在成为前端趋势。不用说，第四代React是一个数据驱动、响应式编程、函数式领先的框架，改变了前端开发的效率。第五个tauri是一个比electron更轻量级的桌面应用开发框架，基于任何前端框架。解决了前端开发者在遇到桌面应用开发场景时，各平台原生开发和学习成本巨大的痛点。第六篇TailwindCSS是一个css框架，提供了大量语义化的className和许多最佳实践，让你有机会把你的css组织得井井有条。解决了前端项目css杂乱无人问津的痛点。第七款vscode宇宙级IDE，解决了不会真正用软件写代码的程序员的痛点。第八名Slidev是一个将markdown渲染成PPT的框架，基于vite+vue等技术栈开发。用它开发的PPT非常简洁美观，非常适合在公众场合分享。它不仅看起来赏心悦目，还可以在不经意间切换到Markdown源代码来修补一个小错误，展现你的极客精神。解决了原本只想展示几个字，却又不得不在PPT中展示的痛点。第九名NocoDB是一款支持多数据源的数据库UI管理工具。但其实它还有一个更大的格局，就是对标airtable，即用NocoDB连接数据库后，所有的数据可视化操作和功能都成为可能，它提供了大量的甘特图、电子表格等工作中常用的视图，和可以相互转换，最终数据实际存储在连接的数据库中，但不需要关心细节。解决了基于二维表格数据开发各种生产工具需要大量研发资源的痛点。第十名Vue与React相同。前端框架React在总榜单中排名第一。第二个Vue也在总榜单中。第三位，svelte，是一个类似于vue的框架，但是它的特点是重视编译期而忽略runtime，即runtime除了必要的逻辑之外不引入任何运行时框架。老实说，我觉得相比vue和react，在正儿八经项目中，它没有核心优势，因为它没有那种神奇的能力，可以大大减少大型项目的体积，提高性能，但会受到限制它的语法和编译时特性会产生副作用。但唯一的优点是它是框架无关的，即用svelte编译的组件几乎没有额外的运行时框架代码，可以以最低的成本和最大的隔离性与其他项目结合。第四个angular作者已经很久没有关注angular框架了，所以无法给出评价。但是从svelte比angular更受欢迎的事实来看，大部分开发者对angular的态度可能和我一样。第五个solid类似于svelte，提前编译好，按需打包。重要的是它的APIcreateEffect类似于ReactuseEffect会在依赖发生变化后重新执行，不会导致整个组件重新执行。在点对点更新上做得更极端。前端框架的亮点在于svelteandsolid的理念，即重新编译、轻运行时、更原子化的更新粒度、更直接调用浏览器原生方法带来的性能提升。很难不认为这是前端框架的新趋势，但我通过大量资料发现，这种创新带来的收益在正常项目中是微乎其微的，所以实际上，2021年的前端框架依旧没能跳出三巨头的创造。是一个新概念，以svelte和solid为代表的“静态”框架只能算是微创新。Node框架中的第一名，next.js在整体榜单中，是Node框架中最好的。第二个地方nest，和next.js很像。按照我当时的理解，是因为next.js起步慢，而且源码不支持ts，所以才有了这个比较时髦的新框架。但实际上next.js早已经改成ts了，而且正如整体榜单所说，现在已经开始引领潮流了，所以嵌套定位重叠不怪，怪next.js其后的努力。nest唯一的特点就是没有捆绑UI库。第三个地方，Strapi，服务于API场景，提供API管理后台，解决了只需要方便的API管理，不想了解庞大而全面的后台框架的痛点。第四个remix其实在定位上和next.js差不多。由react-router的作者开发，目前才开源一段时间，需要进一步观察。第五个nuxt.js是vue领域的next.js。值得一提的是，svelte还有自己的专属框架sveltekit，所以大部分Node后端框架的竞争其实都是在打全栈牌。毕竟Node的优势就是支持js语言，而当前端应用是基于某个框架来编写的时候，如果有一个Node框架可以无缝集成这个前端框架，那就更好了一个非节点框架。但是大厂几乎都是前后端分离的，所以这种全栈优势框架在国内出现的机会并不多。如果你是个人博主，使用全栈框架建站依然是首选。构建工具vite在整体榜单中排名第一，也是构建工具中的佼佼者。第二名esbuild，是用go编写的构建工具，适用范围更广。它的压缩模块是在bundle还不成熟的时候被各大builder提前集成的，vite也是基于esbuild编译的，但是vite的较高的人气说明bundleless整体方案在2021年已经成熟。是用rust写的，类似esbuild，但是因为依赖rust编译wasm的特性，所以支持在线编译，非常方便。swc也被大量的新一代构建工具用作基础设施，在精读《Rust 是 JS 基建的未来》中有提到。第四个turborepo是用go写的monorepo项目管理工具，是lerna的替代品。第五个nx也是一个monorepo管理工具。与框架不同，构建工具通常呈现套娃结构。要么你有我，要么我有你。每个流行的库都专注于解决某个关键问题，不断套娃，最终形成一个大家庭。Vue生态中排名第一的Slidev位列总榜。第二名VueElementAdmin是基于vue的管理后台。它在权限验证方面有一些最佳实践，并使用vuex来管理状态。第三名HeadlessUI，是一个完全无样式的基础组件库，支持React和Vue。官网的例子都是使用TailwindCSS的内置样式组合而成的。解决了UI组件库绑定样式后“恶心”自定义样式的痛点。第四个NaiveUI是一个Vue组件库，没有太多特别的地方，不过也算是榜上有名了。我看了一下明星趋势。2021年6月，增星量是后期的十倍。估计开源推广才刚刚开始，后面的提升会很慢。毫不奇怪，它将在明年从这份名单中消失。第五名是vue-next，也就是vue3。star数只有vue2的13%，但是今年的star增长速度是vue2的一半。Vue3也自带状态管理库pinia，生态已经很完善了。React生态next.js在总榜中排名第一。第二个AntDesign虽然立志成为西湖区最好的React组件库，但实际上已经成为了全球最好的React组件库。第三个MUI是大名鼎鼎的MaterialDesignUI组件库。我对它影响最深的是点击按钮后出现的水波纹，这是材料设计的一大特点。早在2014年创建，当时AntDesign还没有普及，是开源组件库的首选。第四个remix在Node框架列表中。和next.js一样，它是一个绑定在React生态中的Node框架，所以它也出现在了React生态中。第五个react-use是一个ReactHook小库，提供usePrevious、useDebounce等常用的Hook。看完整个React生态榜单，无论是优质生态库的数量，还是去年增加的Star数量，都优于Vue生态。这背后是没有副作用的纯函数和自动收集依赖的响应式视图之间的较量。即使在React生态中，也有mobx-react等优质的MVVM库。这两种编程范式将长期共存。CSS-In-JSNo.1vanilla-extract作为2021年的黑马，主打零运行时间和TS支持。零运行时是通过@vanilla-extract/webpack-plugin插件在编译时完成内容输出。排名第二的styled-components是最早也是最成熟的CSS-In-JS框架。虽然因为版本间运行时不兼容放弃了，但不得不说它是这个方向的鼻祖。第三名的stitches跟第一名很像，同样主打零运行时间，但是没有提到对TS是否友好。第四名Twin基于TailwindCSS实现了CSS-In-JS版本语法，可以认为是内置了一套最佳实践的CSS-In-JS库，并没有解决太多痛点，但是如果你同时喜欢TailwindCSS和CSS-In-JS，可能会喜欢这个房子并选择Twin。第五名，Emotion，也是一个比较完整的库，基本可以支持CSS-In-JS的各种语法。与传统的CSS-In-JS库相比，第一个vanilla-extract的零运行时间是这个方向的亮点和新趋势。测试第一名Playwright是一款跨浏览器、跨平台的测试框架，可以使用js代码打开任意url地址截图或对比，解决了搭建自动化测试平台和编写底层的痛点从头开始的框架。第二名，Storybook，是一个非常有名的文档工具。许多开源组件和项目文档都是基于Storybook创建的。神奇的是它还支持单元测试，当你访问UI组件时测试并打印出测试结果。Storybook已经成为一个一体化的组件开发工具。第三名Cypress和Playwright诞生的比较早，但是因为不支持多tab页面，只支持js，所以只在前端流行，但是不如支持多语言的Playwright好用，从测试工程师的角度。第四名是Puppeteer，它是谷歌在2017年推出的基于Chrome无头浏览器测试工具，但在2020年，微软的Playwright更胜一筹，具有跨浏览器的特性。第五名，Jest，是代码级单元测试工具的领导者，涵盖了整个框架。只要您想对代码进行单元测试，使用Jest就不会出错。测试框架围绕单元测试和浏览器测试两个子领域展开。2021年，跨浏览器的特性方向将出现在浏览器测试领域。单元测试领域没有太大变化。更快，这个库可能会在2022年稳定下来后大放异彩，甚至可能会因为Vite的流行而取代Jest。排名第一的移动端ReactNative是一个基于React的MobileNative开发框架。我已经用了一段时间了，但我只能说我不能期望太多，因为它极大地限制了网络语法。如果你认为自己可以轻松掌握前端知识而去使用，那肯定会让你失望。不要从一开始就抱有这种期望。另外，跨终端真的很痛苦，比如SwitchAndroid，SwitchIOS让你感受不到WriteOnce，Runeverywhere（虽然官方没这么说）。第二名Ionic，是一个跨前端框架的跨平台构建工具，解决了ReactNative不能处处Run的痛点，但也带来了不灵活的问题，即无法使用平台特有的特性.第三个Expo是基于ReactNative的一站式跨端开发工具。它的应用程序非常易于使用，并且具有内置的调试功能。第四个Quasar可以认为是ReactNative的Vue版本。第五名Flipper是一个Native应用调试工具，可以认为是ChromeDevTools的移动应用版。支持连接远程终端，解决移动端应用电脑调试难的痛点。其实还是缺少Flutter这个优秀的框架。虽然不属于前端方向，但是就像越来越多的前端脚手架是用Rust和Go写的一样，用DartforNative也是可以接受的。站在前端的角度看移动端，唯一的要求就是WriteOnce，RunAnywhere，然后提升调试体验。原生兼容性和扩展性更强，是一个完美的解决方案。说到跨端，绝对值得一提的是基于Flutter的kraken。它利用了Flutter的高层能力来执行渲染层，解决了Dart生态对前端不友好的问题。搭建了html+css+js到dart的桥接层，如果明年能在手淘大量场景稳定覆盖，一定是值得考虑的方案。总结列表比较多，就不一一总结了。如果觉得还不满意，可以去2021JavaScript新星翻看这些顶级明星项目的介绍和源码，深入了解它们。最后总结一下2021年前端领域的几个关键特征：编程语言百花齐放。未来JS开发者不等于前端开发者，因为Go、Rust、Dart、C++语言都可以服务于前端，而2021年，真正可以使用的场景非常多生产环境。不管我们接受与否，前端不会只有JS这种语言。前端开发全家桶逐渐产生技术壁垒。前几年复制一个前端全家桶很容易，过程中可以学到很多底层知识，但是现在前端全家桶的积累越来越多，涉及的越来越多fields，甚至next.js介绍的特性都会超过你自己准备的全家桶，也就是说全家桶的知识已经逐渐达到了个人知识广度的极限。如果你没有足够的精力继续学习，跟上时代步伐的最好方法就是使用成熟的全家桶。讨论地址为：精读《2021 前端新秀回顾》·第390期·dt-fe/weekly想参与讨论的请戳这里，每周都有新话题，周末或周一发布。前端精读——帮你过滤靠谱的内容。关注前端精读微信公众号
