大家好,我是前端晚间课,现在是2022年1月份,马上就要过年了,在这里提前预祝大家新年快乐,过去的一年,javascript、css与往年一样,技术框架、技术栈依旧百花齐放,身为前端开发者,也体验'新的还没学会,就已经淘汰、更新换代'的处境,但是呢,技术还得学,工作还得干,别给自己压力,努力无悔便可。 关于CSS领域的2021年总结在前不久也发布了,但是Javascript却延迟了,但是迟到了,不代表不会来,今天我们休息一下摆脱 JavaScript学习疲劳,来看看这篇JavaScript Rising Stars第 6 版,JavaScript领域的2021年度总结。 下图比较了过去 12 个月在 GitHub 上热门项目添加的⭐数量。分析了来自Best of JS的项目,从而整理出这份与Web 平台相关的最佳项目的精选列表(均展示前十名)。 总体上最受欢迎的项目今年最流行的项目是zx,这是 Google 的一个全新命令行工具,可以用 JavaScript 或 TypeScript 编写简单的命令行脚本。 基本上,它允许你在代码中嵌入任何 bash 表达式(ls, cat, git... 任何东西!),并await使用JavaScript 模板文字作为结果。 它包括几个流行包提供的实用程序:
script.mjs文件#!/usr/bin/env zxawait $`cat package.json | grep name`let branch = await $`git branch --show-current`await $`dep deploy --branch=${branch}`await Promise.all([ $`sleep 1; echo 1`, $`sleep 2; echo 2`, $`sleep 3; echo 3`,])let name = 'foo bar'await $`mkdir /tmp/${name}` 运行
哇,排名第一竟然是命令行工具,不过这样的命令行工具确实让人眼前一亮,我赶紧去按个star。 Vite排名第二,我觉得是实至名归,用过的人,我觉得第一感受就是快,而且用户体验、使用手册都是延续Vue文档的一贯风格。 Next.js、React也是名列第三第四,Next.js,是为你提供生产环境所需的所有功能以及最佳的开发体验:包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置,据说引入swc后,速度更是吊打babel。 第五名,Tauri是一种使用 Web 技术构建桌面应用程序的解决方案。 与Electron相比,它是用 Rust 编写的,并且不会随每个应用程序附带 Node.js 运行时。1.0版在 5 月发布了测试版。 Vue排名第十,但Angular已经没出现在十名内了。 令我比较感兴趣的是Tailwind CSS和Astro。 之前写过一篇关于Tailwind CSS的介绍,《一次就能看懂的Tailwind CSS介绍》,Tailwind CSS 是一个利用公用程序类(Utilize Class,下文皆称Utilize Class)的 CSS 框架,预构建css,本人挺好奇它未来的发展,这里排第六,说明热度相当可以。 Astro没有出现在上图排名榜,但Astro是今年最引人注目的项目之一。Astro 是一种构建加载速度更快的网站的工具,因为它们发布的 JavaScript 更少。 这个概念接近于静态站点生成 (SSG),但主要区别在于Astro支持在页面中使用动态交互内容。 可以应用不同的策略在客户端渲染动态组件:
没有进前十名的还有许多引人注目的项目,如swc、Deno、Remix、esbuild、Svelte... 前端框架这里可能比较陌生的就是Svelte、Solid了, Svelte之前也有转发过一篇文章《Svelte 原理浅析与评测》,Svelte 是一个构建 web 应用程序的工具,与 React 和 Vue 等 JavaScript 框架类似,有一个关键的区别:Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用,而不是在 运行阶段 解释应用程序的代码。这里最大的变化是Svelte的崛起,它在Angular之前排名第三。 排名第五的是Solid,是React的替代工具之一。其组件采用JSX编写,但与React不同的是,Solid并不依赖虚拟DOM。 node.js框架主要的 UI 框架都有自己的“元框架”来构建现代和可扩展的应用程序,提供路由、服务器端渲染、提前静态生成页面、为生产优化构建等功能......
Remix,这个我是在2021年尾声才了解到还有怎么一个框架的,是一个全栈 Web 框架,可让你专注于用户界面,并通过 Web 基础知识来提供快速、流畅和弹性的用户体验。 除了这些元框架之外,Nest是更传统的服务器端 Node.js 框架的领导者,不依赖于任何 UI 库。 最后,Strapi是“无头 CMS”的领导者。 构建工具越来越多人开始采用原生ES模块。Vite得到广泛采用(其发展速度比snowpack更快),因而催生出新的工具生态系统(例如基于ES的现代测试框架Vitest)。Node.js生态圈中也开始采用ES模块,但难度要更大。TypeScript甚至推迟了对Node.js中ES模块的支持。 出于性能的考虑,越来越多的前端工具采用其他语言进行开发。 Lee Robinson认为,Rust是JavaScript基础设施的未来(之前转发这样的一篇文章,同时也发布了一篇关于Rust的简单实践文章,WebAssembly Rust应用于React 组件)。Rust有着良好的性能,同时与JavaScript的互操作性较强。NAPI-RS可让JavaScript和Rust进行交互。 而Next.js则非常看好swc的发展,作为一个可扩展的Rust编译器,swc可将Babel插件移植到Rust上。 Rust是最受欢迎的的非JS语言,但它并不是唯一的语言。Bun采用的是Zig,而Turborepo和esbuild均采用的是Go。 在monorepo(单体仓库设计)中广泛采用的仍然是Lerna,之前也有对这个单体仓库设计介绍(《基于 lerna 实现 Monorepo 项目管理》)。 Vue 生态系统Vue 3 正式发布一年后,我们看到生态系统正在迅速发展,并带来了许多伟大的创新。 像<script setup>Vue 3 核心中的新语法将组件创作体验提升到一个新的水平。新的VS Code 扩展Volar为 Vue 带来了一流的 TypeScript 支持;一个新的状态管理器Pinia,它是基于新的Composition API 构建的,成为 Vuex 的继承者。 随着Vite成为 Vue 的新默认工具,Nuxt 3、Quasar和VitePress等元框架现在使用 Vite作为其默认引擎。提供巨大的开发人员体验改进并为创新打开许多新大门。 社区还为使 Vue 2 的 DX 与 Vue 3 保持一致,并使迁移过程更加顺畅方面付出了很多努力。对于 Vue 开发人员来说,这是伟大的一年,他们的 DX 和应用程序的性能都得到了巨大的改进。很高兴看到 2022 年即将发生的事情! React 生态系统React 18 应该很快就会发布,但它已经可以使用RC 版本并受益于一些开箱即用的改进,例如自动批处理以减少渲染或对 Suspense 的 SSR 支持。 React 18 向Suspense添加了期待已久的并发渲染器和更新,而没有任何重大的重大更改。一些并发的功能,如startTransition将在18.0最初的版本可用,但我们将不得不等待多一点,以获得服务器组件中所提到的前一版的JavaScript的新星。 React 在浏览器和服务端都在不断进步,随着React Native 的多平台愿景,它变得越来越无处不在。 之前也阅读《React技术揭秘》这本小册,把里面对React源码的解析以流程图方式表达出来,这种方式也让我对React源码有个更深的理解。画流程图学React17源码 - 掘金 CSS in Javascript测试移动端桌面应用静态站点状态管理GraphQL寄语希望2022年对我们好一些,别再出一些新框架让我们学习了,学不动了,哈哈! 参考资料2021 JavaScript Rising Stars |
|