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
From Backbone.Views To ReactJs
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Sarmad Sangi
April 28, 2014
Programming
1
260
From Backbone.Views To ReactJs
Sarmad Sangi
April 28, 2014
Tweet
Share
More Decks by Sarmad Sangi
See All by Sarmad Sangi
Git Flow
sarmadsangi
0
110
Other Decks in Programming
See All in Programming
Architectural Extensions
denyspoltorak
0
290
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
CSC307 Lecture 07
javiergs
PRO
0
550
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
izumin5210
7
2.3k
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
200
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
Raku Raku Notion 20260128
hareyakayuruyaka
0
220
Lambda のコードストレージ容量に気をつけましょう
tattwan718
0
130
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
140
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
kekekenta
0
220
15年続くIoTサービスのSREエンジニアが挑む分散トレーシング導入
melonps
2
200
AgentCoreとHuman in the Loop
har1101
5
240
Featured
See All Featured
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
1
1.3k
GraphQLとの向き合い方2022年版
quramy
50
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
A Soul's Torment
seathinner
5
2.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.6k
SEO for Brand Visibility & Recognition
aleyda
0
4.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.9k
From π to Pie charts
rasagy
0
120
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
0
180
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.2k
Transcript
By Sarmad Sangi From Backbone.Views to ReactJs
Problem with backbone views • Nested Backbone.View 's are hard
to maintain (ie lifecycle). • Every time collection changes it re-renders all the views.
Solution ?
What is ReactJs ? • JS Lib for building UI
Components • Virtual DOM for ultra-high performance
Who is using it ? • Facebook (comments, like etc)
• Instagram (Main Page) • Khan Academy (200 components)
React Components React.createClass({ render: function () { return React.DOM.div({}, Everything
is awesome!); } }); OR //jsx lah React.createClass({ render: function () { return <div>Everything is awesome!</div>; } });
React In Action https://github.com/sarmadsangi/backbone_to_reactjs/
React Tips • class -> className • Elements within render
must have parent element • Don't use minified version in development env • Data flows from parent to child • Move component by component, both backbone views and react components can co-exist in one app.
Not satisfied yet? References http://www.quora.com/Pete-Hunt/Posts/React-Convincing-the-Boss http://facebook.github.io/react/docs/thinking-in-react.html http://joelburget.com/backbone-to-react/ Demo Source Code
https://github.com/sarmadsangi/backbone_to_reactjs