Save 37% off PRO during our Black Friday Sale! »

React to Vue: why and how?

React to Vue: why and how?

A quick guide on moving from React to Vue.

1135c452bcb851741181b804cd184972?s=128

Rahul Kadyan

March 17, 2018
Tweet

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