Intro to Backbone.js by Azat Mardanov for General Assembly

Azat Mardanov
Engineer, Storify.com
INTRODUCTION
TO BACKBONE.JS
Saturday, February 2, 13

AGENDA
‣ History, Problems and Solutions
‣ Brief Overview of Backbone Components
‣ Building Backbone App From Scratch
‣ Backbone Starter Kit
‣ Subviews
‣ AMD
2

INTRODUCTION
‣ Over 12 years in software development
‣ Author of RapidPrototypingWithJS.com
‣ 500 Startups grad (Gizmo)
AZAT MARDANOV
ENGINEER, STORIFY
3
@azat_co
azat.co

INTRODUCTION TO BACKBONE.JS
HISTORY,
PROBLEMS
AND
SOLUTIONS
4

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

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!

SOLUTIONS
‣ Better architecture (MVC)
‣ Best practices
‣ More developers (not scalable)
7
RIGHT
CHOICE

WHY USE MVC FOR FRONT-END
DEVELOPMENT?
“Code is not an asset, it’s a liability” - Unknown source
8

MODEL VIEW CONTROLLER
‣ Better code organization leads to faster/cheaper maintenance
‣ Reusability
‣ Separation of components/concerns
9

MODEL VIEW CONTROLLER
‣ Model: data and information
‣ View: visual representation
‣ Controller: interaction between a user and the system
10

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

ADVANTAGES OF BACKBONE.JS
‣ Simple: (View, Models, Collections, Router)
‣ Uses Underscore, jQuery/Zepto
‣ Customizable, works well with mobile apps
12

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

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

BEST PRACTICE
‣ Router: deﬁnes 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

FLEXIBILITY
‣ Router: not required
‣ Templates: can be just variables inside of Views or separate ﬁle (AMD)
‣ View can use Models directly
16

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

Q&A
INTRODUCTION TO BACKBONE.JS 18

KEY OBJECTIVE(S) AGENDA
RESOURCESDELIVERABLE
EXERCISE 1 - “HELLO WORLD”
Build ‘Hello World” Backbone.js
app from scratch
15m 1. Download jQuery, Underscore and Backbone
2. Create HTML and link libraries
3. Create Router
4. Create View
5. Run HTML ﬁle
Insert deliverable/outcome http://github.com/azat-co/ga-backbone/
19

IMAGES 20

DISCUSSION
TIME
INTRODUCTION TO BACKBONE.JS 21

EVENT BINDING
BAD PRACTICE
Have lots of ajax calls with callback inside of them:
$.ajax (...
//fetch data
success: function(...
//update view
))
22
DANGER
ZONE!

EVENT BINDING
GOOD PRACTICE
In a view listen to Backbone collection.on(‘change’) event:
collection.fetch() triggers ‘change’ event
23
RIGHT
CHOICE

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

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 ﬁle
25

DISCUSSION
TIME
INSERT CLASS TITLE 26

REQUIRE.JS AND AMD
ASYNCHRONOUS MODULE
DEFINITION
Require.js allows for asynchronous loading of JS and other ﬁles (HTML):
define(["alpha"], function (alpha) {
return {
verb: function(){
return alpha.verb() + 2;
}
};
});
27
GOOD
TO
KNOW

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

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 ﬁle
29

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

DISCUSSION
TIME

Q&A

Intro to Backbone.js by Azat Mardanov for General Assembly

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (17)

Similar to Intro to Backbone.js by Azat Mardanov for General Assembly

Similar to Intro to Backbone.js by Azat Mardanov for General Assembly (20)

Recently uploaded

Recently uploaded (20)

Intro to Backbone.js by Azat Mardanov for General Assembly