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
38
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
320
New Vue. New Compiler. Let's Unpack
znck
4
2.5k
Head first into composition API
znck
0
120
Future of Vue – JSFoo VueDay 2019
znck
0
480
Collocation in Modern Web
znck
0
35
Choosing Vue.js
znck
0
28
Other Decks in Programming
See All in Programming
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
初めてDefinitelyTypedにPRを出した話
syumai
0
420
最新TCAキャッチアップ
0si43
0
200
Jakarta EE meets AI
ivargrimstad
0
250
受け取る人から提供する人になるということ
little_rubyist
0
250
イベント駆動で成長して委員会
happymana
1
340
Ethereum_.pdf
nekomatu
0
470
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
ヤプリ新卒SREの オンボーディング
masaki12
0
130
Outline View in SwiftUI
1024jp
1
340
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
520
39k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
How STYLIGHT went responsive
nonsquared
95
5.2k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Side Projects
sachag
452
42k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
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