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
32
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
300
New Vue. New Compiler. Let's Unpack
znck
4
2.4k
Head first into composition API
znck
0
110
Future of Vue – JSFoo VueDay 2019
znck
0
430
Collocation in Modern Web
znck
0
27
Choosing Vue.js
znck
0
22
Other Decks in Programming
See All in Programming
Git Rebase
bkuhlmann
11
1.6k
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Front-end application development, Symfony-style(s)
dunglas
2
2k
PostmanでAPIの動作確認が楽になった話
h455h1
0
160
Goのエラースタックトレースの歴史と今後
sonatard
7
1.1k
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
330
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
PHPはいつから死んでいるかの調査
chiroruxx
1
380
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.2k
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
エンターテイメント業界で利用されるAWS
demuyan
0
210
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
91
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Building Your Own Lightsaber
phodgson
99
5.7k
The Invisible Side of Design
smashingmag
294
49k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
The Cult of Friendly URLs
andyhume
74
5.7k
Design by the Numbers
sachag
274
18k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Side Projects
sachag
451
41k
Typedesign – Prime Four
hannesfritz
36
2.1k
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