2. AGENDA
‣ History, Problems and Solutions
‣ Brief Overview of Backbone Components
‣ Building Backbone App From Scratch
‣ Backbone Starter Kit
‣ Subviews
‣ AMD
2
Saturday, February 2, 13
3. INTRODUCTION
‣ Over 12 years in software development
‣ Author of RapidPrototypingWithJS.com
‣ 500 Startups grad (Gizmo)
AZAT MARDANOV
ENGINEER, STORIFY
3
@azat_co
azat.co
Saturday, February 2, 13
5. HISTORY, PROBLEMS AND SOLUTIONS
HISTORY
1. Before: Pure HTML from the server, client just a painting instructions
2. Some client code to style (DHTML, AJAX), 90% of server
3. Spaghetti code (~4yr ago), no structure in who calls who
4. Now: 10-60% of interaction on client: data transferred in DOM,
a.k.a lossy transformation, trying to use DOM as a database — sucks
5. Future: client will own entire complexity of application (?)
5
Saturday, February 2, 13
6. HISTORY, PROBLEMS AND SOLUTIONS
PROBLEMS IN FRONT-END
DEVELOPMENT
‣ Client has more responsibility but not all (bugs)
‣ Complexity grows polynomial, features *2, must keep in mind all
features before,
‣ Leads to re-writes, throwing away all code
‣ Accumulation of technical debt, more resource (developers)
6
DANGER
ZONE!
Saturday, February 2, 13
7. HISTORY, PROBLEMS AND SOLUTIONS
SOLUTIONS
‣ Better architecture (MVC)
‣ Best practices
‣ More developers (not scalable)
7
RIGHT
CHOICE
Saturday, February 2, 13
8. HISTORY, PROBLEMS AND SOLUTIONS
WHY USE MVC FOR FRONT-END
DEVELOPMENT?
“Code is not an asset, it’s a liability” - Unknown source
8
Saturday, February 2, 13
9. HISTORY, PROBLEMS AND SOLUTIONS
MODEL VIEW CONTROLLER
‣ Better code organization leads to faster/cheaper maintenance
‣ Reusability
‣ Separation of components/concerns
9
Saturday, February 2, 13
10. HISTORY, PROBLEMS AND SOLUTIONS
MODEL VIEW CONTROLLER
‣ Model: data and information
‣ View: visual representation
‣ Controller: interaction between a user and the system
10
Saturday, February 2, 13
11. WHAT IS BACKBONE.JS?
WHY USE MVC FOR FRONT-END
DEVELOPMENT?
‣ Desktop-like applications in a browser (think GMail)
‣ Thick client and mobile apps
‣ Lots of interactions via HTTP Request (ex-AJAX)
‣ Updating DOM and dealing with callbacks quickly becomes PITA
11
Saturday, February 2, 13
12. HISTORY, PROBLEMS AND SOLUTIONS
ADVANTAGES OF BACKBONE.JS
‣ Simple: (View, Models, Collections, Router)
‣ Uses Underscore, jQuery/Zepto
‣ Customizable, works well with mobile apps
12
Saturday, February 2, 13
13. HISTORY, PROBLEMS AND SOLUTIONS
OTHER MVC FRAMEWORKS
‣ Ember.js: live-templates (Handebars), scaffolding, more desktop-like
apps
‣ Knockout.js: lightweight
http://todomvc.com/ — Todo app in various frameworks
13
GOOD
TO
KNOW
Saturday, February 2, 13
14. BACKBONE.JS COMPONENTS
MAIN COMPONENTS
‣ Router: Controller in MVC concept
‣ Templates and Views: View (and Controller) in MVC concept
‣ Collections and Models: Model in MVC concept
14
Saturday, February 2, 13
15. BACKBONE.JS COMPONENTS
BEST PRACTICE
‣ Router: defines routes a.k.a nice URLs (/stories/:id/element/:id), calls
views/collections
‣ Views: accept data, bind events, compile and render HTML
‣ Templates: HTML templates with JS instructions (Underscore)
‣ Collections: fetch, parse data via REST API, represent sets of Models
‣ Models: manipulate attributes, fetch and parse data via REST API
15
Saturday, February 2, 13
16. BACKBONE.JS COMPONENTS
FLEXIBILITY
‣ Router: not required
‣ Templates: can be just variables inside of Views or separate file (AMD)
‣ View can use Models directly
16
Saturday, February 2, 13
17. BACKBONE.JS COMPONENTS
STANDARD TRANSACTIONS
MADE EASIER WITH A
FRAMEWORK
‣ fetchAll: collection.fetchAll() instead of $.ajax(...) via REST API
‣ save(): model.save() instead of $.ajax(...) via REST API
‣ Updates Views based on data changes
17
Saturday, February 2, 13
22. EVENT BINDING
BAD PRACTICE
Have lots of ajax calls with callback inside of them:
$.ajax (...
//fetch data
success: function(...
//update view
))
22
DANGER
ZONE!
Saturday, February 2, 13
23. EVENT BINDING
GOOD PRACTICE
In a view listen to Backbone collection.on(‘change’) event:
collection.fetch() triggers ‘change’ event
23
RIGHT
CHOICE
Saturday, February 2, 13
24. EVENT BINDING
FURTHER READING
Awesome guide on on going from jQuery to Backbone.js:
https://github.com/kjbekkelund/writings/blob/master/published/
understanding-backbone.md/
or
http://bit.ly/NGqFeK
24
GOOD
TO
KNOW
Saturday, February 2, 13
25. KEY OBJECTIVE(S) AGENDA
RESOURCESDELIVERABLE
EXERCISE 2 - “EVENT BINDING”
Extend SSBSK to use subviews 15m 1. Download SSBSK
2. Create subview
3. Populate subview with models
4. Render subview
5. Run HTML file
Insert deliverable/outcome http://github.com/azat-co/ga-backbone/
25
Saturday, February 2, 13
27. REQUIRE.JS AND AMD
ASYNCHRONOUS MODULE
DEFINITION
Require.js allows for asynchronous loading of JS and other files (HTML):
define(["alpha"], function (alpha) {
return {
verb: function(){
return alpha.verb() + 2;
}
};
});
27
GOOD
TO
KNOW
Saturday, February 2, 13
28. BACKBONE.JS STARTER KIT 28
SUPER SIMPLE BACKBONE
STARTER KIT
Backbone + Twitter Bootstarp + Require.js (AMD) Boilerplate:
https://github.com/azat-co/super-simple-backbone-starter-kit
GOOD
TO
KNOW
Saturday, February 2, 13
29. KEY OBJECTIVE(S) AGENDA
RESOURCESDELIVERABLE
EXERCISE 3 - SSBSK
Extend SSBSK to use subviews 15m 1. Download SSBSK
2. Create subview
3. Populate subview with models
4. Render subview
5. Run HTML file
Insert deliverable/outcome http://github.com/azat-co/ga-backbone/
29
Saturday, February 2, 13
30. BOILERPLATE
FURTHER READING
Backbone Boilerplate Buddy:
https://github.com/backbone-boilerplate/grunt-bbb
Backbone.js Applications:
http://addyosmani.github.com/backbone-fundamentals/
30
GOOD
TO
KNOW
Saturday, February 2, 13