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
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Sarmad Sangi
April 28, 2014
Programming
270
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
From Backbone.Views To ReactJs
Sarmad Sangi
April 28, 2014
More Decks by Sarmad Sangi
See All by Sarmad Sangi
Git Flow
sarmadsangi
0
120
Other Decks in Programming
See All in Programming
ふつうのFeature Flag実践入門
irof
7
3.9k
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
mom0tomo
8
3.2k
Make SRE Operations Easier with Azure SRE Agent
kkamegawa
0
6.1k
3Dシーンの圧縮
fadis
1
770
Agentic UI
manfredsteyer
PRO
0
160
Vite+ Unified Toolchain for the Web
naokihaba
0
310
ADKを使って簡単にAIエージェントを作ってみよう
k1mu21
0
260
DynamoDBには集計系のクエリがないけどなんとかしたい
musan
1
140
Datadog × OpenTelemetry 入門と実践のあいだ
kn_to_maxpno
1
160
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
chobishiba
3
580
Honoでのサプライチェーン侵害対策 〜 3つのライブラリに学ぶ
yusukebe
6
1.1k
RTSPクライアントを自作してみた話
simotin13
0
610
Featured
See All Featured
Leo the Paperboy
mayatellez
7
1.8k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.5k
Become a Pro
speakerdeck
PRO
31
6k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
300
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.9k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
160
How GitHub (no longer) Works
holman
316
150k
sira's awesome portfolio website redesign presentation
elsirapls
0
280
How to build a perfect <img>
jonoalderson
1
5.6k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
400
Bash Introduction
62gerente
615
220k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
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