【陈立豪】前端框架第二春：编译型框架教会了我们什么？.pdf

1、前前端端框框架架第第二二春春：编编译译型型框框架架教教会会了了我我们们什什么么？陈陈立立豪豪Shopee Senior Expert E2017年加入 SHOPEE 新加坡从事SHOPEE 商城的WEB INFRA开发2019 参与 SVELTE 维护，SVELTE 核心维护者之一陈陈立立豪豪2017年加入 SHOPEE 新加坡从事SHOPEE 商城的WEB INFRA开发2019 参与 SVELTE 维护，SVELTE 核心维护者之一YOUTUBE/B站:LIHAUTAN陈陈立立豪豪0 01 1前前端端框框架架概概览览前前端端3 3大大框框架架三三大大框框架架共共同同点点虚虚拟拟D DO O

2、MM优化编辑dom的效率对比虚拟dom,以获得最优化的dom指令代代码码库库体体积积无法依据用户代码来分析哪些功能不被使用只好输出所有功能来应变声声明明式式U UI I向框架形容UI，让框架把DOM搭起来只关注当前状态，不关注变化前前端端3 3大大框框架架新新前前端端框框架架？前前端端3 3大大框框架架新新前前端端框框架架新新前前端端框框架架共共同同点点静静态态分分析析在构建时优化生成代码用构建的时间换运行时的效率挑挑战战固固有有假假想想尝试打破固有的假想以全新思路解决问题现现有有框框架架也也有有编编译译器器静静态态分分析析S Sv ve el lt te https:/ 创始人 Rich H

3、arris 重新思考响应性(Rethinking Reactivity)不用虚拟dom 在构建时解析变量与模版之间关系，生成最优化响应 式代码S Sv ve el lt te S Sv ve el lt te e 相近与 HTML 语法精简语语法法 S Sv ve el lt te e S Sv ve el lt te e S Sv ve el lt te e S Sv ve el lt te e c- S Sv ve el lt te e c- S Sv ve el lt te e c- S Sv ve el lt te e c- S Sv ve el lt te e c- S Sv ve

4、el lt te e c- S Sv ve el lt te e m- S Sv ve el lt te e d- S Sv ve el lt te e p-up S Sv ve el lt te e p-up S Sv ve el lt te e p-up S Sv ve el lt te e p-up S Sv ve el lt te e p-up S Sv ve el lt te e p-up S Sv ve el lt te e V VS S真真实实d do omm虚虚拟拟v vd do omm S Sv ve el lt te e S Sv ve el lt te e S Sv ve

5、 el lt te e S Sv ve el lt te e 如如何何判判断断变变量量的的变变更更赋赋值值更更新新突突变变 S Sv ve el lt te e S Sv ve el lt te e S Sv ve el lt te e Svelte 会辨别那些变量变更需要触发 DOM 变更 S Sv ve el lt te e Svelte 会辨别那些变量变更需要触发 DOM 变更 S Sv ve el lt te e 列列出出所所有有变变量量判判断断是是否否会会变变更更判判断断是是否否在在模模版版里里使使用用S Sv ve el lt te S So ol li id https:/ 创始

6、人 Ryan Carniato 用起来很像 React Functional Component 遵循和 React 相同的理念：单向数据流 但是弃用了虚拟 DOM，是完全不同的实现 细粒度响应性S So ol li id S So ol li id d Solid 组建函数只执行 1 遍 S So ol li id d Solid 组建函数只执行 1 遍 S So ol li id d Solid 用 HTML template 来快速创建组件元素 S So ol li id d Solid 用 HTML template 来快速创建组件元素 S So ol li id d Solid 用