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
410
Other Decks in Programming
See All in Programming
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
5
870
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
700
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
210
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
190
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.2k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
490
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
980
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
170
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
150
Jakarta EE Meets AI
ivargrimstad
0
290
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.3k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Producing Creativity
orderedlist
PRO
346
40k
Writing Fast Ruby
sferik
628
62k
Side Projects
sachag
455
43k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Faster Mobile Websites
deanohume
308
31k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Unsuck your backbone
ammeep
671
58k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
109
19k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
It's Worth the Effort
3n
185
28k
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