backbone.js introduction workshop

Backbone.jsIntroduction / Oren Farhi

Oren Farhi

Front End Architect, JS Engineer @Tikal

JS Group Leader - Meet, Share, Contribute & Coding

Speaker (Israel & World Wide)

Developing with:

Pure Javascript, Backbone.js, Underscore.js, jQuery, CSS3

github.com/tikalk

@tikalk

We help companies build, deliver, deploy, manage and optimize their products.

JAVA JS RoR.NET ALM

“Today we are SURE that we made the right decision, choosing Tikal”

Guy Ben-Porat - Development Manager “ExLibris”

Tikal by Numbers

“Actions speak louder than words”Tikal's motto

1600+ Community

Members

150+Blog Posts Last Year

460+Meetup

Members

100+Projects

Last Year

90+Tikal’s

Experts Team

12+ Years old

The Past:

JS is the wild westNo code conventionsjQuery bloated codeData & DOM mixedjQuery ajax & callbacks are a bit messyNo Reuse

Most End Result:words and sentences with long selectors and "hanged" functions everywhere

The Present: All we have is now

SimplicityOrganization

Focus

Backbone Background

Jeremy Ashkenas - Underscore, CoffeescriptDocumentCloud

Dependencies:jquery / zeptounderscore.jsjson2.js ( IE, other without JSON )

Backbone is:

MVC library (MIT)StructureRESTful JSON connectorHash Routing EngineEvent DrivenExtended

ModelEventsViewCollectionRouterUtilities - based underscore.jsTemplating Engine - based underscore.js

What is it good for?Linkedin Mobile, SoundCloud, Foursquar, Khan Academy, Airbnb, Rdio, HuluStructure for CodeSeparation of Concerns

Modular, Extensible

Reusable Modules

Loose Coupling

Model Driven

Unit Test Ready

M - Backbone.Model

V - _.template

C - Backbone.View / Router

This is a backbone.

When used properlyIt keeps one's headOut of one's buttRand Macivor

What we're going to do today:

https://github.com/tikalk/backbone-workshop

Backbone.Model

Where JSON data is storedREST, Constructor, ManuallyData Change EventsWorks With: Collection, View

Methods:set - validategetescapeclearfetchsave (REST) - parsedestroy (REST)

Backbone.Model

Backbone.Model - PRACTICE

Model properties: defaults, Model Methods: initialize, set, get

Backbone.View

A Controller for a DOM Element (wrapper)Renders Model/Collection to DOM (html)Delegates DOM EventsWorks With: Model, CollectionCan use Any template engine to render html

Methods:render (return this)makeremoveun/delegateEvents

Properties:$ = $el.findel$eloptionsevents

Backbone.View

Backbone.View - PRACTICE

View properties: events, tagName, className, render

_.Underscore.js

Utilities for Javascript (60)Collections, Arrays, Functions, Objects,Uses Browsers Implementation if possibleHigh ExpressivenessWorks With: Backbone, Standalone

Methods:

Collections - each, map, filter, pluck, groupBy

Arrays - without, uniq

Functions - bind, debounce,

Object - keys, values, is-* (Empty, Date, String, Function etc..), has

Utility - template, escape, mixin

Chaining - chain, value

_.Underscore.js

Backbone.Collection

Collection of ModelsREST, Constructor, ManuallyInherits Change Events from ModelsWorks With: Model, ViewMany utilities methods from underscore.js

Methods:addremovelengthfetchsave (REST) - parsedestroy (REST)+ 28 Underscore methods:map, find, filter, sortBy, groupBy, pluck, invoke ...

Properties:options

Backbone.Collection

Backbone.Collection - PRACTICE

Backbone.Router

Navigation Handling (bookmarks)Listens to url change eventsNatively integrated to Back/ForwardEasy routing handlingWorks With: Backbone.History

Methods:customnavigateroute (create)

Properties:routes (key - value) - (route - handler)

Backbone.Router

Backbone.Router - PRACTICE

Questions?

Backbone - http://documentcloud.github.com/backbone/Underscore - http://documentcloud.github.com/underscoreTikal - http://www.tikalk.com