A quick guide on moving from React to Vue.
export default class SayHello extends Component {render () {return ({'Hello Everyone!'} {'Welcome to ReactFoo Hyderabad!'} )}}
View Slide
React to Vue
react | rɪˈakt |verb [no object]1 act in response to something; respond in a particular way
Myths & Misconceptions
Templates are badJSXMutable StateDirectivesTwo-way BindingWatchers
TemplatesThe Good · The Bad · The Ugly• Approachable• Choice of Dialects• Static & Limited• Week Tooling Support• Scope
Event ModifiersHTML PreprocessorReusing existing code
JSXshouldn’t be reason to choose alibrary.• Flexible• Advanced Tooling• Verbosity• Static Optimisation• Steep Learning Curve
export default class SayHello extends Component {render () {return ({'Hello Everyone!'} {'Welcome to ReactFoo Hyderabad!’} )}}
import Component from 'vue'import { Component as VueComponent } from 'vue-class-component'@VueComponentexport default class SayHello extends Component {render () {return ({'Hello Everyone!'} {'Welcome to ReactFoo Hyderabad!'} )}}
Mutable StateIt’s actually Observed State.• Dependency Tracking• Computed Properties• Watchable State• Required Re-renders
Directivesare not so bad.• Necessary Extension• Customise Compilation• Concerns Separation• Can mutate DOM• YOU DON’T NEED THEM
InternationalisationACL
Two-way Bindingis just Syntax Sugar.• Reduced Boilerplate• Edge-case handling
Syntactic SugarModifiers
Watchersadd explicit dependencies onObserved State.• Explicit Dependency• Reactive
Watchers
Shared Features• Declarative Rendering• Component Composition• Virtual DOM• IDE Support• Robust Testing Toolkit• State Management• Client Side Routing
What do youget withVue?
Single File Components
Scoped Styles
Content Distribution
Async ComponentTransitionsUniversal SSR
Take AwayVue is similar to React but reactive.Few different design decisions.Created with high regards to Developer Experience.
@znck0TwitterznckGithubznck.meWebsitevue-bangaloreMeetup