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
Backbone to React
Search
Joel Burget
October 25, 2013
Programming
24
67k
Backbone to React
Talk given at Hack Reactor October 25, 2013
Joel Burget
October 25, 2013
Tweet
Share
More Decks by Joel Burget
See All by Joel Burget
React-Haskell
joelburget
3
420
Other Decks in Programming
See All in Programming
Model Pollution
hschwentner
1
180
株式会社 Sun terras カンパニーデック
sunterras
0
170
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
630
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
650
OWASP Kansai DAY 2025.09: OSINTにふれてみよう
deka_morita
0
160
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
310
スマホで海難事故は防げるか?年間2000件以上の小型船舶の事故に挑むアプリ開発
atsuki_seo
0
120
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
690
CSC509 Lecture 03
javiergs
PRO
0
320
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
660
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
220
Build your own WebP codec in Swift
kishikawakatsumi
2
850
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Language of Interfaces
destraynor
162
25k
Balancing Empowerment & Direction
lara
4
670
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Transcript
None
None
@dino_joel Joel Burget (@dinojoel was taken)
None
None
React + Backbone
React + Backbone (more)
React + Backbone (more)
jsx
/** @jsx React.DOM */ var HelloWorld = React.createClass({ render: function()
{ return <div> Hello World </div>; } }); jsx
WHAT. IS THAT? /** @jsx React.DOM */ var HelloWorld =
React.createClass({ render: function() { return <div> Hello World </div>; } }); jsx
Noise /** @jsx React.DOM */ jsx
<div>transform me</div> React.DOM.div({}, ‘transform me’) jsx
<div> <span>fst</span> <span>snd</span> </div> React.DOM.div({}, [React.DOM.span({}, ‘fst’), React.DOM.span({}, ‘snd’)] )
jsx
<div id=”transform”> transform me </div> React.DOM.div( {id: “transform”}, ‘transform me’
) jsx
var name = “HackReactor”; return <div> {name} </div>; var name
= “HackReactor”; return React.DOM.div( {}, name ); jsx
None
<i id=”emptyspan”></i>; (html) <span id=”emptyspan” />; jsx
React
React var CatImg = React.createClass({ render: function() { var imgsrc
= “catimg.com/” + this.props.name; return <img src={imgsrc} />; } }); React.renderComponent( <CatImg name="pewpewpew" />, mountNode);
React
var ClickMe = React.createClass({ render: function() { return <span onClick={this.handleClick}>
{this.state.clicked ? “clicked!” : “click me!”} </span>; }, getInitialState: function() { return { clicked: false }; }, handleClick: function() { this.setState({ clicked: true }); } }); React
React click me!
React clicked!
React + Backbone
React + Backbone var Clicker = Backbone.Model.extend({ defaults: { active:
false } });
React + Backbone var ClickMe2 = React.createClass({ mixins: [BackboneMixin], render:
function() { var clicker = this.props.clicker; var message = clicker.get(“active”) ? “clicked!” : “click me!”; return <span onClick={this.handleClick}> {message} </span>; }, handleClick: function() { this.props.clicker.toggle(“active”); }, getBackboneModels: function() { return [this.props.clicker]; } });
None
Tod MVC
React + Backbone ~300 lines
var Todo = Backbone.Model.extend({ ... }); var TodoList = Backbone.Collection.extend({
model: Todo ... }); React + Backbone
var TodoApp = React.createClass({ mixins: [BackboneMixin], render: function() { return
<div> <section id="todoapp"> <header id="header"> <h1>todos</h1> ... {todos} {footer} ... </div>; } }); React + Backbone
var TodoItem = React.createClass({ handleSubmit: function(event) { ... }, onEdit:
function(event) { ... }, render: function() { return <li> check title x </li>; } }); React + Backbone
None
React + Backbone events: { " 'keypress #new-todo': 'createOnEnter', "
'click #clear-completed': 'clearCompleted', " 'click #toggle-all': 'toggleAllComplete' }, ... this.listenTo(app.todos, 'add', this.addOne); this.listenTo(app.todos, 'reset', this.addAll); this.listenTo(app.todos, 'change:completed', this.filterOne); this.listenTo(app.todos, 'filter', this.filterAll); this.listenTo(app.todos, 'all', this.render); onSubmit onClick
React + Backbone $('#todo-list') .append(view.render().el); this.$('#todo-list').html(''); this.$input.val(''); this.$el.html( this.template( this.model.toJSON()));
this.$el.addClass('editing'); this.$el.removeClass('editing'); etc
None
Human
Human 24 devs & designers
Human jQuery Backbone {models, views} Handlebars (Ugh)
Human 23500 LOC 200 Components
Human 23500 LOC 200 Components Since June 3
facebook.github.io/react/ joelburget.com/backbone-to-react/
Thanks! Joel Burget - @dino_joel - Khan Academy