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
69
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
370
New Vue. New Compiler. Let's Unpack
znck
4
2.6k
Head first into composition API
znck
0
170
Future of Vue – JSFoo VueDay 2019
znck
0
540
Collocation in Modern Web
znck
0
63
Choosing Vue.js
znck
0
54
Other Decks in Programming
See All in Programming
モテるデスク環境
mozumasu
3
280
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
CSC509 Lecture 06
javiergs
PRO
0
260
AkarengaLT vol.38
hashimoto_kei
1
110
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
AI Agent 時代的開發者生存指南
eddie
4
2k
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
CSC305 Lecture 08
javiergs
PRO
0
270
ALL CODE BASE ARE BELONG TO STUDY
uzulla
26
6.6k
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
Software Architecture
hschwentner
6
2.3k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Practical Orchestrator
shlominoach
190
11k
Facilitating Awesome Meetings
lara
56
6.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Git: the NoSQL Database
bkeepers
PRO
431
66k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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