尤雨溪主题演讲《2022 前端生态趋势》

甘草倚半夏
511 阅读5分钟

image.png

名词解释：

Svelte www.sveltejs.cn/

Svelte 将需要在浏览器中做大量的工作放到构建应用程序的编译阶段来处理。 摒弃了虚拟（virtual）DOM

SolidJS learnsolid.cn/

摒弃 虚拟DOM，跟 Svelte 一样走编译型路线的框架；整合了前端界响应式的诸多最佳实践，保证更新颗粒度非常小，性能爆表

Qwik qwikcn.netlify.app/docs/overvi…

Qwik的特点是应用不需要hydration

不需要把需要的数据再发一份,而是把需要的数据嵌入到html中从而使客户端的js能直接从html中获得所需要的数据

甚至可以跳过需要执行的js步骤直接跳到完成的状态

react forget

是一个编译时的优化工具，把用户的代码预先分析避免运行时需要手动声明依赖，可以自动useMemo优化性能

useMome、useCallback

useMome、useCallback用法都差不多，会在其依赖的变量发生改变时执行

并且这两个hooks都返回缓存的值，useMemo返回缓存的变量，useCallback返回缓存的函数

Next.js www.nextjs.cn/

提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。

nuxt www.nuxtjs.cn/

是一个基于Vue.js 的轻量级应用框架，可用来创建服务端渲染(SSR) 应用，也可充当静态站点引擎生成静态站点应用，具有优雅的代码结构分层和热加载等特性。

remix remix.run/

由 React Router 的团队研发的一个基于 React 的框架，相对于其他的框架，这个框架的一个特点就是专注于 “嵌套路由” 这个概念，允许组件直接与其他页面相连接，简化代码的编写

Hydration 注水

主要运用于服务端渲染 是一种向服务器呈现的 HTML 添加交互性的技术。就是一种技术不是框架，客户端 JavaScript 通过将事件处理程序附加到 HTML 元素，将静态 HTML 网页转换为动态网页。

VitePress process1024.github.io/vitepress/

从 VuePress 改进的，特别适合写博客网站，技术文档，面试题网站 可以在 Markdown 使用Vue 组件，VitePress 在应用优化的同时编译器会自动进行静态/动态分离

一、开发范式&底层框架

1、React Hooks

打开了一个新的范式的时代，同时React Hooks存在的一些问题，react团队也开始解决这些问题，在react体系之外开始有一些具有同等的逻辑组合能力同时避免React Hooks这些问题的方案

（1）改变了开发方式，启发了很多新的开发范式

image.png solidjs 语法上像react，实现上更像vue

（2）React Hooks的开发体验问题

image.png

React Hooks通过把组件的代码每一次更新都重复调用来模拟一些行为 不传正确的依赖数组，会 产生过期闭包

（3）React团队在努力的改善开发体验

react forget：是一个编译时的优化工具，把用户的代码预先分析避免运行时需要手动声明依赖

image.png

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

image.png

solid

image.png

vue composition  api

image.png

Ember  starbeam

image.png

依赖追踪的共同点

组件代码只调用一次，不用考虑重复调用问题 因为只调用一次，所以声明的所有函数是固定的引用，组件的更新会更精确，性能会更好 image.png

3、基于编译的响应式方案

image.png

svelte3 ($)

跟组件的上下文强绑定 函数体内没办法把函数内的变量声明变成响应式的 image.png

image.png

vue reactivity transform ($ref)

$ref： 不是真实存在的，是编译时的一个提示，编译后就相当于一个普通的js变量 可以在普通的js/ts文件中使用，不限制于vue文件 image.png

solid-labels

可以再普通的js/ts文件中使用 image.png

vue reactivity transform、solid-labels 是统一模型

不受限于组件上下文，显示声明响应式变量

image.png

4、基于编译的运行时优化

image.png

代码生成策略

svelte： 生成 命令式的节点 然后把节点拼接的js代码

solid：先生成html字符串，再找到对应的dom节点进行绑定

同等组件源码 svelte的编译输出会更臃肿

image.png

image.png

vue vapor mode： 一次性生成静态结构节点，命令式的找到动态节点然后和状态进行绑定

image.png image.png

image.png

二、工具链

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

原生语言不适合动态的变化的不确定的用例，提高了贡献门槛，js+原生 混合更有优势 image.png

image.png

2、工具链的抽象层次

专注于打包的需要很多配置 专注于应用的是帮你配置好了开箱即用 image.png vite 分为cli和api，cli开箱即用、api作为底层工具链支撑上层框架Meta Framework

image.png

三、上层框架Meta Framework

1、js全栈的意义是什么

一个语言,“前后”打通（BFF）

2、数据的前后端打通

next：通过运行在服务端的函数，在一个组件文件中把整个从后到前的打通

remix：loader、action运用于后端，通过强化前端的html form的能力能和loader、action对应起来，来打通前后端数据流

image.png

3、类型的前后端打通

image.png

4、JS全栈的代价

虽然渲染过了但是需要把数据发到前端才能实现前端的交互 image.png 解决：

image.png

server-onlyComponents：必须要全栈框架才能做的概念，不是react独有的

partial hydration： 局部注水，只对需要的地方进行注水

fine-grained+resumable：细粒度懒加载+持续性注水；Qwik的特点是不需要把需要的数据再发一份而是把需要的数据嵌入到html中从而使客户端的js能直接从html中获得所需要的数据，甚至可以跳过需要执行的js步骤直接跳到完成的状态

vitePress：在页面的核心内容是markdown文件的情况下，外部的内容ui是动态的，在内部静态中进行局部注水

avatar
文章
阅读
粉丝