from backbone to ember and back(bone) again
TRANSCRIPT
![Page 1: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/1.jpg)
Back(bone) AgainFrom Backbone to Ember and
![Page 2: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/2.jpg)
Partner at Coffee & Code. Lover of tech.
Hi, I’m Jon.
![Page 3: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/3.jpg)
Hi, I’m Jon.Partner at Coffee & Code.
Lover of tech.
![Page 4: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/4.jpg)
Developer
module.exports = Work.create({ code: function() { return 'the solution'; }})
![Page 5: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/5.jpg)
Consultant
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
module.exports = Work.create({ code: function() { return 'the solution'; }})
![Page 6: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/6.jpg)
Widget Factory
W Factory
![Page 7: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/7.jpg)
Widget Factory
W Factory + Vendor Co.
![Page 8: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/8.jpg)
Widget Dashboard
Item 1
Hunger Level 72% Room Orange # of Yawns 12.4
0
50
100
10am 12pm
Item 2
Hunger Level 12% Room Salon D # of Yawns 204
0
50
100
10am 12pm
Item 3
Hunger Level 45% Room Cypress # of Yawns 16
0
50
100
10am 12pm
![Page 9: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/9.jpg)
Widget Dashboard
• single page Javascript app, built in Backbone
• pulls data from API server
• more and more features caused code bloat
• Widget Factory does not know much Javascript
![Page 10: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/10.jpg)
Widget Dashboard
• single page Javascript app, built in Backbone
• pulls data from API server
• more and more features caused code bloat
• Widget Factory does not know much Javascript
![Page 11: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/11.jpg)
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
![Page 12: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/12.jpg)
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
![Page 13: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/13.jpg)
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
![Page 14: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/14.jpg)
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
![Page 15: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/15.jpg)
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
![Page 16: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/16.jpg)
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
![Page 17: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/17.jpg)
var MyView = Backbone.View.extend({ el: '#content', template: _.template($('#template').text()), render: function() { this.$el.html(this.template({ language: 'Backbone' })); return this; }});
var myView = new MyView();myView.render();
<div id="content"></div><script id="template" type="text/template"> <h1>Hello from <%- language %>!</h1></script>
http://codepen.io/coffeeandcode/pen/VYmZjK
![Page 18: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/18.jpg)
DOM
jQuery Underscore Templates
Backbone
![Page 19: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/19.jpg)
: Issues
• library does not do much, never will
• easy to start integration, difficult things around edges
• lack of project architecture leaves a lot up to the developers
• easy to create memory leaks
![Page 20: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/20.jpg)
Widget Dashboard 2.0
• app rewritten in Ember.js
• goal was to write less code, easier to teach
• less moving parts == less to screw up
• Widget Factory still does not know much JS
![Page 21: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/21.jpg)
Widget Dashboard 2.0
• app rewritten in Ember.js
• goal was to write less code, easier to teach
• less moving parts == less to screw up
• Widget Factory still does not know much JS
![Page 22: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/22.jpg)
A framework for creating ambitious web applications.
![Page 23: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/23.jpg)
A framework for creating ambitious web applications.
![Page 24: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/24.jpg)
A framework for creating ambitious web applications.
![Page 25: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/25.jpg)
Ember.js is an open-source client-side JavaScript web application framework based on the model-view-controller (MVC) software architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.[1]
1. http://en.wikipedia.org/wiki/Ember.js
![Page 26: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/26.jpg)
Ember.js is an open-source client-side JavaScript web application framework based on the model-view-controller (MVC) software architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.[1]
1. http://en.wikipedia.org/wiki/Ember.js
![Page 27: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/27.jpg)
Ember.js is an open-source client-side JavaScript web application framework based on the model-view-controller (MVC) software architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.[1]
1. http://en.wikipedia.org/wiki/Ember.js
![Page 28: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/28.jpg)
Ember.js is an open-source client-side JavaScript web application framework based on the model-view-controller (MVC) software architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.[1]
1. http://en.wikipedia.org/wiki/Ember.js
![Page 29: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/29.jpg)
Ember.js is an open-source client-side JavaScript web application framework based on the model-view-controller (MVC) software architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.[1]
1. http://en.wikipedia.org/wiki/Ember.js
![Page 30: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/30.jpg)
Ember.js is an open-source client-side JavaScript web application framework based on the model-view-controller (MVC) software architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.[1]
1. http://en.wikipedia.org/wiki/Ember.js
![Page 31: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/31.jpg)
var App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({ model: function() { return { language: 'Ember' }; }});
<div id="content"></div><script data-template-name="index" type="text/x-handlebars"> <h1>Hello from {{language}}!</h1></script>
http://codepen.io/coffeeandcode/pen/ZYBzad
![Page 32: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/32.jpg)
DOM
jQuery Handlebars Templates
Ember Ember Data
![Page 33: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/33.jpg)
: Issues• very opinionated, very large codebase
• does black magic with Handlebars
• assumes you need the big guns
• two-way data binding by default
• easy to shoot yourself in the foot
![Page 34: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/34.jpg)
Two Main Problems
W Factory
![Page 35: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/35.jpg)
Performance
Civic i-VTEC Engine by Kris Carillo: https://flic.kr/p/7VFLeC
![Page 36: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/36.jpg)
Widget Dashboard
Item 1
Hunger Level 72% Room Orange # of Yawns 12.4
0
50
100
10am 12pm
Item 2
Hunger Level 12% Room Salon D # of Yawns 204
0
50
100
10am 12pm
Item 3
Hunger Level 45% Room Cypress # of Yawns 16
0
50
100
10am 12pm
![Page 37: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/37.jpg)
Widget Dashboard
Production Data:500 widgets
![Page 38: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/38.jpg)
Poor Man’s Testing
0
175
350
525
700
seconds 10 20 30 120
Ember App
MB of memory
![Page 39: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/39.jpg)
http://www.filamentgroup.com/lab/mv-initial-load-times.html
![Page 40: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/40.jpg)
$ find backbone -name '*.js' | xargs wc -wcl 12 36 197 backbone/js/app.js 41 166 1130 backbone/js/collections/todos.js 26 78 536 backbone/js/models/todo.js 26 67 499 backbone/js/routers/router.js 131 428 3703 backbone/js/views/app-view.js 132 496 3888 backbone/js/views/todo-view.js 368 1271 9953 total
$ find emberjs -name '*.js' | xargs wc -wcl 6 14 159 emberjs/js/app.js 59 165 1486 emberjs/js/controllers/todo_controller.js 51 128 1195 emberjs/js/controllers/todos_controller.js 16 38 432 emberjs/js/controllers/todos_list_controller.js 11 31 262 emberjs/js/helpers/pluralize.js 9 18 158 emberjs/js/models/todo.js 38 78 816 emberjs/js/router.js 12 33 298 emberjs/js/views/todo_input_component.js 202 505 4806 total
lines words chars
![Page 41: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/41.jpg)
People Problem
Random, funny internet photo
![Page 42: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/42.jpg)
People Problem
• lack of knowledge in front-end technologies
• not enough pairing and information sharing
• team skill level was not adequate to pick up where Vendor Co. left off
• amount of documentation was lacking
![Page 43: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/43.jpg)
Our Solution• focus on knowledge sharing
• pair programming / technical side projects
• build what the client understands
• built JS workflow with the client’s help
• explicit code, no magic
• uses CommonJS and Browserify
• use technologies with little change and a wealth of documentation
![Page 44: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/44.jpg)
Explicit Code+
var MainLayout = require('../views/shared/layout');
module.exports = MainLayout.extend({ template: 'dashboard/layout',
ui: { tooltipFields: '[data-tooltip=true]' },
onRender: function() { // apply jQuery plugin to tooltip fields this.ui.tooltipFields.tooltip(); }});
![Page 45: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/45.jpg)
Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.
It is a collection of common design and implementation patterns found in the applications that we have been building with Backbone, and includes pieces inspired by composite application architectures, event-driven architectures, messaging architectures, and more.
![Page 46: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/46.jpg)
Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.
It is a collection of common design and implementation patterns found in the applications that we have been building with Backbone, and includes pieces inspired by composite application architectures, event-driven architectures, messaging architectures, and more.
![Page 47: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/47.jpg)
Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.
It is a collection of common design and implementation patterns found in the applications that we have been building with Backbone, and includes pieces inspired by composite application architectures, event-driven architectures, messaging architectures, and more.
![Page 48: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/48.jpg)
Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.
It is a collection of common design and implementation patterns found in the applications that we have been building with Backbone, and includes pieces inspired by composite application architectures, event-driven architectures, messaging architectures, and more.
![Page 49: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/49.jpg)
Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.
It is a collection of common design and implementation patterns found in the applications that we have been building with Backbone, and includes pieces inspired by composite application architectures, event-driven architectures, messaging architectures, and more.
![Page 50: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/50.jpg)
var MyView = Marionette.ItemView.extend({ el: '#content', template: '#template', serializeData: function() { return { language: 'Marionette' }; }});
var myView = new MyView();myView.render();
<div id="content"></div><script id="template" type="text/template"> <h1>Hello from <%- language %>!</h1></script>
http://codepen.io/coffeeandcode/pen/raWBWE
![Page 51: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/51.jpg)
DOM
jQuery Underscore Templates
Backbone
Marionette
![Page 52: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/52.jpg)
Activity Monitor
0
175
350
525
700
seconds 10 20 30 120
Ember App Backbone App
![Page 53: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/53.jpg)
My Challenge• build apps with
production data in mind
• consider non-technical needs of project
• show love for all technology choices, but be hesitant to adopt new libraries
![Page 55: From Backbone to Ember and Back(bone) Again](https://reader030.vdocuments.site/reader030/viewer/2022032617/55a947491a28aba23e8b473b/html5/thumbnails/55.jpg)
Resources
Slide 1 image: https://flic.kr/p/8Y8T5T
Slide 2 image: Keynote default :)
Slide 35 image: https://flic.kr/p/7VFLeC
Slide 39: TodoMVC performance work by Filament Group: http://www.filamentgroup.com/lab/mv-initial-load-times.html
Slide 41 image: the internets (don’t know source)