Next Vue.js 2.0

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 <template> <p>{{a.b}}</p> </template> <document-fragment> <p>{{a.b}}</p> </document-fragment> compile
template document fragment

1.x rendering flow <template> <p>{{a.b}}</p> </template> <document-fragment> <p>{{a.b}}</p> </document-fragment> {
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 <template> <p>{{a.b}}</p> </template> <document-fragment> <p>{{a.b}}</p> </document-fragment> {
a: { b: "hello" } } watcher a.b compile observe render getter setter dep/observer a dep/observer b <html>… <body> <p>hello</p> </body> </html> 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

"world" } } update notify dep/observer a watcher a.b getter setter dep/observer a dep/observer b batcher notify euqueue

"world" } } update notify re- render dep/observer a <html>… <body> <p>world</p> </body> </html> 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 <template> <p>{{a.b}}</p> </template> {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

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

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 <html>… <body> <p>hello</p> </body> </html> 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 <html>… <body> <p>world</p>
</body> </html> 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: '<div id="foo">{{ foo }} side {{ bar }}</div>' data: { foo: 'server', bar: 'rendering' } })))) // output: // <div id="foo" server-rendered="true">server side rendering</div>

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: // <div id="foo" server-rendered="true">server side rendering</div>

renderToString • component const child = Vue.extend(compileTemplate({ template: '<div class="bar">{{msg}}
{{name}}</div>’, props: ['msg'], data () { return { name: 'bar' } } })) // render console.log(renderToString(new Vue(compileTemplate({ template: '<child class="foo" :msg="msg"></child>', data: { msg: 'hello' }, components: { child } })))) // output: // <div server-rendered="true" class="foo bar">hello bar</div>

renderToString • hooks const child = Vue.extend(compileTemplate({ template: '<div class="bar">{{msg}}
{{name}}: {{count}}</div>’, props: [‘msg'], data () { return { name: ‘bar’, count: 0 } }, init () { this.count++ }, created () { this.count++ } })) // render console.log(renderToString(new Vue(compileTemplate({ template: '<child class="foo" :msg="msg"></child>', data: { msg: 'hello' }, components: { child } })))) // output: // <div server-rendered="true" class="foo bar">hello bar: 2</div>

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: '<div id="foo">{{ foo }} side {{ bar }}</div>' data: { foo: 'server', bar: 'rendering' } })))) let res = '' stream.on('data', chunk => { res += chunk }) stream.on('end', () => { console.log(res) // output: // <div id="foo" server-rendered="true">server side rendering</div> })

renderToStream • Usage: Pipe const http from ‘http' // ...
const server = http.createServer((req, res) => { // ...    // render stream const stream = renderToStream(new Vue(compileTemplate({ template: '<div id="foo">{{ foo }} side {{ bar }}</div>' 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" } }, ... }], ... }], ... } <div class="image-box"> <h1>{{title}}</h1> <a :href="url" target="_blank"> <img :src="resource" class="image" :alt="hint"> </a> </div>

• Static subtree skip the diffing in patch Optimization <div
:class="class1"> <header>header</header> <p>{{a.b}}</p> <footer>footer</footer> </div> { 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: `<div><render :method="onRender" :args="message"></render></div>`, 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!!

Next Vue.js 2.0

Next Vue.js 2.0

More Decks by kazupon

Other Decks in Technology

Featured

Transcript