Vue.js Extend with Compiler

Transcript

1. Vue.js Extend with Compiler ToKyotoJS 2017-09-15 @kazupon
2. Who are you ?
3. kazupon Vue.js Core Team Vue.js japan users group organizer vue-i18n, vue docs maintainer storybook vue support member CUUSOO SYSTEM CTO @kazu_pon kazupon
4. [PR]
5. 2017-10-04
6. Vue.js v-meetup #5 https://vuejs-meetup.connpass.com/event/65442/
7. Nuxt.js at Genba Specials! 1.0 coming soon !? Nuxt.js!! Nuxt.js!!
8. We are hiring!! 
 Let’s building Open Innovation Platform!! http://www.cuusoo.co.jp
9. Introduction
10. Vue 2.x Rendering Engine Virtual DOM
11. • Declarative • Template Flexible Rendering Intuitive, Designer friendly !!
12. • Imperative • render function + hyperscript Flexible Rendering Programmatic, Powerful !!
13. • (Declarative + Imperative ) / 2 ? • JSX Flexible Rendering
14. However, Sometimes, we would like to …
15. • e.g.
 Pre-Translation of i18n Extend with compiler! I’d like to Improve Performance !!
16. Today: Speaking
17. How to extend with compiler
18. Overall flow
19. Overall flow Compilation Phase Rendering Phase
20. Hookable Compilation Phase AST Optimized AST About detail of Compilation Phase, See the bellow https://speakerdeck.com/kazupon/vue-dot-js-2-dot-0-server-side-rendering#23 Tokyo Node Festival 2016 : “Vue.js 2.0 αʔόαΠυϨϯμϦϯά” ({JS}) ({JS}) ({JS}) compile optimize generate Hooks Hooks Optimize Keys HTML Parser Optimizer Code Generator
21. How to compile with yourself
22. • Vue.compile • vue-template-compiler
 Provide API or package
23. • Full build only, Core built-in
 https://unpkg.com/vue • Generate render, staticRenderFns function Vue.compile
24. • Full build only, Core built-in
 https://unpkg.com/vue • Generate render, staticRenderFns function Vue.compile Damn…
25. • Vue Compiler Package
 https://www.npmjs.com/package/vue-template-compiler • No Vue Runtime, Vue Compiler only! • Need to install NPM vue-template-compiler npm install -D vue-template-compiler
26. • Provide some APIs • compiler.compile(template, [options]) • compiler.compileToFunctions(template) • compiler.ssrCompile(template, [options]) • compiler.ssrCompileToFunction(template) • compiler.parseComponent(file, [options]) vue-template-compiler
27. • Provide some APIs • compiler.compile(template, [options]) • compiler.compileToFunctions(template) • compiler.ssrCompile(template, [options]) • compiler.ssrCompileToFunction(template) • compiler.parseComponent(file, [options]) vue-template-compiler Bravo!
28. Compiler options
29. • modules • directives • preserveWhitespace We can specify the following options
30. • An array of compiler module • compiler module type: `ModuleOptions` `modules` option
31. Hooking of compiler module AST Optimized AST compile optimize generate HTML Parser Optimizer Code Generator compiler module preTransformNode transformNode postTransformNode staticKeys genData transformCode
32. • An object where have pairs key-value • key: directive name • value: transform an AST node function `directives` option
33. Hooking of directive AST Optimized AST compile optimize generate HTML Parser Optimizer directive1 directiveX directives Code Generator directive2 Call directive hooks before genData hooks
34. Compilation Examples
35. • Vue core (for web)
 https://github.com/vuejs/vue/tree/dev/src/platforms/web/compiler/modules • Weex (for native)
 https://github.com/vuejs/vue/tree/dev/src/platforms/weex/compiler/modules • vue-loader (assets <img>,<image> in-line)
 https://github.com/vuejs/vue-loader/tree/master/lib/template-compiler/ modules • vue-18n-extensions (pre-translation)
 https://github.com/kazupon/vue-i18n-extensions
 compiler module
36. • Vue core (for web)
 https://github.com/vuejs/vue/tree/dev/src/platforms/web/compiler/directives • Weex (for native)
 https://github.com/vuejs/vue/tree/dev/src/platforms/weex/compiler/directives directive
37. Tips
38. • Vue official bundler libs(Internal used with it) • vue-loader : compilerModules • rollup-plugin-vue: compilerOptions Alternative: vue-template-compiler https://vuejs.github.io/rollup-plugin-vue/#/en/2.3/?id=template
39. Conclusion
40. Compilation hooks is very powerful! • Vue compiler provide compilation hooks • It's powerful to extend the library/plugins by Vue compiler
41. Please well consider • However, In about Apps, don’t abuse • Your apps breaks down easily in order to depenpent vue compiler • If you’d like to use it, Please well consider
42. One more thing …
43. Maybe, Vue compiler evolve?
44. Thanks!