Next Vue.js 2.0 Gotanda.js #4 2016-06-03 @kazupon

Who? • GitHub: kazupon • Twitter: kazu_pon • Company: CUUSOO SYSTEM • Position: CTO (Full-Stack)

OSS Contributions • Vue.js core team member • Vue.js official site for Japanese • Maintenance and Translate Vue.js official repositories

Introduction • 2016 Apl 27 Announce Vue.js 2.0 https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.7acpkrkhh

To Speak Today • Today, I speak about the Vue.js 2.0

2.0 Architecture

Adopt virtual-dom • snabbdom based
 https://github.com/paldepind/snabbdom • Customize for Vue.js
 (component, directive, hydration)

1.x rendering flow

{{a.b}}

{{a.b}}

compile template document fragment

1.x rendering flow

{{a.b}}

{{a.b}}

{ a: { b: "hello" } } watcher a.b compile observe getter setter dep/observer a dep/observer b collect dependencies data template document fragment

1.x rendering flow

{{a.b}}

{{a.b}}

{ a: { b: "hello" } } watcher a.b compile observe render getter setter dep/observer a dep/observer b …

hello

collect dependencies append to target element data template document fragment target element

1.x rendering flow vm.a.b = 'world' { a: { b: "world" } } update dep/observer a getter setter dep/observer a dep/observer b

1.x rendering flow vm.a.b = 'world' { a: { b: "world" } } update notify dep/observer a watcher a.b getter setter dep/observer a dep/observer b batcher notify euqueue

1.x rendering flow vm.a.b = 'world' { a: { b: "world" } } update notify re- render dep/observer a …

world

watcher a.b getter setter dep/observer a dep/observer b batcher directive v-text="a.b" notify euqueue run callback update notify

2.0 rendering flow

{{a.b}}

{render:function(){with(this){ return _h(_e('p'),[(_s(a.b))])} }}, staticRenderFns:[] } compile template render functions AST {type:1,tag:"p",attrsList:[], attrsMap:{},children:[{type: 2,expression:"_s(a.b)" }],plain:true} parse optimize & to function

2.0 rendering flow

{{a.b}}

{render:function(){with(this){ return _h(_e('p'),[(_s(a.b))])} }}, staticRenderFns:[] } compile observe template render functions AST {type:1,tag:"p",attrsList:[], attrsMap:{},children:[{type: 2,expression:"_s(a.b)" }],plain:true} parse optimize & to function { a: { b: "hello" } } watcher ()=>{vm._update( vm._render())} getter setter dep/observer a dep/observer b collect dependencies data

2.0 rendering flow

{{a.b}}

{render:function(){with(this){ return _h(_e('p'),[(_s(a.b))])} }}, staticRenderFns:[] } compile observe render template render functions AST {type:1,tag:"p",attrsList:[], attrsMap:{},children:[{type: 2,expression:"_s(a.b)" }],plain:true} parse optimize & to function { a: { b: "hello" } } watcher ()=>{vm._update( vm._render())} getter setter dep/observer a dep/observer b collect dependencies data patch …

hello

target element call exec vnode render _vnode = vnode text p

2.0 rendering flow update vm.a.b = 'world' { a: { b: "world" } } getter setter dep/observer a dep/observer b

2.0 rendering flow update patch watcher ()=>{vm._update( vm._render())} patch exec vnode vm.a.b = 'world' { a: { b: "world" } } getter setter dep/observer a dep/observer b notify render functions text p text p _vnode {render:function(){with(this){ return _h(_e('p'),[(_s(a.b))])} }}, staticRenderFns:[] } scheduler euqueue run callback

2.0 rendering flow update patch re- render …

world

target element set $el _vnode = vnode watcher ()=>{vm._update( vm._render())} patch exec vnode vm.a.b = 'world' { a: { b: "world" } } getter setter dep/observer a dep/observer b notify render functions text p text p _vnode {render:function(){with(this){ return _h(_e('p'),[(_s(a.b))])} }}, staticRenderFns:[] } scheduler euqueue run callback

rendering performance • Improves initial rendering speed and memory consumption by up to 2~4x in most scenarios • benchmark
 Try to run the below URL
 https://github.com/vuejs/vue/tree/next/benchmarks

Support Server-Side-Rendering

support SSR • Without third vendor library, be able to server-side rendering • In server-side, render by using the blow the APIs • renderToString • renderToStream

renderToString • Usage: with use compiler import Vue from '../../dist/vue.common.js' import { compileToFunctions } from '../../dist/compiler.js' import createRenderer from '../../dist/server-renderer.js' const { renderToString } = createRenderer() // define template compilation let compileTemplate = (options) => { const res = compileToFunctions(options.template, { preserveWhitespace: false }) Object.assign(options, res) console.assert(typeof options.render === 'function') delete options.template return options } // render console.log(renderToString(new Vue(compileTemplate({ template: '' data: { foo: 'server', bar: 'rendering' } })))) // output: //

renderToString • Usage: with use ‘render’ option import Vue from '../../dist/vue.common.js' import createRenderer from '../../dist/server-renderer.js' const { renderToString } = createRenderer() // render console.log(renderToString(new Vue({ data: { foo: 'server', bar: 'rendering' }, render () { const h = this.$createElement return h('div', { attrs: { id: 'foo' } }, [`${this.foo} side ${this.bar}`]) } }))) // output: //

renderToString • component const child = Vue.extend(compileTemplate({ template: '’, props: ['msg'], data () { return { name: 'bar' } } })) // render console.log(renderToString(new Vue(compileTemplate({ template: '', data: { msg: 'hello' }, components: { child } })))) // output: //

renderToString • hooks const child = Vue.extend(compileTemplate({ template: '’, props: [‘msg'], data () { return { name: ‘bar’, count: 0 } }, init () { this.count++ }, created () { this.count++ } })) // render console.log(renderToString(new Vue(compileTemplate({ template: '', data: { msg: 'hello' }, components: { child } })))) // output: //

renderToStream • renderToString issues • Sync rendering !! • Blocking the event loop !! • renderToStream support the async rendering • Improve the performance by using the Node.js Stream

renderToStream • Usage: basic // … imports
 const { renderToStream } = createRenderer() // import!! // define template compilation let compileTemplate = (options) => { // ... } // render stream const stream = renderToStream(new Vue(compileTemplate({ template: '' data: { foo: 'server', bar: 'rendering' } })))) let res = '' stream.on('data', chunk => { res += chunk }) stream.on('end', () => { console.log(res) // output: // })

renderToStream • Usage: Pipe const http from ‘http' // ... const server = http.createServer((req, res) => { // ...
 
 // render stream const stream = renderToStream(new Vue(compileTemplate({ template: '' data: { foo: 'server', bar: 'rendering' } })))) 
 // pipe!! stream.pipe(res) }) server.listen(8000)

SSR benchmark • Try to run the below command
 
 $ npm run bench:ssr

hydration • When render at server-side, marke with ”server-rendered” to HTML • After that, In client-side, run the hydrate function at the patch • guard duplication rendering • skip the diffing, and DOM building

Rendering
 Optimization

It just works • No need the below from vue.js compiler to optimize the rendering • `shouldComponentUpdate` • Immutable data structures

Optimization • Static attributes and classes skip the diffing in the patch template virtual-dom (vnode) { tag: "div", data: { staticClass: "image-box" }, children: [{ tag: "h1", children: [...], ... }, { tag: "a", data: { attrs: { href: url }, staticAttrs: { target: "_blank" } }, children: [{ tag: "img", data: { attrs: { src: resource, alt: hint }, staticClass: "image" } }, ... }], ... }], ... }

• Static subtree skip the diffing in patch Optimization { render: function(){with(this){ return _h(_e('div', {class:class1}), [_m(0), _h(_e('p'), [(_s(a.b))]), _m(1)]) }}, staticRenderFns: [function(){with(this){ // _m(0) return _h(_e('header'), [_t("logo")])} }, function(){with(this){ // _m(1) return _h(_e('footer', [_t("foo")])} }] } template render functions compile When first rendering completed, results of staticRenderFns is cached in Vue instance. in later, use the this cached in the patch header div p footer text text text

Control
 of rendering

render tag / render option • Provide the feature that control of rendering with JavaScript • Cannot get no satisfaction to vue.js compiler • Cannot get no satisfaction to template DSL syntax • However, need to understand about the virtual-dom

render tag • Example import Vue from 'vue' const vm = new Vue({ template: ``, data: { message: 'hello world' }, methods: { onRender (args) { const h = this.$createElement return h('div', { class: 'message' }, [ h('p', {}, [args]) ]) } } }).$mount()

render option • Example import Vue from 'vue' const vm = new Vue({ data: { message: 'hello world' }, render () { const h = this.$createElement return h('div', { class: 'message' }, [ h('p', {}, [this.message]) ]) } }).$mount()

More leaner

Re-implementaion • Re-design from zero-base, and full-scrach • Split the below files where to dist • compiler (dist/compiler.js) • runtime (dist/vue-common.js) • compiler + runtime (dist/vue.js) • server-render (dist/server-renderer.js)

Remove the unneccessary codes • Build-in filters • Not used APIs and bad practice APIs • Unnecessary 1.x codes

Comparing dist files • 1.x
 25.79K (min+zip) • 2.0 • runtime only: 12.81K (min+zip) • runtime + compiler: 19.09K (min+zip)

Breaking changes

Breaking changes • Some deprecated APIs
 ($dispatch, $broadcast, … etc) • Custom directive API I/F • Filter System • Transition System
 
 … and others
 see more detail the below URL https://github.com/vuejs/vue/issues/2873

Development environments

Added type checking with Flow NEW!!

Roadmap

2.0 • Current: pre-alphe • Achieved test coverage 100% • Alpha or beta: soon? • Release • Documentation • Major plugin compatiblity
 (vue-router, vuex, vue-loader, vuerify, … etc)

1.x LTS (long-term support) • Security updates (9-months) • Critical bug fixes (6-months)

Conclusion

Conclusion • Adopt virtual-dom • The below has become possible • Improve rendering performance • SSR • Rendering optimization • Control of rendering • More learner

“Progressive Framework” adaptable to different complexity levels

vuejs-jp slack • Direct URL Access
 https://vuejs-jp-slackin.herokuapp.com • Vuejs official site for japanese
 http://jp.vuejs.org
 


Thanks!!