Post on 15-Jan-2015
description
Azat MardanovEngineer, Storify.com
INTRODUCTIONTO 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
Saturday, February 2, 13
INTRODUCTION
‣ Over 12 years in software development
‣ Author of RapidPrototypingWithJS.com
‣ 500 Startups grad (Gizmo)
AZAT MARDANOVENGINEER, STORIFY
3
@azat_coazat.co
Saturday, February 2, 13
INTRODUCTION TO BACKBONE.JS
HISTORY, PROBLEMS AND SOLUTIONS
4
Saturday, February 2, 13
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
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
DANGERZONE!
Saturday, February 2, 13
HISTORY, PROBLEMS AND SOLUTIONS
SOLUTIONS
‣ Better architecture (MVC)
‣ Best practices
‣ More developers (not scalable)
7
RIGHT CHOICE
Saturday, February 2, 13
HISTORY, PROBLEMS AND SOLUTIONS
WHY USE MVC FOR FRONT-ENDDEVELOPMENT?
“Code is not an asset, it’s a liability” - Unknown source
8
Saturday, February 2, 13
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
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
WHAT IS BACKBONE.JS?
WHY USE MVC FOR FRONT-ENDDEVELOPMENT?‣ 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
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
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
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
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
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
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
Q&A
INTRODUCTION TO BACKBONE.JS 18
Saturday, February 2, 13
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 file
Insert deliverable/outcome http://github.com/azat-co/ga-backbone/
19
Saturday, February 2, 13
IMAGES 20
Saturday, February 2, 13
DISCUSSION TIME
INTRODUCTION TO BACKBONE.JS 21
Saturday, February 2, 13
EVENT BINDING
BAD PRACTICE
Have lots of ajax calls with callback inside of them:
$.ajax (...
//fetch data
success: function(...
//update view
))
22
DANGERZONE!
Saturday, February 2, 13
EVENT BINDING
GOOD PRACTICE
In a view listen to Backbone collection.on(‘change’) event:
collection.fetch() triggers ‘change’ event
23
RIGHTCHOICE
Saturday, February 2, 13
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
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
DISCUSSION TIME
INSERT CLASS TITLE 26
Saturday, February 2, 13
REQUIRE.JS AND AMD
ASYNCHRONOUS MODULE DEFINITIONRequire.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
BACKBONE.JS STARTER KIT 28
SUPER SIMPLE BACKBONE STARTER KITBackbone + Twitter Bootstarp + Require.js (AMD) Boilerplate:
https://github.com/azat-co/super-simple-backbone-starter-kit
GOOD TO
KNOW
Saturday, February 2, 13
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
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
DISCUSSION TIME
INSERT CLASS TITLE 31
Saturday, February 2, 13
Q&A
INSERT CLASS TITLE 32
Saturday, February 2, 13