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
42
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
330
New Vue. New Compiler. Let's Unpack
znck
4
2.5k
Head first into composition API
znck
0
130
Future of Vue – JSFoo VueDay 2019
znck
0
510
Collocation in Modern Web
znck
0
40
Choosing Vue.js
znck
0
33
Other Decks in Programming
See All in Programming
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
940
AWS Step Functions は CDK で書こう!
konokenj
4
620
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
280
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
Ça bouge du côté des animations CSS !
goetter
2
150
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
220
color-scheme: light dark; を完全に理解する
uhyo
7
500
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
390
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
BBQ
matthewcrist
87
9.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
A Modern Web Designer's Workflow
chriscoyier
693
190k
For a Future-Friendly Web
brad_frost
176
9.6k
Unsuck your backbone
ammeep
669
57k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
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