Vue.js Extend with Compiler

Slide 1

Slide 1 text

Vue.js Extend with Compiler ToKyotoJS 2017-09-15 @kazupon

Slide 2

Slide 2 text

Who are you ?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

[PR]

Slide 5

Slide 5 text

2017-10-04

Slide 6

Slide 6 text

Vue.js v-meetup #5 https://vuejs-meetup.connpass.com/event/65442/

Slide 7

Slide 7 text

Nuxt.js at Genba Specials! 1.0 coming soon !? Nuxt.js!! Nuxt.js!!

Slide 8

Slide 8 text

We are hiring!!   Let’s building Open Innovation Platform!! http://www.cuusoo.co.jp

Slide 9

Slide 9 text

Introduction

Slide 10

Slide 10 text

Vue 2.x Rendering Engine Virtual DOM

Slide 11

Slide 11 text

• Declarative • Template Flexible Rendering Intuitive, Designer friendly !!

Slide 12

Slide 12 text

• Imperative • render function + hyperscript Flexible Rendering Programmatic, Powerful !!

Slide 13

Slide 13 text

• (Declarative + Imperative ) / 2 ? • JSX Flexible Rendering

Slide 14

Slide 14 text

However, Sometimes, we would like to …

Slide 15

Slide 15 text

• e.g.  Pre-Translation of i18n Extend with compiler! I’d like to Improve Performance !!

Slide 16

Slide 16 text

Today: Speaking

Slide 17

Slide 17 text

How to extend with compiler

Slide 18

Slide 18 text

Overall flow

Slide 19

Slide 19 text

Overall flow Compilation Phase Rendering Phase

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

How to compile with yourself

Slide 22

Slide 22 text

• Vue.compile • vue-template-compiler  Provide API or package

Slide 23

Slide 23 text

• Full build only, Core built-in  https://unpkg.com/vue • Generate render, staticRenderFns function Vue.compile

Slide 24

Slide 24 text

• Full build only, Core built-in  https://unpkg.com/vue • Generate render, staticRenderFns function Vue.compile Damn…

Slide 25

Slide 25 text

• 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

Slide 26

Slide 26 text

• Provide some APIs • compiler.compile(template, [options]) • compiler.compileToFunctions(template) • compiler.ssrCompile(template, [options]) • compiler.ssrCompileToFunction(template) • compiler.parseComponent(file, [options]) vue-template-compiler

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Compiler options

Slide 29

Slide 29 text

• modules • directives • preserveWhitespace We can specify the following options

Slide 30

Slide 30 text

• An array of compiler module • compiler module type: `ModuleOptions` `modules` option

Slide 31

Slide 31 text

Hooking of compiler module AST Optimized AST compile optimize generate HTML Parser Optimizer Code Generator compiler module preTransformNode transformNode postTransformNode staticKeys genData transformCode

Slide 32

Slide 32 text

• An object where have pairs key-value • key: directive name • value: transform an AST node function `directives` option

Slide 33

Slide 33 text

Hooking of directive AST Optimized AST compile optimize generate HTML Parser Optimizer directive1 directiveX directives Code Generator directive2 Call directive hooks before genData hooks

Slide 34

Slide 34 text

Compilation Examples

Slide 35

Slide 35 text

• 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 , 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

Slide 36

Slide 36 text

• 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

Slide 37

Slide 37 text

Tips

Slide 38

Slide 38 text

• Vue oﬀicial 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

Slide 39

Slide 39 text

Conclusion

Slide 40

Slide 40 text

Compilation hooks is very powerful! • Vue compiler provide compilation hooks • It's powerful to extend the library/plugins by Vue compiler

Slide 41

Slide 41 text

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