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
63
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
350
New Vue. New Compiler. Let's Unpack
znck
4
2.5k
Head first into composition API
znck
0
160
Future of Vue – JSFoo VueDay 2019
znck
0
520
Collocation in Modern Web
znck
0
54
Choosing Vue.js
znck
0
49
Other Decks in Programming
See All in Programming
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
920
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
250
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
750
Hack Claude Code with Claude Code
choplin
3
1.2k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
4
760
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
670
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
540
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
6
3.2k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
440
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
4
6.6k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
240
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Writing Fast Ruby
sferik
628
62k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How STYLIGHT went responsive
nonsquared
100
5.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Producing Creativity
orderedlist
PRO
346
40k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Invisible Side of Design
smashingmag
301
51k
Rails Girls Zürich Keynote
gr2m
94
14k
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