Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Future of Vue – JSFoo VueDay 2019

Rahul Kadyan
August 30, 2019
Technology
0
340

Future of Vue – JSFoo VueDay 2019

On 1st October 2016, we released Vue 2.0. Three years have passed since. The frontend ecosystem, especially JavaScript standards and browsers, have come far. New APIs – e.g., Proxies – are available on most browsers. This has presented us with an opportunity to address the caveats in Vue's reactivity system. We are using this opportunity to address the smaller but important issues in the ecosystem. A cherry on top, significant performance enhancements for Vue 3.

Rahul Kadyan

August 30, 2019
Tweet

More Decks by Rahul Kadyan

See All by Rahul Kadyan
Inversion of Control in a Vue Application
znck
0
250
New Vue. New Compiler. Let's Unpack
znck
4
2.3k
Head first into composition API
znck
0
94
React to Vue: why and how?
znck
0
28
Collocation in Modern Web
znck
0
16
Choosing Vue.js
znck
0
17

Other Decks in Technology

See All in Technology
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
24k
nlp2023 位置属性を有しない事物に対する地理的特定性の分析
takashiinui
0
140
作って理解するバックドア
ad5jp
0
220
試して分かった！AWS を使った PLCのデータ収集と分析基盤の実践ノウハウ #FA設備技術勉強会#13
ganota
1
100
PHP で学ぶ Cache の距離の話 / study_cache_with_php
hanhan1978
3
650
ジョブキューシステムFireworqのアーキテクチャ設計と運用時のベストプラクティス
tarao
1
790
チームで導入する Jetpack Compose あの素晴らしいLTをもう一度.ver
kako351
1
150
量子コンピュータ時代のプログラミングセミナー / 20230316_Amplify_seminar _route_planning_optimization
fixstars
0
180
Privacy Techによる新しいデータ活用の形
line_developers
PRO
1
210
Race Conditions em Microsserviços: Desmistificando um Problema Comum em Arquiteturas Distribuídas
jordihofc
0
210
TSN(Time-Sensitive Networking)を環境構築して遊んでみた
iotengineer22
0
250
ローコードで改革！End to Endテストの再定義！
odasho
0
110

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
121
29k
Building Adaptive Systems
keathley
28
1.4k
How GitHub Uses GitHub to Build GitHub
holman
466
280k
The Cult of Friendly URLs
andyhume
70
5.2k
The Pragmatic Product Professional
lauravandoore
21
3.6k
The Power of CSS Pseudo Elements
geoffreycrofte
53
4.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
Support Driven Design
roundedbygravity
88
8.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
5.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
What the flash - Photography Introduction
edds
64
10k

Transcript

  1. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Future of Vue

    View Slide

  2. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    View Slide

  3. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    cc @gustojs

    View Slide

  4. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    cc @gustojs

    View Slide

  5. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Platinum Sponsor
    Exhibition Sponsor Community Sponsor

    View Slide

  6. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Easy to Learn

    View Slide

  7. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Components

    View Slide

  8. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Build your blog!

    View Slide

  9. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Scale can mean PEOPLE

    View Slide

  10. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Plugins cure Pain

    View Slide

  11. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Looked under the hood

    View Slide

  12. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    React developer’s love
    for Vue

    View Slide

  13. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Accessibility is Business

    View Slide

  14. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Vue 3.0 is Coming

    View Slide

  15. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    @znck0

    View Slide

  16. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    https://blr.vue.community

    View Slide

  17. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    https://awesomeconf.design

    View Slide

  18. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    View Slide

  19. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    3.0

    View Slide

  20. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    View Slide

  21. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    const data = vm.$options.data()
    Object.defineProperty(vm, key, {
    get() {
    // track dependency ...
    return data[key]
    },
    set(value) {
    data[key] = value
    // notify dependencies ...
    }
    })

    View Slide

  22. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    const data = vm.$options.data()
    Object.defineProperty(vm, key, {
    get() {
    // track dependency ...
    return data[key]
    },
    set(value) {
    data[key] = value
    // notify dependencies ...
    }
    })

    View Slide

  23. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    const data = vm.$options.data()
    Object.defineProperty(vm, key, {
    get() {
    // track dependency ...
    return data[key]
    },
    set(value) {
    data[key] = value
    // notify dependencies ...
    }
    })

    View Slide

  24. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    const data = vm.$options.data()
    Object.defineProperty(vm, key, {
    get() {
    // track dependency ...
    return data[key]
    },
    set(value) {
    data[key] = value
    // notify dependencies ...
    }
    })
    Do you see the
    problem?

    View Slide

  25. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
    Addition/removal of properties
    Array index or length assignment
    Linear complexity

    View Slide

  26. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    View Slide

  27. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    View Slide

  28. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    No more caveats!

    View Slide

  29. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    No more caveats!

    View Slide

  30. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    View Slide

  31. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    … and it works with
    Map
    Set
    WeakMap
    WeakSet
    Any Other Class

    View Slide

  32. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Faster

    View Slide

  33. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Faster
    much faster

    than Object.definePrototype

    View Slide

  34. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    v2.6 v3.0 (prototype)
    Rendering 3000 stateful component instances

    View Slide

  35. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    v2.6 v3.0 (prototype)
    Rendering 3000 stateful component instances
    Double Speed


    View Slide

  36. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    v2.6 v3.0 (prototype)
    Rendering 3000 stateful component instances
    

    Half Memory

    View Slide

  37. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    v2.6 v3.0 (prototype)
    Rendering 3000 stateful component instances
    Double Speed

    Half Memory

    View Slide

  38. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Crash Course:
    Virtual DOM

    View Slide

  39. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Template / DOM

    Hello World!

    View Slide

  40. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    {
    tag: 'div',
    attrs: {
    class: 'container',
    },
    children: [
    {
    tag: ‘span',
    attrs: {},
    children: ['Hello World!'],
    },
    ],
    }
    Virtual DOM

    Hello World!

    View Slide


  41. Hello World!

    Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    function render(createElement) {
    return createElement(
    'div',
    { class: 'container'},
    [
    createElement('span', {}, ['Hello World!'])
    ]
    )
    }
    Render Function

    View Slide

  42. function render(createElement) {
    return createElement(
    'div',
    { class: 'container'},
    [
    createElement('span', {}, ['Hello World!'])
    ]
    )
    }

    Hello World!

    Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Render Function

    View Slide

  43. function render(createElement) {
    return createElement(
    'div',
    { class: 'container'},
    [
    createElement('span', {}, ['Hello World!'])
    ]
    )
    }

    Hello World!

    Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Render Function
    createElement(
    /* tag */ ‘div',
    /* attrs */ { class: ‘container'},
    /* children */ [ ...]
    )

    View Slide

  44. function render(createElement) {
    return createElement(
    'div',
    { class: 'container'},
    [
    createElement('span', {}, ['Hello World!'])
    ]
    )
    }

    Hello World!

    Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Virtual DOM Node
    {
    tag: 'div',
    attrs: { class: 'container'},
    children: [ ...]
    }

    View Slide

  45. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Template -> Render Function

    Hello World!

    function render(createElement) {
    return createElement(
    'div',
    { class: 'container'},
    [createElement(
    'span', {},
    ['Hello World!’]
    )]
    )
    }

    View Slide

  46. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Render Function -> Virtual DOM
    {
    tag: 'div',
    attrs: {
    class: 'container',
    },
    children: [
    {
    tag: ‘span',
    attrs: {},
    children: ['Hello World!'],
    },
    ],
    }
    function render(createElement) {
    return createElement(
    'div',
    { class: 'container'},
    [createElement(
    'span', {},
    ['Hello World!’]
    )]
    )
    }

    View Slide

  47. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Smarter Compiler

    View Slide

  48. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan




    Template
    function render() {
    const Comp = resolveComponent('Comp', this)
    return createFragment([
    createComponentVNode(Comp, null, null, 0 /* no children */),
    createElementVNode('div', null, [
    createElementVNode('span', null, null, 0 /* no children */)
    ], 2 /* single vnode child */)
    ], 8 /* multiple non-keyed children */)
    }
    Compiler Output
    Element Type Detection

    View Slide

  49. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan




    Template
    function render() {
    const Comp = resolveComponent('Comp', this)
    return createFragment([
    createComponentVNode(Comp, null, null, 0 /* no children */),
    createElementVNode('div', null, [
    createElementVNode('span', null, null, 0 /* no children */)
    ], 2 /* single vnode child */)
    ], 8 /* multiple non-keyed children */)
    }
    Compiler Output
    Element Type Detection

    View Slide

  50. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan




    Template
    function render() {
    const Comp = resolveComponent('Comp', this)
    return createFragment([
    createComponentVNode(Comp, null, null, 0 /* no children */),
    createElementVNode('div', null, [
    createElementVNode('span', null, null, 0 /* no children */)
    ], 2 /* single vnode child */)
    ], 8 /* multiple non-keyed children */)
    }
    Compiler Output
    Element Type Detection

    View Slide

  51. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan




    Template
    function render() {
    const Comp = resolveComponent('Comp', this)
    return createFragment([
    createElement(Comp, null, null, 0 /* no children */),
    createElementVNode('div', null, [
    createElement('span', null, null, 0 /* no children */)
    ], 2 /* single vnode child */)
    ], 8 /* multiple non-keyed children */)
    }
    Compiler Output
    Element Type Detection

    View Slide

  52. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Child Type Detection
    function createElement(tag, ...) {
    if (isComponent(tag))
    return createComponentVNode(tag, ...)
    if (isElement(tag))
    return createElementVNode(tag, ...)
    ...
    }

    View Slide

  53. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan




    Template
    function render() {
    const Comp = resolveComponent('Comp', this)
    return createFragment([
    createComponentVNode(Comp, null, null, 0 /* no children */),
    createElementVNode('div', null, [
    createElementVNode('span', null, null, 0 /* no children */)
    ], 2 /* single vnode child */)
    ], 8 /* multiple non-keyed children */)
    }
    Compiler Output
    Element Type Detection

    View Slide

  54. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan




    Template
    function render() {
    const Comp = resolveComponent('Comp', this)
    return createFragment([
    createComponentVNode(Comp, null, null, 0 /* no children */),
    createElementVNode('div', null, [
    createElementVNode('span', null, null, 0 /* no children */)
    ], 2 /* single vnode child */)
    ], 8 /* multiple non-keyed children */)
    }
    Compiler Output
    Element Type Detection

    View Slide

  55. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan




    Template
    render() {
    const Comp = resolveComponent('Comp', this)
    return createFragment([
    createComponentVNode(Comp, null, null, 0 /* no children */),
    createElementVNode('div', null, [
    createElementVNode('span', null, null, 0 /* no children */)
    ], 2 /* single vnode child */)
    ], 8 /* multiple non-keyed children */)
    }
    Compiler Output
    Monomorphic Calls

    View Slide

  56. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan




    Template
    render() {
    const Comp = resolveComponent('Comp', this)
    return createFragment([
    createComponentVNode(Comp, null, null, 0 /* no children */),
    createElementVNode('div', null, [
    createElementVNode('span', null, null, 0 /* no children */)
    ], 2 /* single vnode child */)
    ], 8 /* multiple non-keyed children */)
    }
    Compiler Output
    Monomorphic Calls

    View Slide

  57. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan




    Template
    render() {
    const Comp = resolveComponent('Comp', this)
    return createFragment([
    createComponentVNode(Comp, null, null, 0 /* no children */),
    createElementVNode('div', null, [
    createElementVNode('span', null, null, 0 /* no children */)
    ], 2 /* single vnode child */)
    ], 8 /* multiple non-keyed children */)
    }
    Compiler Output
    Monomorphic Calls

    View Slide

  58. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan




    Template
    render() {
    const Comp = resolveComponent('Comp', this)
    return createFragment([
    createComponentVNode(Comp, null, null, 0 /* no children */),
    createElementVNode('div', null, [
    createElementVNode('span', null, null, 0 /* no children */)
    ], 2 /* single vnode child */)
    ], 8 /* multiple non-keyed children */)
    }
    Compiler Output
    Monomorphic Calls

    View Slide

  59. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    createElementVNode('span', null, null, 0 /* no children */)

    View Slide

  60. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    createElementVNode('span', null, null, 0 /* no children */)

    View Slide

  61. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    createElementVNode('span', null, [ ...], 0 /* no children */)

    View Slide

  62. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    createElementVNode('span', null, [ ...], 0 /* no children */)

    View Slide

  63. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan




    Template
    render() {
    const Comp = resolveComponent('Comp', this)
    return createFragment([
    createComponentVNode(Comp, null, null, 0 /* no children */),
    createElementVNode('div', null, [
    createElementVNode('span', null, null, 0 /* no children */)
    ], 2 /* single vnode child */)
    ], 8 /* multiple non-keyed children */)
    }
    Compiler Output
    Component Fast Paths

    View Slide

  64. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan




    Template
    render() {
    const Comp = resolveComponent('Comp', this)
    return createFragment([
    createComponentVNode(Comp, null, null, 0 /* no children */),
    createElementVNode('div', null, [
    createElementVNode('span', null, null, 0 /* no children */)
    ], 2 /* single vnode child */)
    ], 8 /* multiple non-keyed children */)
    }
    Compiler Output
    Component Fast Paths

    View Slide

  65. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    {{ hello }}

    function render() {
    return h(Comp, null, {
    default: [h('div', this.hello)]
    }, 16 /* compiler generated slots */)
    }
    Template
    Optimised Slot Generation
    Compiled Output

    View Slide

  66. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    {{ hello }}

    function render() {
    return h(Comp, null, {
    default: [h('div', this.hello)]
    }, 16 /* compiler generated slots */)
    }
    Template
    Optimised Slot Generation
    Compiled Output

    View Slide

  67. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    {{ hello }}

    function render() {
    return h(Comp, null, {
    default: () => [h('div', this.hello)]
    }, 16 /* compiler generated slots */)
    }
    Template
    Optimised Slot Generation
    Compiled Output

    View Slide

  68. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan


    Static


    {{ dynamic }}


    Template
    function render() {
    return createElementVNode('div', null, [
    createElementVNode(
    'span', { class: 'foo' },
    [createTextVNode('static')], 0
    ),
    createElementVNode(
    'span', null,
    [createTextVNode(this.dynamic)], 0
    ),
    ])
    }
    Compiler Output
    Static Tree Hoisting

    View Slide

  69. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan


    Static


    {{ dynamic }}


    Template
    function render() {
    return createElementVNode('div', null, [
    createElementVNode(
    'span', { class: 'foo' },
    [createTextVNode('static')], 0
    ),
    createElementVNode(
    'span', null,
    [createTextVNode(this.dynamic)], 0
    ),
    ])
    }
    Compiler Output
    Static Tree Hoisting

    View Slide

  70. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan


    Static


    {{ dynamic }}


    Template
    function render() {
    return createElementVNode('div', null, [
    createElementVNode(
    'span', { class: 'foo' },
    [createTextVNode('static')], 0
    ),
    createElementVNode(
    'span', null,
    [createTextVNode(this.dynamic)], 0
    ),
    ])
    }
    Compiler Output
    Static Tree Hoisting

    View Slide

  71. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan


    Static


    {{ dynamic }}


    Template
    const __static1 = createElementVNode(
    'span', { class: 'foo' },
    [createTextVNode('static')], 0
    )
    function render() {
    return createElementVNode('div', null, [
    __static1,
    createElementVNode(
    'span', null,
    [createTextVNode(this.dynamic)], 0
    ),
    ])
    }
    Compiler Output
    Static Tree Hoisting

    View Slide

  72. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    const __static1 = createElementVNode(
    'span', { class: 'foo' },
    [createTextVNode('static')], 0
    )
    function render() {
    return createElementVNode('div', null, [
    __static1,
    createElementVNode(
    'span', null,
    [createTextVNode(this.dynamic)], 0
    ),
    ])
    }
    Compiler Output
    Static Tree Hoisting


    Static


    {{ dynamic }}


    Template

    View Slide

  73. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    {{ state }}

    Template
    function render() {
    return createElementVNode(
    'div',
    { id: 'foo', class: 'bar' },
    [createTextVNode(this.state)],
    0
    )
    }
    Compiler Output
    Static Props Hoisting

    View Slide

  74. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    {{ state }}

    Template
    function render() {
    return createElementVNode(
    'div',
    { id: 'foo', class: 'bar' },
    [createTextVNode(this.state)],
    0
    )
    }
    Compiler Output
    Static Props Hoisting

    View Slide

  75. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    {{ state }}

    Template
    const __static1 = {
    id: 'foo', class: 'bar'
    }
    function render() {
    return createElementVNode(
    'div',
    __static1,
    [createTextVNode(this.state)],
    0
    )
    }
    Compiler Output
    Static Props Hoisting

    View Slide

  76. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    Template
    function render() {
    const Comp = resolveComponent('Comp', this)
    return createComponentVNode(Comp, {
    onEvent: $event => { this.count ++ }
    }, null, 0)
    }
    Compiler Output
    Inline Event Handler Hoisting

    View Slide

  77. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    Template
    function render() {
    const Comp = resolveComponent('Comp', this)
    return createComponentVNode(Comp, {
    onEvent: $event => { this.count ++ }
    }, null, 0)
    }
    Compiler Output
    Inline Event Handler Hoisting

    View Slide

  78. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    Template
    const __handler1 = function ($event) {
    this.count ++
    }
    function render() {
    const Comp = resolveComponent('Comp', this)
    return createComponentVNode(Comp, {
    onEvent: getBoundFunction( __handler1, this)
    }, null, 0)
    }
    Compiler Output
    Inline Event Handler Hoisting

    View Slide

  79. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Faster Virtual DOM

    View Slide

  80. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    New Diffing Algorithm

    View Slide

  81. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  82. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  83. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  84. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"
    -> Diff children of

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  85. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"
    -> Diff children of
    -> Diff

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  86. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"
    -> Diff children of
    -> Diff
    -> Diff class="text"

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  87. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"
    -> Diff children of
    -> Diff
    -> Diff class="text"
    -> Diff children of

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  88. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"
    -> Diff children of
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff Lorem ipsum

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  89. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"
    -> Diff children of
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff Lorem ipsum
    -> Diff

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  90. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"
    -> Diff children of
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff Lorem ipsum
    -> Diff
    -> Diff class="text"

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  91. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"
    -> Diff children of
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff Lorem ipsum
    -> Diff
    -> Diff class="text"
    -> Diff children of

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  92. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"
    -> Diff children of
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff Lorem ipsum
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff {{ message }}

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  93. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"
    -> Diff children of
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff Lorem ipsum
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff {{ message }}
    -> Diff

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  94. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"
    -> Diff children of
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff Lorem ipsum
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff {{ message }}
    -> Diff
    -> Diff class="text"

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  95. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"
    -> Diff children of
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff Lorem ipsum
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff {{ message }}
    -> Diff
    -> Diff class="text"
    -> Diff children of

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  96. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id="content"
    -> Diff children of
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff Lorem ipsum
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff {{ message }}
    -> Diff
    -> Diff class="text"
    -> Diff children of
    -> Diff Lorem ipsum

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  97. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff id=“content"
    -> Diff children of
    -> Diff
    -> Diff class=“text"
    -> Diff children of
    -> Diff Lorem ipsum
    -> Diff
    -> Diff class=“text"
    -> Diff children of
    -> Diff {{ message }}
    -> Diff
    -> Diff class=“text"
    -> Diff children of
    -> Diff Lorem ipsum

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  98. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff {{ message }}

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  99. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff {{ message }}

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  100. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff {{ message }}

    Lorem ipsum

    Lorem ipsum
    {{ message }}


    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  101. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff {{ message }}

    Lorem ipsum

    Lorem ipsum
    {{ message }}


    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  102. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff
    -> Diff {{ message }}

    Lorem ipsum

    Lorem ipsum
    {{ message }}


    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  103. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    -> Diff every
    -> Diff every {{ message }}

    Lorem ipsum

    Lorem ipsum
    {{ message }}


    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View Slide

  104. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    View Slide

  105. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    View Slide

  106. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    View Slide

  107. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    View Slide

  108. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    View Slide

  109. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Smaller Bundle

    View Slide

  110. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    ~10kb
    (gzipped)

    View Slide

  111. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    https://github.com/vuejs/rfcs/blob/treeshaking/active-rfcs/0000-global-api-treeshaking.md
    import Vue from 'vue'
    Vue.nextTick(() => {
    // ...
    })

    View Slide

  112. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    https://github.com/vuejs/rfcs/blob/treeshaking/active-rfcs/0000-global-api-treeshaking.md
    import { nextTick } from 'vue'
    nextTick(() => {
    // ...
    })

    View Slide

  113. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    https://github.com/vuejs/rfcs/blob/treeshaking/active-rfcs/0000-global-api-treeshaking.md
    import {
    Transition,
    TransitionGroup,
    vShow,
    ...
    } from 'vue'
    Tree-Shaking
    Friendly

    View Slide

  114. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    https://github.com/vuejs/rfcs/blob/treeshaking/active-rfcs/0000-global-api-treeshaking.md
    import {
    Transition,
    TransitionGroup,
    vShow,
    ...
    } from 'vue'
    Tree-Shaking
    Friendly

    View Slide

  115. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Less than 10kb
    (gzipped)

    View Slide

  116. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Finer DX

    View Slide

  117. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    <br/>export default {<br/>props: ['count'],<br/>renderTriggered(event) {<br/>debugger<br/>}<br/>}<br/>

    {{ count }}

    Render Causation

    View Slide

  118. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    <br/>export default {<br/>props: ['count'],<br/>renderTriggered(event) {<br/>debugger<br/>}<br/>}<br/>

    {{ count }}

    Render Causation

    View Slide

  119. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    <br/>export default {<br/>props: ['count'],<br/>renderTriggered(event) {<br/>debugger<br/>}<br/>}<br/>

    {{ count }}

    Render Causation

    View Slide

  120. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Better Warning Traces

    View Slide

  121. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Template Source-maps

    View Slide

  122. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Easier for Native

    View Slide

  123. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { createRenderer } from '@vue/runtime-core'
    const { render } = createRenderer({
    ...
    })

    View Slide

  124. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { createRenderer } from '@vue/runtime-core'
    const { render } = createRenderer({
    ...
    })

    View Slide

  125. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { createRenderer } from '@vue/runtime-core'
    const { render } = createRenderer({
    ...
    })

    View Slide

  126. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Simpler to Contribute

    View Slide

  127. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    View Slide

  128. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan

    View Slide

  129. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Vue 3.0 uses TypeScript

    View Slide

  130. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Vue 3.0 uses TypeScript
    But you don’t have to!

    View Slide

  131. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    http://github.com/vuejs/rfcs

    View Slide

  132. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    http://github.com/vuejs/rfcs
    Voice your concerns!

    View Slide

  133. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Composition API

    View Slide

  134. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { reactive, computed } from 'vue'
    export default {
    setup() {
    const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
    })
    function increment() {
    state.count ++
    }
    return { state, increment }
    }
    }

    View Slide

  135. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { reactive, computed } from 'vue'
    export default {
    setup() {
    const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
    })
    function increment() {
    state.count ++
    }
    return { state, increment }
    }
    }

    View Slide

  136. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { reactive, computed } from 'vue'
    export default {
    setup() {
    const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
    })
    function increment() {
    state.count ++
    }
    return { state, increment }
    }
    }

    View Slide

  137. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { reactive, computed } from 'vue'
    export default {
    setup() {
    const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
    })
    function increment() {
    state.count ++
    }
    return { state, increment }
    }
    }

    View Slide

  138. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { reactive, computed } from 'vue'
    export default {
    setup() {
    const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
    })
    function increment() {
    state.count ++
    }
    return { state, increment }
    }
    }

    View Slide

  139. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { reactive, computed } from 'vue'
    export default {
    setup() {
    const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
    })
    function increment() {
    state.count ++
    }
    return { state, increment }
    }
    }

    View Slide

  140. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    return { state, increment }
    }
    }

    Count is: {{ state.count }},
    double is: {{ state.double }}

    View Slide

  141. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    return { state, increment }
    }
    }

    Count is: {{ state.count }},
    double is: {{ state.double }}

    View Slide

  142. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { reactive, computed } from 'vue'
    export default {
    setup() {
    const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
    })
    function increment() {
    state.count ++
    }
    return { state, increment }
    }
    }

    View Slide

  143. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { reactive, computed } from 'vue'
    function useCounter() {
    const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
    })
    function increment() {
    state.count ++
    }
    return { state, increment }
    }
    export default {
    setup() {
    const { state, increment } = useCounter()

    View Slide

  144. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { reactive, computed } from 'vue'
    function useCounter() {
    const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
    })
    function increment() {
    state.count ++
    }
    return { state, increment }
    }
    export default {
    setup() {
    const { state, increment } = useCounter()

    View Slide

  145. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    state.count ++
    }
    return { state, increment }
    }
    export default {
    setup() {
    const { state, increment } = useCounter()
    return { state, increment }
    }
    }

    View Slide

  146. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    return { state, increment }
    }
    }

    Count is: {{ state.count }},
    double is: {{ state.double }}

    View Slide

  147. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { reactive, computed } from 'vue'
    export function useCounter() {
    const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
    })
    function increment() {
    state.count ++
    }
    return { state, increment }
    }
    counter.js

    View Slide

  148. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { useCounter } from './counter'
    export default {
    setup() {
    const { state, increment } = useCounter()
    return { state, increment }
    }
    }

    Count is: {{ state.count }},
    double is: {{ state.double }}

    App.vue

    View Slide

  149. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { useCounter } from './counter'
    export default {
    setup() {
    const { state, increment } = useCounter()
    return { state, increment }
    }
    }

    Count is: {{ state.count }},
    double is: {{ state.double }}

    App.vue

    View Slide

  150. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { useCounter } from './counter'
    export default {
    setup() {
    const { state, increment } = useCounter()
    return { state, increment }
    }
    }

    Count is: {{ state.count }},
    double is: {{ state.double }}

    App.vue

    View Slide

  151. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { useCounter } from './counter'
    export default {
    setup() {
    const { state, increment } = useCounter()
    return { state, increment }
    }
    }

    Count is: {{ state.count }},
    double is: {{ state.double }}

    App.vue

    View Slide

  152. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { useCounter } from './counter'
    export default {
    setup() {
    const { state: counter, increment } = useCounter()
    return { counter, increment }
    }
    }

    Count is: {{ counter.count }},
    double is: {{ counter.double }}

    App.vue

    View Slide

  153. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { useCounter } from './counter'
    export default {
    setup() {
    const { state: counter, increment } = useCounter()
    return { counter, increment }
    }
    }

    Count is: {{ counter.count }},
    double is: {{ counter.double }}

    App.vue

    View Slide

  154. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    import { useCounter } from './counter'
    export default {
    setup() {
    const { state: counter, increment } = useCounter()
    return { counter, increment }
    }
    }

    Count is: {{ counter.count }},
    double is: {{ counter.double }}

    App.vue

    View Slide

  155. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    http://vue-composition-api-rfc.netlify.com/

    View Slide

  156. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Questions?

    View Slide

  157. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Frequently Asked Questions

    View Slide

  158. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Do we need to learn
    TypeScript now?

    View Slide

  159. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Does 3.0 break
    my applications?

    View Slide

  160. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    Do we have two
    ways of writing
    components?

    View Slide

  161. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    @znck0

    View Slide

  162. Future of Vue
    @znck0
    JSFoo: VueDay 2019
    Rahul Kadyan
    @gustojs

    View Slide