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
なぜselectはselectではないのか
taiyow
2
180
requirements with math
moony
0
480
PromptyによるAI開発入門
ymd65536
1
330
Cloudflare Pagesのサイトを NotebookLMから読みやすくする Cloudflare Meet-up Tokyo Vol.7
xiombatsg
0
110
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
160
「その気にさせる」エンジニアが 最強のリーダーになる理由
gimupop
3
430
Devin入門 〜月500ドルから始まるAIチームメイトとの開発生活〜 / Introduction Devin 〜Development With AI Teammates〜
rkaga
6
2.3k
DenoでOpenTelemetryに入門する
yotahada3
2
270
AHC 044 混合整数計画ソルバー解法
kiri8128
0
250
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
0
270
❄️ NixOS/nixpkgsにSATySFiサポートを実装する
momeemt
2
170
Goで作るChrome Extensions / Fukuoka.go #21
n3xem
2
2.5k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Designing for humans not robots
tammielis
250
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GraphQLとの向き合い方2022年版
quramy
44
14k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
The Cult of Friendly URLs
andyhume
78
6.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
430
Scaling GitHub
holman
459
140k
For a Future-Friendly Web
brad_frost
176
9.6k
Writing Fast Ruby
sferik
628
61k
A Modern Web Designer's Workflow
chriscoyier
693
190k
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