尤雨溪对未来前端趋势分享: 笔记

97,196

早上参加稀土掘金大会随手记下的。能力有限,欢迎勘误。

🔥 大家好我是然叔一个41岁的程序员老兵,

我会不断分享我学习的心得

内附然叔优秀作品汇总链接

建议收藏

image.png

链接在此 建议点赞赞收藏 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

41岁的程序员的”毕业“走向自由职业

Snip20220722_43.png

一、 开发范式&底层框架

1、React Hooks 带来的开发范式的变革

Snip20220722_64.png image.png

  • React Hooks 取代 Class Components
  • 启发组件逻辑表达和逻辑复用的新范式
    • Vue3: Composition API
    • Svelte3: 编译后逻辑受到了React Hooks启发
    • SolidJS: Hooks语法相似 + 实现与CompositionAPI相似的写法

image.png

React Hooks的开发体验被逐渐正视

  • Hooks 执行原理和原生JS心智模型的差异
  • 不能条件式调用
  • Stale Closure(过期闭包)的心智负担
  • 必须手动声明 useEffect 依赖
  • 如何”正确“使用 useEffect 是个复杂的问题
  • 需要 useMemo / useCallback 等手动优化

image.png

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

  • useEventRFC 改善useCallback的问题
  • Dan Abranmov 话单量时间改进新版 useEffect 文档
  • 黄玄正在开发中的 React Forget 已在避免需要手动声明依赖

image.png

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

  • SolidJS 符合直觉无需声明依赖

image.png

  • Vue Composition API ref追踪依赖

image.png

  • Ember Starbeam Cell追踪依赖 image.png

基于依赖追踪的范式 - 共同点

  • 一次调用,符合原生JS直觉
  • 自动追踪依赖,无需手动声明
  • 引用稳定,无需useCallback

3. 基于编译的响应式系统

基于编译时优化改善开发体验

  • Sevlte 【$】副作用黑魔法 image.png

简洁代码带来的限制

image.png

  • 只能在Svelet组件内使用

  • 组件外需要不同的API

  • 只能在顶层作用域使用

  • Vue Reactivity Transform 响应式转换

编译时宏 $ref

image.png

  • solid labels

类似于 Vue Reactivity Transform
image.png

统一模型的优势和代价

  • ✅ 利于长期的重构和复用
  • 😭 底层实现的抽象泄漏
  • 😭 初期学习成本

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

image.png

  • Svelte - 通过命令节点拼接JS代码
  • Solid - 基本HTML字符串 -> Dom节点绑定
  • Vue Vapor Mode - 与 Solid

Vue Vapor Mode

SFC单文件输出

image.png

类 Solid 输出

image.png

  • 一次性生成静态节点
  • 找到动态节点进行状态绑定

二、工具链

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

image.png

工具链原生语言参与比例提高

  • esbuild (Go)
  • SWC (Rust)
  • Vite (JS / GoHybrid Via ESBuild)
  • napi-rs (Rust)
  • Parcel2 (JS/Rust hybird)
  • Bun (Zig)

趋势分析

image.png

JS 与 原生语言混合成为趋势

2. 工具链的抽象层次

  • browserfy/webpack/rollup - 专注打包、抽象层次低
  • Parcel/Vue-CLI/CRA - 专注抽象层次
  • Vite - CLI专注于应用、API专注于支持上层框架、抽象层次高

3、 基于Vite的上层框架

image.png

四、上层框架Meta Framworks

1. JS全栈的意义

常用的全栈框架

BFF 一个语言打通前后端

2. 数据打通

image.png

3. 类型打通

image.png

  • 通过显示引入共享类型
  • 基于DB schema 生成类型
  • Nuxt3 自动基于文件布局生成API/路由类型

4. JS全栈的代价

  • 虽然数据已经渲染出了HTML 但还需要额外发送一份Hydrate
  • 及时客户端没有交互组件依然会被打包发送至客户端
  • Hydrate 影响页面交互指标(TTI)

5. 社区的探索

  • Server-only Components (Next/Nuxt)
  • Partial hydration / Island
  • Fine-grained+ resumable hydration (Qwik)
  • Shell + hydration (VitePress)

早上参加稀土掘金大会随手记下的。能力有限,欢迎勘误。

早上参加稀土掘金大会随手记下的。能力有限,欢迎勘误。

早上参加稀土掘金大会随手记下的。能力有限,欢迎勘误。

往年优秀文章汇总

征文获奖 & 千赞文章

Vue学习系列

硬核面试题

天天造轮子

-坚持造轮子第一天 - 模板引擎

欢迎关注然叔

公众号: 前端大班车

B站: 全栈然叔

🔥 这是然叔最近推出的前端工程化体系课程。

40h + 视频讲解。

三个实战带你无死角打通前端工程化

欢迎联系然叔(微信: xiaran310574 ), 也欢迎留下宝贵意见。

image.png