Vapor Revolution

1. Vapor Revolution Unleashing Vue evolution and Potential with Vapor Mode JSConf JP 2024 2024/11/23 @kazupon
2. About Me
3. PLAID, inc. Vue.js Core Team Nuxt Ecosystem Team Vue I18n & Intlify author Vue Fes Japan Organizer Vue.js Japan User Group Organizer @kazu_pon kazupon kazupon
4. We are hiring! Engineer Blog X (Twitter) © PLIAD, Inc.
5. Agenda • Vapor Mode • Potential with Vapor Mode
6. Vapor Mode
7. • New alternative compilation strategy of Vue.js • Inspired from SolidJS • Goal: Maximizing performance • Vapor mean has … • Just like steam • lighter, faster, and more flexible • Opt-in What’s Vapor Mode?
8. Again, What’s Vue.js? • Progressive framework for UI Building • SFC: Single File Components • Features: • Composition API • Reactivity • SSR, and … more! • To work on the browser, need compile SFCs
9. Key tech elements of Vue • Compiler • Reactivity System • Virtual DOM
10. Compiler • Compile SFC
11. Compiler • Compile script block and template block to JS Compile to JavaScript
12. Compiler • Compile style block to CSS Compile to CSS
13. Compiler • Optimize for performance Caching
14. • Fine-grained reactivity based on dependency tracking Reactivity System Reactivity System Dependencies full last fi rst
15. • Rendering with Diff & Patch & Reactive lifecycle Virtual DOM https://vuejs.org/guide/extras/rendering-mechanism.html#render-pipeline Tamplate compiled into Render Function Component Reactivity State Virtual DOM Tree Actual DOM returns diff / patch trigger re-render track dependencies <template> <div id=“hello"> ... </div> </template> function render() { return h(‘div', { id: "hello" }, [/* more childs */] ) } const vnode = { type: 'div', props: { id: 'hello' }, children: [ /* more vnodes */ ] } <html> <body> <div id=“app”> <div id=“hello"> ... </div> </div> </body> </html>
16. Virtual DOM Tamplate compiled into Render Function Component Reactivity State Virtual DOM Tree Actual DOM returns diff / patch track dependencies <template> <div id=“hello"> ... </div> </template> function render() { return h(‘div', { id: "hello" }, [/* more childs */] ) } const vnode = { type: 'div', props: { id: 'hello' }, children: [ /* more vnodes */ ] } <html> <body> <div id=“app”> <div id=“hello"> ... </div> </div> </body> </html> • First rendering
17. Virtual DOM Tamplate compiled into Render Function Component Reactivity State Virtual DOM Tree Actual DOM returns diff / patch trigger re-render <template> <div id=“hello"> ... </div> </template> function render() { return h(‘div', { id: "hello" }, [/* more childs */] ) } const vnode = { type: 'div', props: { id: 'hello' }, children: [ /* more vnodes */ ] } <html> <body> <div id=“app”> <div id=“hello"> ... </div> </div> </body> </html> • Re-rending
18. Changes with Vapor Mode
19. Changes with Vapor Mode • Rendering mechanism • Compiler • Runtime
20. Rendering mechanism • Drop Virtual DOM, use Native DOM API Tamplate compiled into Render Function Component Reactivity State Framgments (DOM Nodes) Actual DOM returns mount update track dependencies <template> <buttton @click=“count++"> {{ count }} </buttton> </template> <html> <body> <div id=“app”> <buttton>0</buttton> </div> </body> </html> const t0 = template("<button></button>") delegateEvents("click") function render(ctx) { const n0 = t0() delegate(n0, “click", () => $event => (ctx.count++)) renderEffect( () => setText(n0, ctx.count)) return n0 } <buttton>0</buttton> Reactive Effect trigger effect register <html> <body> <div id=“app”> <buttton>1</buttton> </div> </body> </html>
21. Rendering mechanism Tamplate compiled into Render Function Component Reactivity State Framgments (DOM Nodes) Actual DOM returns mount update track dependencies <template> <buttton @click=“count++"> {{ count }} </buttton> </template> <html> <body> <div id=“app”> <buttton>0</buttton> </div> </body> </html> const t0 = template("<button></button>") delegateEvents("click") function render(ctx) { const n0 = t0() delegate(n0, “click", () => $event => (ctx.count++)) renderEffect( () => setText(n0, ctx.count)) return n0 } <buttton>0</buttton> Reactive Effect trigger effect register <html> <body> <div id=“app”> <buttton>1</buttton> </div> </body> </html> • First rendering
22. Rendering mechanism Tamplate compiled into Render Function Component Reactivity State Framgments (DOM Nodes) Actual DOM returns mount update track dependencies <template> <buttton @click=“count++"> {{ count }} </buttton> </template> <html> <body> <div id=“app”> <buttton>0</buttton> </div> </body> </html> const t0 = template("<button></button>") delegateEvents("click") function render(ctx) { const n0 = t0() delegate(n0, “click", () => $event => (ctx.count++)) renderEffect( () => setText(n0, ctx.count)) return n0 } <buttton>0</buttton> Reactive Effect trigger effect register <html> <body> <div id=“app”> <buttton>1</buttton> </div> </body> </html> • Re-rendering
23. • IR (Intermediate Representation) Architecture Compiler Optimized Vue AST generate transform JS Code Vue AST Tamplate parse Virutal DOM Mode (Currently)
24. • IR (Intermediate Representation) Architecture Compiler Vapor IR generate transform JS Code Vue AST Tamplate parse Optimized Vue AST generate transform JS Code Vue AST Tamplate parse vDOM Mode (Currently) Vapor Mode
25. Runtime • Virtual DOM is no longer necessary ! • LESS codes ! SMALL size! runtime-vapor is over 50% smaller than runtime-dom!
26. Bene fi ts with Vapor Mode
27. Bene fi ts with Vapor Mode • Performance • Compatibility • Interoperability
28. Performance https://talks.sxzz.moe/2024-10-vue-fes-japan/presenter/7?clicks=5
29. Compatibility • Vapor Mode is a subset of vDOM Mode • vDOM Mode • Composition API • Options API, and etc … • Vapor Mode • Composition API • <script setup> Vapor Mode vDOM Mode
30. Interoperability • Mixin Vapor Mode and vDOM Mode components in App App.vue vDOM vDOM vDOM Vapor Vapor Vapor
31. Potential of Vapor Mode
32. @vue/compiler-vapor [compile] Compilation Architecture [parse] [transform] [generate] @vue/compiler-sfc [compileTemplate] @vitejs/plugin-vue [transform] Figure inspired from Kevin Deng & Rizume Ayaka, Thanks! SFC
33. @vue/compiler-vapor [compile] Compilation Architecture [parse] Vue Template → Vue AST [transform] Vue AST → Vapor IR [generate] Vapor IR → JS Code @vue/compiler-sfc [compileTemplate] @vitejs/plugin-vue [transform] SFC Figure inspired from Kevin Deng & Rizume Ayaka, Thanks!
34. What’s IR? • IR (Intermediate Representation) • Data strcture or code internally used by compiler or virtual machine to represent source code • Usages • Cross Platform • Optimization • Translation Compile / Transform IR Source Code Generate Target Executable Code / Binary
35. • Representation of template structure and template operations, Tree nodes like AST Vapor IR Block Root If SetText CreateText Node InsertNode Create Component Block Block CreateText Node Prepend Node export interface IfIRNode extends BaseIRNode { type: IRNodeTypes.IF id: number condition: SimpleExpressionNode positive: BlockIRNode negative?: BlockIRNode | IfIRNode once?: boolean }
36. Vapor IR Node Types • 20 Vapor IR node types • Block node has operations • Block node is able to register 18 Vapor IR types as operations • Operations of render function • e.g. DOM manupluration, Set Props / Attrs, Event bindings, and … • If & For node has block node export enum IRNodeTypes { ROOT, BLOCK, SET_PROP, SET_DYNAMIC_PROPS, SET_TEXT, SET_EVENT, SET_DYNAMIC_EVENTS, SET_HTML, SET_TEMPLATE_REF, SET_MODEL_VALUE, SET_INHERIT_ATTRS, INSERT_NODE, PREPEND_NODE, CREATE_TEXT_NODE, CREATE_COMPONENT_NODE, SLOT_OUTLET_NODE, WITH_DIRECTIVE, DECLARE_OLD_REF, IF, FOR, }
37. e.g. Vapor IR Tree • Counter component, which has condition Block Root If SetEvent Block InsertNode <div> <button @click="count++">count: {{ count }}</button> <p v-if="count > 10">Count over 10</p> </div>
38. Now, As you may have noticed …
39. Is it possible to transform it to Vapor IR using non-Vue template?
40. YES!
41. Support Vue JSX! @vue/compiler-vapor [compile] [parse] Vue Template → Vue AST [transform] Vue AST → Vapor IR [generate] Vapor IR → JS Code @vue/compiler-sfc [compileTemplate] @vitejs/plugin-vue [transform] SFC unplugin-vue-jsx-vapor [transform] compiler [compile] [parse] Vue JSX → JSX AST [transform] JSX AST → Vapor IR Vue JSX
42. Svelte DEMO
43. DEMO Contents • Svelte Template Explorer • Playground Counter Component
44. inclusion-vapor • Open-source project • Component interoperability based on Vapor • Repository: https://github.com/kazupon/inclusion-vapor
45. Fusion of components coming? • Just `import` only! Vue Vapor Vue Vapor React Vapor React Vapor Svelte Vapor Svelte Vapor Vue Vapor
46. Vapor future plan
47. Vapor future plan • Support platform-agnostic • currently, browser only • native mobile app • More improvements and generalization? • Release with Vue 3.6 as experimental
48. Conclusion
49. Recap • Vapor Mode • Vapor is an alternative compilation strategy & new begenning for Vue • Potential with Vapor Mode • Vapor is support IR architecture • Vapor will have better Vue JSX support • If we follow the Vapor conventions & I/F, we can also support non-Vue templates
50. Vapor Team, Thanks! Evan You Kevin Deng Rizumu Ayaka Ubugeeei Doctor Wu zhiyuanzmj
51. Join us! • Vapor Project : https://github.com/vuejs/vue-vapor • Lean about Vapor : https://github.com/ubugeeei/reading-vuejs-core-vapor • Component interoperability OSS Project : inclusion-vapor 🫶 https://github.com/kazupon/inclusion-vapor
52. Thank You! ❤