前端趋势 2022

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建有江西|湖南|湖北籍前端群,可加我微信进群。


或者叫「2022 前端回顾」。看到尤大下周(2022.7.22)会分享《前端趋势 2022》,手痒也想写一篇。于是重新翻了一遍这半年的 MDH 前端周刊,来看看这半年的趋势。希望借这篇文章,让大家快速了解这半年前端的发展,同时有一些对于未来的基本判断。

1、原生语言已成为 JS 工具链重要组成部分。 犹记得好久以前有人发过一个投票,你会选 JavaScript Tool 还是 Native Code Tool?这其实是在速度和上手门槛之间做选择。这么久过去,开发者已经用脚投票。现在社区有大量基于 Native Code 实现的 JavaScript 工具和框架,比如 Deno(Rust)、Bun(Zig)、Rome Formatter(Rust)、esbuild(go)、swc(Rust)、Parcel CSS(Rust),比如 kdy 之前画的 tsc 的大饼(go),以及像 Next、Vite、Nuxt、Umi 等上层框架和工具也都有大量原生语言工具的应用。

2、Tauri['tɔ:rai] 尝试代替 Electron。 「Electron is easy, but slow and bloated.」Electron 虽然易上手,但问题是大和慢,去年 1Password 8 就因为切换到 Electron 被骂地不行。Tauri 可以解这个问题,满足大家「既要用 JavaScript 开发,又要产品性能」的需求,基于 Rust,近期有发布 1.0。

3、Islands 架构发展迅猛。 Islands 架构最早由 preact 作者于 2020.8.11 提出,解页面性能问题,包括 SSR 全栈框架下「重复数据、JS 尺寸大、注水消耗大」的问题。其特点是「More HTML,Less JavaScript」,默认全部 HTML,然后在轮播、搜索补全、购买按钮等需要交互的地方加上少量 JavaScript。低碳、节电,哈哈。社区已有很多实践,前有 astro、qwik、基于 svelte 的 elderjs 等,后有基于 deno 的 Fresh,都是对于 Islands 架构的实践。看到 Fresh 之后,个人感觉方案已逐渐成熟,可尝试用于生产。

4、数据流从纯客户端发展到全栈。 纯客户端数据流包括 Redux、MobX、Dva、Jotai、Recoil、Valtio、Zustand 等,基本都是「View > Action > State」单向数据流,跑在客户端。而很多应用实际上还有持久化数据和同步数据的需求,所以在这个单向数据流之外,还会有个和服务端交互的数据流。Remix 把这个数据流扩展到了全栈,通过获取数据的 loader 和修改数据的 action,形成「Loader > Component > Action」的全栈数据流。同时 React Query、SWR、RTK Query 和 useRequest 也可以理解为广义上的全栈数据流,处理服务端和客户端之间的数据同步。

5、Storybook 竞品来势汹汹。 包括支持 React 的 Ladle 和支持 Vue 的 Histoire,他们的特点都是快。同时,Storybook 虽然一直在尝试提升编译速度,包括支持 vite、支持 webpack 的 lazy compilation 等。

6、CSS 动作频频。 比如 CSS Toggle 让 Toggle 场景不再需要 JavaScript,比如 :has 选择器让 CSS 终于有了向上选择的父选择器,比如 CSS Variable 2 提案最近也已在进行中,再比如 Defensive CSS 可以让你的应用更加健壮。

7、Headless 组件风头正盛。 很多人会无脑选择 UI 框架,但如果业务复杂或者有自己的设计需求时,可能会针对框架做很多 hack;又或者 80% 的场景下很节省时间,遇到 20% 的需求不符的场景时,反而会花更多的时间去解。所以,最近 Headless 组件逐渐被大家接受,他们包含完整功能,但把设计部分留给开发者处理。比如 Reach UI、Headless UI、Radix UI、Downshift、React ARIA、Reakit、Ariakit、React Table 等都是,以及有基础样式的 Chakra UI 也算。结合 Tailwind CSS 快速打造符合自己设计系统的 UI 库。

8、React 一如既往的稳。 React 18 终于正式发布;同时 React 官方正尝试通过 useEvent 来修复 hooks 带来的一些问题。

9、文档工具有新秀。 比如 Prisma 作者出的 Contentlayer,通用方案,可以和任意框架对接;还有 Stripe 团队出的 Markdoc 也令人眼前一亮,其引入一种新的 markdown 编写方式,可以和任意语言结合使用。此外值得一提的是,MDX 也有发布他的 2.0 版本。

9713b2cd51e48e66fddb951bab7f9dda.gif

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经坚持写了8年,点击查看年度总结。
同时,最近组织了源码共读活动,帮助4000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。

前端趋势 2022_第1张图片

扫码加我微信 lxchuan12、拉你进源码共读

今日话题

目前建有江西|湖南|湖北 籍 前端群,想进群的可以加我微信 lxchuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持

你可能感兴趣的:(java,编程语言,人工智能,javascript,大数据)