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
36
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
310
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
460
Collocation in Modern Web
znck
0
30
Choosing Vue.js
znck
0
26
Other Decks in Programming
See All in Programming
null or undefined
susisu
19
4k
初めてのiOS関連GitHub ActionsをMarketplaceに公開するまでの実録
konifar
3
200
健康第一!MetricKitで始めるアプリの健康診断 / App Health Checkups Starting with MetricKit
nekowen
4
790
私の考える初学者がBlazorできるまでの学習方法
tomokusaba
1
240
iOSDC 2024
auramagi
3
590
BQ+dbt+Lookerを用いた、月間800億件以上の広告リクエストに対するデータモデリング
hanon52_
4
990
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
100
めざせ!WKWebViewマスター! / WKWebView Master
marcy731
3
480
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
510
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
2
240
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
370
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
580
Featured
See All Featured
What's new in Ruby 2.0
geeforr
340
31k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Build The Right Thing And Hit Your Dates
maggiecrowley
29
2.2k
How to name files
jennybc
75
97k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
A Philosophy of Restraint
colly
202
16k
Gamification - CAS2011
davidbonilla
79
4.9k
The Mythical Team-Month
searls
218
43k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
How STYLIGHT went responsive
nonsquared
93
5.1k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
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