Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 ( <div id='hello'> <h1>{'Hello Everyone!'} </h1> <p>{'Welcome to ReactFoo Hyderabad!'} </p> </div> ) } }
  2. react | rɪˈakt | verb [no object] 1 act in

    response to something; respond in a particular way
  3. Templates The Good · The Bad · The Ugly •

    Approachable • Choice of Dialects • Static & Limited • Week Tooling Support • Scope
  4. JSX shouldn’t be reason to choose a library. • Flexible

    • Advanced Tooling • Verbosity • Static Optimisation • Steep Learning Curve
  5. export default class SayHello extends Component { render () {

    return ( <div id='hello'> <h1>{'Hello Everyone!'} </h1> <p>{'Welcome to ReactFoo Hyderabad!’} </p> </div> ) } }
  6. 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> ) } }
  7. Mutable State It’s actually Observed State. • Dependency Tracking •

    Computed Properties • Watchable State • Required Re-renders
  8. Directives are not so bad. • Necessary Extension • Customise

    Compilation • Concerns Separation • Can mutate DOM • YOU DON’T NEED THEM
  9. Shared Features • Declarative Rendering • Component Composition • Virtual

    DOM • IDE Support • Robust Testing Toolkit • State Management • Client Side Routing
  10. Take Away Vue is similar to React but reactive. Few

    different design decisions. Created with high regards to Developer Experience.