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
60
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
350
New Vue. New Compiler. Let's Unpack
znck
4
2.5k
Head first into composition API
znck
0
160
Future of Vue – JSFoo VueDay 2019
znck
0
520
Collocation in Modern Web
znck
0
54
Choosing Vue.js
znck
0
48
Other Decks in Programming
See All in Programming
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
310
A comprehensive view of refactoring
marabesi
0
970
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
XP, Testing and ninja testing
m_seki
3
170
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
120
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
840
WindowInsetsだってテストしたい
ryunen344
1
190
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
220
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Balancing Empowerment & Direction
lara
1
360
Optimizing for Happiness
mojombo
379
70k
Raft: Consensus for Rubyists
vanstee
140
7k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Typedesign – Prime Four
hannesfritz
42
2.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to train your dragon (web standard)
notwaldorf
92
6.1k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
KATA
mclloyd
29
14k
Designing for humans not robots
tammielis
253
25k
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