Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Slide 21

Slide 21 text

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 ... } })

Slide 22

Slide 22 text

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 ... } })

Slide 23

Slide 23 text

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 ... } })

Slide 24

Slide 24 text

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?

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Slide 27

Slide 27 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Faster much faster
 than Object.definePrototype

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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


Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Template / DOM
Hello World!

Slide 40

Slide 40 text

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!

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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 */ [ ...] )

Slide 44

Slide 44 text

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: [ ...] }

Slide 45

Slide 45 text

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!’] )] ) }

Slide 46

Slide 46 text

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!’] )] ) }

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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, ...) ... }

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Lorem ipsum

{{ message }}

Lorem ipsum

Template Diffing Algorithm Steps New Diffing Algorithm

Slide 82

Slide 82 text

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

Lorem ipsum

{{ message }}

Lorem ipsum

Template Diffing Algorithm Steps New Diffing Algorithm

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Lorem ipsum

{{ message }}

Lorem ipsum

Template Diffing Algorithm Steps New Diffing Algorithm

Slide 99

Slide 99 text

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

Lorem ipsum

{{ message }}

Lorem ipsum

Template Diffing Algorithm Steps New Diffing Algorithm

Slide 100

Slide 100 text

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

-> Diff {{ message }}

Lorem ipsum

Lorem ipsum {{ message }}

Template Diffing Algorithm Steps New Diffing Algorithm

Slide 101

Slide 101 text

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

-> Diff {{ message }}

Lorem ipsum

Lorem ipsum {{ message }}

Template Diffing Algorithm Steps New Diffing Algorithm

Slide 102

Slide 102 text

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

-> Diff {{ message }}

Lorem ipsum

Lorem ipsum {{ message }}

Template Diffing Algorithm Steps New Diffing Algorithm

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Slide 105

Slide 105 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Slide 106

Slide 106 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Slide 107

Slide 107 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Slide 108

Slide 108 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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(() => { // ... })

Slide 112

Slide 112 text

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(() => { // ... })

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan export default { props: ['count'], renderTriggered(event) { debugger } }
{{ count }}
Render Causation

Slide 118

Slide 118 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan export default { props: ['count'], renderTriggered(event) { debugger } }
{{ count }}
Render Causation

Slide 119

Slide 119 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan export default { props: ['count'], renderTriggered(event) { debugger } }
{{ count }}
Render Causation

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Slide 128

Slide 128 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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 } } }

Slide 135

Slide 135 text

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 } } }

Slide 136

Slide 136 text

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 } } }

Slide 137

Slide 137 text

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 } } }

Slide 138

Slide 138 text

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 } } }

Slide 139

Slide 139 text

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 } } }

Slide 140

Slide 140 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan return { state, increment } } } Count is: {{ state.count }}, double is: {{ state.double }}

Slide 141

Slide 141 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan return { state, increment } } } Count is: {{ state.count }}, double is: {{ state.double }}

Slide 142

Slide 142 text

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 } } }

Slide 143

Slide 143 text

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()

Slide 144

Slide 144 text

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()

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan return { state, increment } } } Count is: {{ state.count }}, double is: {{ state.double }}

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

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

Slide 151

Slide 151 text

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

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

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

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text

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

Slide 159

Slide 159 text

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

Slide 160

Slide 160 text

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

Slide 161

Slide 161 text

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

Slide 162

Slide 162 text

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