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

Future of Vue – JSFoo VueDay 2019

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

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    than Object.definePrototype

    View full-size slide

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

    View full-size slide

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


    View full-size slide

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

    Half Memory

    View full-size 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 full-size slide

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

    View full-size slide

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

    Hello World!

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    Lorem ipsum
    {{ message }}
    Lorem ipsum

    Template Diffing Algorithm Steps
    New Diffing Algorithm

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

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

    View full-size slide

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

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide