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
130
Future of Vue – JSFoo VueDay 2019
znck
0
500
Collocation in Modern Web
znck
0
35
Choosing Vue.js
znck
0
29
Other Decks in Programming
See All in Programming
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
240
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.4k
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
950
AHC041解説
terryu16
0
390
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
0
100
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
1.9k
Amazon Nova Reelの可能性
hideg
0
200
為你自己學 Python
eddie
0
520
Androidアプリの One Experience リリース
nein37
0
1.2k
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
7
1.4k
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
940
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
222
9k
Practical Orchestrator
shlominoach
186
10k
We Have a Design System, Now What?
morganepeng
51
7.3k
Optimizing for Happiness
mojombo
376
70k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
A better future with KSS
kneath
238
17k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
Scaling GitHub
holman
459
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
A Philosophy of Restraint
colly
203
16k
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