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
68
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
360
New Vue. New Compiler. Let's Unpack
znck
4
2.5k
Head first into composition API
znck
0
170
Future of Vue – JSFoo VueDay 2019
znck
0
530
Collocation in Modern Web
znck
0
60
Choosing Vue.js
znck
0
53
Other Decks in Programming
See All in Programming
概念モデル→論理モデルで気をつけていること
sunnyone
2
170
Rancher と Terraform
fufuhu
2
400
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.2k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
300
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
520
Deep Dive into Kotlin Flow
jmatsu
1
340
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
160
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
print("Hello, World")
eddie
2
530
アセットのコンパイルについて
ojun9
0
120
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
110
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.5k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to Ace a Technical Interview
jacobian
279
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Code Reviewing Like a Champion
maltzj
525
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
A designer walks into a library…
pauljervisheath
207
24k
KATA
mclloyd
32
14k
Being A Developer After 40
akosma
90
590k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.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