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
Sarmad Sangi
April 28, 2014
Programming
1
250
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
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
楽して成果を出すためのセルフリソース管理
clipnote
0
180
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.3k
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
160
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.8k
速いWebフレームワークを作る
yusukebe
5
1.7k
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
500
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Writing Fast Ruby
sferik
628
62k
Optimizing for Happiness
mojombo
379
70k
Docker and Python
trallard
46
3.6k
Speed Design
sergeychernyshev
32
1.1k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
RailsConf 2023
tenderlove
30
1.2k
Agile that works and the tools we love
rasmusluckow
330
21k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
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