React to Vue: why and how?

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
7. None

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
13. None

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