$30 off During Our Annual Pro Sale. View Details »

React to Vue: why and how?

React to Vue: why and how?

A quick guide on moving from React to Vue.

Rahul Kadyan

March 17, 2018
Tweet

More Decks by Rahul Kadyan

Other Decks in Programming

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