Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Backbone to React
Joel Burget
October 25, 2013
Programming
24
66k
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
380
Other Decks in Programming
See All in Programming
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
220
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
Hatena Engineer Seminar #23「新卒研修で気軽に『ありがとう』を伝え合える Slack アプリを開発した話」
slashnephy
0
320
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
320
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
0
260
Refactor with using `available` and `deprecated`
417_72ki
3
380
花き業界のサプライチェーンを繋げるプロダクト開発の進め方
userlike1
0
170
Listかもしれない
irof
1
280
データドリブンな組織の不正検知
fkubota
0
260
監視せなあかんし、五大紙だけにオオカミってな🐺🐺🐺🐺🐺
sadnessojisan
2
1.5k
Amazon QuickSightのアップデート -re:Invent 2022の復習&2022年ハイライト-
shogo452
0
230
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
840
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
The Pragmatic Product Professional
lauravandoore
21
3.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
318
19k
Unsuck your backbone
ammeep
659
56k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
38
3.6k
4 Signs Your Business is Dying
shpigford
171
20k
Robots, Beer and Maslow
schacon
154
7.3k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
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