Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React to Vue: why and how?
Search
Rahul Kadyan
March 17, 2018
Programming
0
54
React to Vue: why and how?
A quick guide on moving from React to Vue.
Rahul Kadyan
March 17, 2018
Tweet
Share
More Decks by Rahul Kadyan
See All by Rahul Kadyan
Inversion of Control in a Vue Application
znck
0
340
New Vue. New Compiler. Let's Unpack
znck
4
2.5k
Head first into composition API
znck
0
150
Future of Vue – JSFoo VueDay 2019
znck
0
520
Collocation in Modern Web
znck
0
48
Choosing Vue.js
znck
0
44
Other Decks in Programming
See All in Programming
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
230
UMAPをざっくりと理解 / Overview of UMAP
kaityo256
PRO
3
1.4k
VitestのIn-Source Testingが便利
taro28
8
2.4k
Contribute to Comunities | React Tokyo Meetup #4 LT
sasagar
0
590
The New Developer Workflow: How AI Transforms Ideas into Code
danielsogl
0
110
Носок на сок
bo0om
0
1.1k
Fiber Scheduler vs. General-Purpose Parallel Client
hayaokimura
1
290
In geheimer Mission: AI Agents entwickeln
joergneumann
0
100
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
130
The Nature of Complexity in John Ousterhout’s Philosophy of Software Design
philipschwarz
PRO
0
160
Cursorを活用したAIプログラミングについて 入門
rect
0
160
Improve my own Ruby
sisshiki1969
0
100
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.5k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
590
How GitHub (no longer) Works
holman
314
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
BBQ
matthewcrist
88
9.6k
RailsConf 2023
tenderlove
30
1.1k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Transcript
export default class SayHello extends Component { render () {
return ( <div id='hello'> <h1>{'Hello Everyone!'} </h1> <p>{'Welcome to ReactFoo Hyderabad!'} </p> </div> ) } }
React to Vue
react | rɪˈakt | verb [no object] 1 act in
response to something; respond in a particular way
Myths & Misconceptions
Templates are bad JSX Mutable State Directives Two-way Binding Watchers
Templates The Good · The Bad · The Ugly •
Approachable • Choice of Dialects • Static & Limited • Week Tooling Support • Scope
None
Event Modifiers HTML Preprocessor Reusing existing code
JSX shouldn’t be reason to choose a library. • Flexible
• Advanced Tooling • Verbosity • Static Optimisation • Steep Learning Curve
export default class SayHello extends Component { render () {
return ( <div id='hello'> <h1>{'Hello Everyone!'} </h1> <p>{'Welcome to ReactFoo Hyderabad!’} </p> </div> ) } }
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> ) } }
Mutable State It’s actually Observed State. • Dependency Tracking •
Computed Properties • Watchable State • Required Re-renders
None
Directives are not so bad. • Necessary Extension • Customise
Compilation • Concerns Separation • Can mutate DOM • YOU DON’T NEED THEM
Internationalisation ACL
Two-way Binding is just Syntax Sugar. • Reduced Boilerplate •
Edge-case handling
Syntactic Sugar Modifiers
Watchers add explicit dependencies on Observed 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 you get with Vue ?
Single File Components
Scoped Styles
Content Distribution
Async Component Transitions Universal SSR
Take Away Vue is similar to React but reactive. Few
different design decisions. Created with high regards to Developer Experience.
@znck0 Twitter znck Github znck.me Website vue-bangalore Meetup