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

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

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

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

建议收藏

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

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

一、 开发范式&底层框架

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

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

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

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

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

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

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

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

• Vue Composition API ref追踪依赖

• Ember Starbeam Cell追踪依赖

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

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

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

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

• Sevlte 【$】副作用黑魔法

简洁代码带来的限制

• 只能在Svelet组件内使用

• 组件外需要不同的API

• 只能在顶层作用域使用

• Vue Reactivity Transform 响应式转换

编译时宏 $ref

• solid labels

类似于 Vue Reactivity Transform

统一模型的优势和代价

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

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

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

Vue Vapor Mode

SFC单文件输出

类 Solid 输出

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

二、工具链

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

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

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

趋势分析

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

2. 工具链的抽象层次

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

3、 基于Vite的上层框架

四、上层框架Meta Framworks

1. JS全栈的意义

常用的全栈框架

BFF 一个语言打通前后端

2. 数据打通

3. 类型打通

• 通过显示引入共享类型
• 基于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)

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

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

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

往年优秀文章汇总

征文获奖 & 千赞文章

• 彻底搞懂HTTP协议 - 天天造轮子 -🔥月冠军
• 做了一夜动画，让大家十分钟搞懂Webpack - 👍🏻1471赞
• 【Vue官方教程笔记】- 尤雨溪手写mini-vue 👍🏻1643赞
• 【Vue3官方教程】🎄万字笔记 | 同步导学视频 - 👍🏻1536赞

Vue学习系列

• Element3开发内幕 - Vue CLI插件开发 192赞
• 忙了一夜用CompositionAPI征服产品妹子花里胡哨的需求 129赞
• Vue3.0全球发布会干货总结 286赞
• Element3.0升级日记 - TimeLine组件 70赞
• 跟我一起编写Vue3版ElementUI 156赞
• 渐进式手敲Vue3.0框架 - 2万字以上 - 持续更新 93赞
• 如何参加开源项目-如何给Vue3.0提PR 85赞

硬核面试题

• Day01 JS整数是怎么表示的 | 面试打卡365
• Day02 - 0.1 + 0.2 === 0.3嘛 | 面试打卡365
  
• Day03 - 数字超过最大限制的如何处理? | 面试打卡365
• Day04 - 判断数据类型的方式有哪些？| 面试365
• Day05 - new 一个函数发生了什么？| 面试365
• Day06 - 构造函数的返回值与new实例关系 | 面试365
  
• Day07 - 为什么箭头函数不能当构造函数 | 面试365
• Day08 - 什么是闭包？如何制造闭包？
• Day09 - 闭包应用1 - 制造惰性函数
• Day10-闭包应用-偏应用函数与柯里化
• Day11-闭包应用 - 立即执行函数IIFE
• Day12 - 闭包应用4 - 类库封装
• Day13 - 闭包应用6 - 构建器打包webpack
  
• Day14 - 词法作用域、块级作用域、作用域链、静态动态作用域
  
• Day15 - let为什么可以解决循环陷阱
• Day16 - 为什么一定要有块级作用域
• Day17 - let是否会造成变量提升
• Day18 - this指向的多种形式
• Day19 - React与this指向
• Day20 - 如何实现call和apply、bind
  
• Day21 - innerText、 nodeValue与 textContent的区别
• Day22 - 语义化标签搭建wiki
• Day23 - document以外的常用对象
  
• Day24 - 图片懒加载的原理
• Day25 - HTML5新特性
• Day26 - Canvas 与 SVG的区别
  

天天造轮子

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

• 坚持造轮子第二天 - 防抖与节流
• 坚持造轮子第三天 - 数据响应式
• 坚持造轮子第四天 - 统一状态管理
• 坚持造轮子第五天 - 时间旅行
• 坚持造轮子第六天 - Mixin -装备合成路径
• 天天造轮子第七天 - 中间件实现 - Compose 的 N 种姿势
• 天天造轮子第八天 - Promise - 网友来稿
• 做了一夜动画，让大家十分钟搞懂Webpack

欢迎关注然叔

公众号： 前端大班车

B站： 全栈然叔

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

40h + 视频讲解。

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

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

• 我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。