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
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
480
Collocation in Modern Web
znck
0
34
Choosing Vue.js
znck
0
28
Other Decks in Programming
See All in Programming
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
430
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
340
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
役立つログに取り組もう
irof
26
8.6k
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
250
EventSourcingの理想と現実
wenas
6
2.1k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
24
5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Typedesign – Prime Four
hannesfritz
39
2.4k
4 Signs Your Business is Dying
shpigford
180
21k
Documentation Writing (for coders)
carmenintech
65
4.4k
RailsConf 2023
tenderlove
29
880
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Designing the Hi-DPI Web
ddemaree
280
34k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Building Your Own Lightsaber
phodgson
102
6k
How GitHub (no longer) Works
holman
311
140k
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