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
イベントストーミングから始めるドメイン駆動設計
jgeem
4
820
単体テストの始め方/作り方
toms74209200
0
430
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
200
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
2
540
カクヨムAndroidアプリのリブート
numeroanddev
0
410
Use Perl as Better Shell Script
karupanerura
0
690
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
750
Create a website using Spatial Web
akkeylab
0
260
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
160
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
100
Blueskyのプラグインを作ってみた
hakkadaikon
1
520
A comprehensive view of refactoring
marabesi
0
120
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
920
Designing Experiences People Love
moore
142
24k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building an army of robots
kneath
306
45k
Adopting Sorbet at Scale
ufuk
77
9.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Language of Interfaces
destraynor
158
25k
Side Projects
sachag
454
42k
Balancing Empowerment & Direction
lara
1
290
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