Slide 1

Slide 1 text

export default class SayHello extends Component { render () { return (

{'Hello Everyone!'}

{'Welcome to ReactFoo Hyderabad!'}

) } }

Slide 2

Slide 2 text

React to Vue

Slide 3

Slide 3 text

react | rɪˈakt | verb [no object] 1 act in response to something; respond in a particular way

Slide 4

Slide 4 text

Myths & Misconceptions

Slide 5

Slide 5 text

Templates are bad JSX Mutable State Directives Two-way Binding Watchers

Slide 6

Slide 6 text

Templates The Good · The Bad · The Ugly • Approachable • Choice of Dialects • Static & Limited • Week Tooling Support • Scope

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Event Modiﬁers HTML Preprocessor Reusing existing code

Slide 9

Slide 9 text

JSX shouldn’t be reason to choose a library. • Flexible • Advanced Tooling • Verbosity • Static Optimisation • Steep Learning Curve

Slide 10

Slide 10 text

export default class SayHello extends Component { render () { return (

{'Hello Everyone!'}

{'Welcome to ReactFoo Hyderabad!’}

) } }

Slide 11

Slide 11 text

import Component from 'vue' import { Component as VueComponent } from 'vue-class-component' @VueComponent export default class SayHello extends Component { render () { return (

{'Hello Everyone!'}

{'Welcome to ReactFoo Hyderabad!'}

) } }

Slide 12

Slide 12 text

Mutable State It’s actually Observed State. • Dependency Tracking • Computed Properties • Watchable State • Required Re-renders

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Directives are not so bad. • Necessary Extension • Customise Compilation • Concerns Separation • Can mutate DOM • YOU DON’T NEED THEM

Slide 15

Slide 15 text

Internationalisation ACL

Slide 16

Slide 16 text

Two-way Binding is just Syntax Sugar. • Reduced Boilerplate • Edge-case handling

Slide 17

Slide 17 text

Syntactic Sugar Modiﬁers

Slide 18

Slide 18 text

Watchers add explicit dependencies on Observed State. • Explicit Dependency • Reactive

Slide 19

Slide 19 text

Watchers

Slide 20

Slide 20 text

Shared Features • Declarative Rendering • Component Composition • Virtual DOM • IDE Support • Robust Testing Toolkit • State Management • Client Side Routing

Slide 21

Slide 21 text

What do you get with Vue ?

Slide 22

Slide 22 text

Single File Components

Slide 23

Slide 23 text

Scoped Styles

Slide 24

Slide 24 text

Content Distribution

Slide 25

Slide 25 text

Async Component Transitions Universal SSR

Slide 26

Slide 26 text

Take Away Vue is similar to React but reactive. Few different design decisions. Created with high regards to Developer Experience.

Slide 27

Slide 27 text

@znck0 Twitter znck Github znck.me Website vue-bangalore Meetup