From Backbone to Ember and Back(bone) Again

1. Back(bone) Again From Backbone to Ember and

2. Partner at Coffee & Code. Lover of tech. Hi, I’m Jon.

3. Hi, I’m Jon. Partner at Coffee & Code. Lover of tech.

4. Developer module.exports = Work.create({ code: function() { return 'the solution'; } })

5. 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'; } })

6. Widget Factory W Factory

7. Widget Factory W Factory + Vendor Co.

8. 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

9. 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

10. 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

11. 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.

17. 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

18. DOM jQuery Underscore Templates Backbone

19. : Issues • library does not do much, never will • easy to start integration, difﬁcult things around edges • lack of project architecture leaves a lot up to the developers • easy to create memory leaks

20. 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

21. 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

22. A framework for creating ambitious web applications.

25. 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

31. 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

32. DOM jQuery Handlebars Templates Ember Ember Data

33. : 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

34. Two Main Problems W Factory

35. Performance Civic i-VTEC Engine by Kris Carillo: https://ﬂic.kr/p/7VFLeC

36. 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

37. Widget Dashboard Production Data:  500 widgets

38. Poor Man’s Testing 0 175 350 525 700 seconds 10 20 30 120 Ember App MB of memory

39. http://www.ﬁlamentgroup.com/ lab/mv-initial-load-times.html

40. $ 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

41. People Problem Random, funny internet photo

42. 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

43. Our Solution • focus on knowledge sharing • pair programming / technical side projects • build what the client understands • built JS workﬂow with the client’s help • explicit code, no magic • uses CommonJS and Browserify • use technologies with little change and a wealth of documentation

44. 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(); } });

45. 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.

50. 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

51. DOM jQuery Underscore Templates Backbone Marionette

52. Activity Monitor 0 175 350 525 700 seconds 10 20 30 120 Ember App Backbone App

53. 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

54. Thanks Jonathan Knapp  @CoffeeAndCode http://slidesha.re/1w5yv4A

55. 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)

From Backbone to Ember and Back(bone) Again

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to From Backbone to Ember and Back(bone) Again

Similar to From Backbone to Ember and Back(bone) Again (20)

Recently uploaded

Recently uploaded (20)

From Backbone to Ember and Back(bone) Again

Editor's Notes