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
59
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
52
Choosing Vue.js
znck
0
48
Other Decks in Programming
See All in Programming
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
190
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
470
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
100
Parallel::Pipesの紹介
skaji
2
900
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
130
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
730
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
370
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
130
ReadMoreTextView
fornewid
0
240
SODA - FACT BOOK
sodainc
1
680
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
6
1.4k
生成AIで日々のエラー調査を進めたい
yuyaabo
0
480
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
46
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
910
Mobile First: as difficult as doing things right
swwweet
223
9.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Scaling GitHub
holman
459
140k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
GitHub's CSS Performance
jonrohan
1031
460k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Embracing the Ebb and Flow
colly
85
4.7k
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