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
15年続くIoTサービスのSREエンジニアが挑む分散トレーシング導入
melonps
2
200
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
11
7.4k
Rust 製のコードエディタ “Zed” を使ってみた
nearme_tech
PRO
0
180
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
190
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
Grafana:建立系統全知視角的捷徑
blueswen
0
330
登壇資料を作る時に意識していること #登壇資料_findy
konifar
4
1.1k
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
izumin5210
7
2.3k
AtCoder Conference 2025
shindannin
0
1.1k
「ブロックテーマでは再現できない」は本当か?
inc2734
0
1k
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
minodriven
21
7.2k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
700
Featured
See All Featured
Speed Design
sergeychernyshev
33
1.5k
Site-Speed That Sticks
csswizardry
13
1.1k
Deep Space Network (abreviated)
tonyrice
0
48
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
66
37k
Writing Fast Ruby
sferik
630
62k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
0
260
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
450
sira's awesome portfolio website redesign presentation
elsirapls
0
150
GraphQLとの向き合い方2022年版
quramy
50
14k
Utilizing Notion as your number one productivity tool
mfonobong
3
220
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
440
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
3.9k
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