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
37
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
32
Choosing Vue.js
znck
0
27
Other Decks in Programming
See All in Programming
GraphQL あるいは React における自律的なデータ取得について
quramy
11
3k
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
730
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
2
710
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
How to Break into Reading Open Source
kaspth
2
220
Crafting Cross-Platform Adventures: Building a Game Engine with Kotlin Multiplatform
dwursteisen
0
120
私のEbitengineの第一歩
qt_luigi
0
450
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
830
Why Prism?
kddnewton
4
1.7k
XStateでReactに秩序を与えたい
gizm000
0
730
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
490
Featured
See All Featured
How GitHub (no longer) Works
holman
310
140k
The Mythical Team-Month
searls
218
43k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Designing with Data
zakiwarfel
98
5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Clear Off the Table
cherdarchuk
91
320k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
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