2022Web 前端生态趋势——尤雨溪在稀土掘金2022开发者大会上的演讲

开发范式&底层框架

React Hooks

• 彻底取代类组件

• 启发了逻辑表达和逻辑复用的新范式：Vue组合API、Svelte3、SolidJS

React Hooks 带来的开发体验问题

React Hooks 是通过把组件的代码每一次更新都进行重复调用来模拟一些行为，导致了一些反直觉的一些限制：

• 不能条件式调用

• 过期闭包的心智负担

• 手动声明 useEffect依赖

• 如何正确使用 useEffect是个复杂的问题

• 需要 useMemo/useCallback 手动优化

React团队对改善开发体验的努力

• useEvent RFC

• useEffect 文档改进

• React Forget，通过编译时手段避免手动声明依赖

基于依赖追踪的范式重新得到重视

React	Vue	Ember	SolidJS
Recoil	组合式API	Starbean	SolidJS

这些范式的共同点：

1. 一次调用，符合原生JS直觉
2. 自动依赖追踪，无需手动声明
3. 引用稳定，无需useCallback

基于编译的响应式系统

Svelte、Vue Reactivity Transform、solid-labels

Svelte3	Vue Reactivity Transform	solid-labels

第一种方案：

• 只能在组件内使用
• 组件外需要不同的API
• 只能在顶层作用域使用，不可在函数体内使用

后面两种方案：可在组件和普通js/ts文件中使用
特点：

• 利于长期的重构和复用：逻辑可以方便的拷贝到组件外
• 底层实现的抽象泄露：需要先了解底层实现，才能去理解语法糖

基于编译的运行时优化

Svelte、Solid、Vue Vapor Mode

不同策略对生成代码量的影响

Svelte: 通过生成命令式的一个一个节点，然后把节点拼接这些 Javascript 代码,导致同等的组件源码之下 Svelte 每个组件的编译输出会更臃肿
Solid: 基于先生成一个基本的 HTML 字符串，然后在里面找到对应的 DOM 节点进行绑定

Vue Vapor Mode

输入	输出

整体思路是一次性生成静态节点，然后找到动态节点进行状态绑定。

工具链层面

原生语言在前端工具链中的使用

• 原生语言适用于用例专注且标准相对稳定的情况，否则很难榨取最大的性能优势
• 原生语言会影响可扩展性，增加社区参与门槛，影响生态发展
• JS/原生混合工具链将会成为常态

工具链的抽象层次

browserify\webpack\rollup	Parcel\Vue-CLI\create-react-app	Vite
专注于打包、抽象层次低	专注于应用、抽象层次高	CLI专注于应用，抽象层次高；API专注于支持上层框架，抽象层次中。Nuxt3、SvelteKit、Shopify、Hydrogen、Astro、Qwik、FastifyDX、Solid start、Laravel新默认前端方案

上层框架 MetaFramework

remix、nuxt、next等

JS全栈

做一些纯前端/纯后端做不到的事情，一个语言打通前后端

数据流的打通

Next	Nuxt	Remix
getStaticProps
getServerSideProps	API路由
useFetch
顶层await	loader
action
强化HTML表单

类型的前后端打通

• 通过显式引用共享类型

• 自动基于DB Schema生成类型

• Nuxt3自动基于文件布局生成API/路由类型

全栈的代价

• 数据渲染出了html，但是需要额外发送数据进行注水(hydrate)

• 即使在客户端没有交互的组件，依然会被打包发送给客户端

• hydrate影响页面交互指标 TTI

社区的探索方向：