The document discusses the development of a widget dashboard application that transitioned from Backbone.js to Ember.js to improve code efficiency and maintainability. It highlights issues faced with both frameworks, such as code bloat in Backbone and the complexity of Ember's features. The author shares lessons learned about knowledge sharing, pair programming, and building explicit code to facilitate better team collaboration and understanding.

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.

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

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

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

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

16. 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, difficult 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.

23. A framework for creating ambitious web applications.

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

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

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

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

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

30. 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://flic.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.filamentgroup.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 workflow 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.

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

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

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

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