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
67
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
360
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
530
Collocation in Modern Web
znck
0
59
Choosing Vue.js
znck
0
52
Other Decks in Programming
See All in Programming
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
260
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
960
Vibe coding コードレビュー
kinopeee
0
430
自作OSでDOOMを動かしてみた
zakki0925224
1
1.3k
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
120
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
350
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.6k
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.1k
QA x AIエコシステム段階構築作戦
osu
0
260
バイブコーディング × 設計思考
nogu66
0
110
Jakarta EE Meets AI
ivargrimstad
0
670
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
870
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Agile that works and the tools we love
rasmusluckow
329
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Invisible Side of Design
smashingmag
301
51k
How GitHub (no longer) Works
holman
314
140k
A better future with KSS
kneath
239
17k
Fireside Chat
paigeccino
38
3.6k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Done Done
chrislema
185
16k
Faster Mobile Websites
deanohume
308
31k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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