Download - Intro to Backbone.js by Azat Mardanov for General Assembly

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


INTRODUCTION

‣ Over 12 years in software development

‣ Author of RapidPrototypingWithJS.com

‣ 500 Startups grad (Gizmo)

AZAT MARDANOVENGINEER, STORIFY

3

@azat_coazat.co


INTRODUCTION TO BACKBONE.JS

HISTORY, PROBLEMS AND SOLUTIONS

4



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

DANGERZONE!



SOLUTIONS

‣ Better architecture (MVC)

‣ Best practices

‣ More developers (not scalable)

7

RIGHT CHOICE



WHY USE MVC FOR FRONT-ENDDEVELOPMENT?

“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-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



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


http://todomvc.com/

http://todomvc.com/

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



FLEXIBILITY

‣ Router: not required

‣ Templates: can be just variables inside of Views or separate file (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 file

Insert deliverable/outcome http://github.com/azat-co/ga-backbone/

19


http://github.com/azat-co/ga-backbone/


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

DANGERZONE!


EVENT BINDING

GOOD PRACTICE

In a view listen to Backbone collection.on(‘change’) event:

collection.fetch() triggers ‘change’ event

23

RIGHTCHOICE


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 file


25




DISCUSSION TIME

INSERT CLASS TITLE 26


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


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






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


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

