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 (
   
   {'Hello Everyone!'}
   {'Welcome to ReactFoo Hyderabad!'}
   
   )
   }
   }
   

   View Slide

2. React to Vue
   

   View Slide

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

   View Slide

4. Myths & Misconceptions
   

   View Slide

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

   View Slide

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

   View Slide

7. View Slide

8. Event Modifiers
   HTML Preprocessor
   Reusing existing code
   

   View Slide

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

   View Slide

10. export default class SayHello extends Component {
    render () {
    return (
    
    {'Hello Everyone!'}
    {'Welcome to ReactFoo Hyderabad!’}
    
    )
    }
    }
    

    View Slide

11. 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!'}
    
    )
    }
    }
    

    View Slide

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

    View Slide

13. View Slide

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

    View Slide

15. Internationalisation
    ACL
    

    View Slide

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

    View Slide

17. Syntactic Sugar
    Modifiers
    

    View Slide

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

    View Slide

19. Watchers
    

    View Slide

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

    View Slide

21. What do you
    get with
    Vue
    ?
    

    View Slide

22. Single File Components
    

    View Slide

23. Scoped Styles
    

    View Slide

24. Content Distribution
    

    View Slide

25. Async Component
    Transitions
    Universal SSR
    

    View Slide

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

    View Slide

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

    View Slide