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
53
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
510
Collocation in Modern Web
znck
0
47
Choosing Vue.js
znck
0
42
Other Decks in Programming
See All in Programming
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1.1k
Fiber Scheduler vs. General-Purpose Parallel Client
hayaokimura
1
110
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
1
170
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
4
1.1k
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
160
GitHub Copilot for Azureを使い倒したい
ymd65536
1
140
小田原でみんなで一句詠みたいな #phpcon_odawara
stefafafan
0
350
Vibe Codingをせずに Clineを使っている
watany
17
6.3k
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
410
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
160
趣味全開のAITuber開発
kokushin
0
200
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
100
Featured
See All Featured
Unsuck your backbone
ammeep
670
57k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
Fireside Chat
paigeccino
37
3.4k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Code Reviewing Like a Champion
maltzj
522
40k
Bash Introduction
62gerente
611
210k
Docker and Python
trallard
44
3.3k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
The Cult of Friendly URLs
andyhume
78
6.3k
The Pragmatic Product Professional
lauravandoore
33
6.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.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