React to Vue: why and how?

A quick guide on moving from React to Vue.

Transcript

1. export default class SayHello extends Component { render () { return ( <div id='hello'> <h1>{'Hello Everyone!'} </h1> <p>{'Welcome to ReactFoo Hyderabad!'} </p> </div> ) } }
2. React to Vue
3. react | rɪˈakt | verb [no object] 1 act in response to something; respond in a particular way
4. Myths & Misconceptions
5. Templates are bad JSX Mutable State Directives Two-way Binding Watchers
6. Templates The Good · The Bad · The Ugly • Approachable • Choice of Dialects • Static & Limited • Week Tooling Support • Scope
8. Event Modifiers HTML Preprocessor Reusing existing code
9. JSX shouldn’t be reason to choose a library. • Flexible • Advanced Tooling • Verbosity • Static Optimisation • Steep Learning Curve
10. export default class SayHello extends Component { render () { return ( <div id='hello'> <h1>{'Hello Everyone!'} </h1> <p>{'Welcome to ReactFoo Hyderabad!’} </p> </div> ) } }
11. import Component from 'vue' import { Component as VueComponent } from 'vue-class-component' @VueComponent export default class SayHello extends Component { render () { return ( <div id='hello'> <h1>{'Hello Everyone!'} </h1> <p>{'Welcome to ReactFoo Hyderabad!'} </p> </div> ) } }
12. Mutable State It’s actually Observed State. • Dependency Tracking • Computed Properties • Watchable State • Required Re-renders
14. Directives are not so bad. • Necessary Extension • Customise Compilation • Concerns Separation • Can mutate DOM • YOU DON’T NEED THEM
15. Internationalisation ACL
16. Two-way Binding is just Syntax Sugar. • Reduced Boilerplate • Edge-case handling
17. Syntactic Sugar Modifiers
18. Watchers add explicit dependencies on Observed State. • Explicit Dependency • Reactive
19. Watchers
20. Shared Features • Declarative Rendering • Component Composition • Virtual DOM • IDE Support • Robust Testing Toolkit • State Management • Client Side Routing
21. What do you get with Vue ?
22. Single File Components
23. Scoped Styles
24. Content Distribution
25. Async Component Transitions Universal SSR
26. Take Away Vue is similar to React but reactive. Few different design decisions. Created with high regards to Developer Experience.
27. @znck0 Twitter znck Github znck.me Website vue-bangalore Meetup