Javascript framework and backbone

Copyright 2010, Intridea Inc. All Rights Reserved.

JavaScript framework and

Backbone

Tuesday, June 28, 2011


JavaScript is Important



Start from jQuery



jQuery is Great• It does give us easy access to DOM

manipulation, ajax, animation, events etc.

• It doesnʼt provide all the tools needed to build serious JavaScript web application

• But how do we fill in the gaps for everything else?



Building a web application with

jQuery



JQuery can give us this:Browser

Dom Manipulation

Ajax

Server



But ...what we need?• Easy to modify / maintain...

• Separate application concerns & keep the code decoupled

• Could be a single-page application (SPA) with multiple views of the data, but require no hard page refresh?

• Good performances / experiences



Itʼs all easy to create JavaScript applications that end up as tangle

piles of jQuery selectors and callbacks.



And weʼre missing something• Client-side Template

• Modular / Structure organization

• Browser State Management (location.hash)

• Manageable routing to your application

• Dependency management

• Remote / Local Persistent layer

• Architecture patterns (like MVC, Delegation)

• Support Testing



How to fill in the gaps?



Extended the JavaScript language

itself



Dynamic run-time & OO • Prototype

• Narcissus

• Super-Class

• JS2Lang

• CoffeeScript

• Hacking construct method and


http://www.prototypejs.org/

http://www.prototypejs.org/

http://www.google.com.hk/url?sa=t&source=web&cd=1&ved=0CBsQFjAA&url=http%253A%252F%252Fen.wikipedia.org%252Fwiki%252FNarcissus_(JavaScript_engine)&ei=yGz6TY2tD4q2vQOgjsGYAw&usg=AFQjCNFBf2WNYu6OVfkw7PhrXcIKHBnTvA

http://www.google.com.hk/url?sa=t&source=web&cd=1&ved=0CBsQFjAA&url=http%253A%252F%252Fen.wikipedia.org%252Fwiki%252FNarcissus_(JavaScript_engine)&ei=yGz6TY2tD4q2vQOgjsGYAw&usg=AFQjCNFBf2WNYu6OVfkw7PhrXcIKHBnTvA

http://jeffsu.github.com/js2/

http://jeffsu.github.com/js2/

http://www.google.com.hk/url?sa=t&source=web&cd=1&ved=0CCIQFjAA&url=http%253A%252F%252Fjashkenas.github.com%252Fcoffee-script%252F&ei=cW36TcHRIYi0vwOX67GgAw&usg=AFQjCNHzA1BSSjhv8xDDl3ywALrnE5lxXg

http://www.google.com.hk/url?sa=t&source=web&cd=1&ved=0CCIQFjAA&url=http%253A%252F%252Fjashkenas.github.com%252Fcoffee-script%252F&ei=cW36TcHRIYi0vwOX67GgAw&usg=AFQjCNHzA1BSSjhv8xDDl3ywALrnE5lxXg


Provide rich library and toolkits



• jQuery and jQueryUI

• YUI

• ExtJS

• Underscore.js

• MooToos

• Dojokits

• To many third part library and plugins ...



Spend more time on project, less on

architecture!



Application Framework



Think about is Rails in front-end



YES! A MVC Pattern



The MVC Pattern

• Separates objects into three main concerns

• Traditionally heavily used on the server side

• Excellent for code-organization in general

• Implementations can vary quite significantly



Models, Views & Controllers

• Models represent status and behaviors, Interact with data...

• Views can be considered the UI. link events to methods and generate dynamic HTML.

• Controller sits between Models and Views.



MVC Frameworks• JavaScriptMVC

• Backbone.js & Underscore.js

• Spine.js

• SproutCore

• Sammy.js

• etc...


http://javascriptmvc.com/

http://javascriptmvc.com/

http://documentcloud.github.com/backbone/


http://maccman.github.com/spine/

http://maccman.github.com/spine/

http://www.sproutcore.com/

http://www.sproutcore.com/

http://sammyjs.org/

http://sammyjs.org/


Backbone.js

• Provides the ʻbackboneʼ you need to organize your code using the MVC pattern

• Excellent for a lightweight solution where you select the additional components you feel work best for your project.

• Works best for SPAs (single-page apps)



Who use it?



Basecamp Mobile



Flow



CloudApp



Jeremy Ashkenas• DocumentCloud

• Coffee-Script

• Underscore

• Docco

• Github

• Twitter


http://www.documentcloud.org/home

http://www.documentcloud.org/home

http://jashkenas.github.com/coffee-script/documentation/docs/grammar.html

http://jashkenas.github.com/coffee-script/documentation/docs/grammar.html

http://jashkenas.github.com/coffee-script/documentation/docs/underscore.html

http://jashkenas.github.com/coffee-script/documentation/docs/underscore.html

http://jashkenas.github.com/docco/

http://jashkenas.github.com/docco/

https://github.com/jashkenas

https://github.com/jashkenas

http://git

http://git

https://twitter.com/jashkenas

https://twitter.com/jashkenas


Spine.js • A lightweight MVC framework with a focus

on providing an inheritance model through classes and extension.

• Based on Backboneʼs API so developers may find getting started a little easier than expected

• Spine doesnʼt require underscore.js



Alex MaxCaw

• London, United Kingdom

• Author of <<JavaScript Web Applications>>

• http://alexmaccaw.co.uk

• https://github.com/maccman

• https://twitter.com/maccman


http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X/ref=sr_1_1?s=books&ie=UTF8&qid=1307911878&sr=1-1

http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X/ref=sr_1_1?s=books&ie=UTF8&qid=1307911878&sr=1-1

http://alexmaccaw.co.uk

http://alexmaccaw.co.uk


Backbone? Spine?



Dive into BackboneA demo about Backbone scaffolding application

with Rails back-end



Backboneʼs MVC• Models: represent data that can be created/

validated, destroyed & listened to for changes. Collections are sets of models.

• Views: display the modelʼs data / provide the user interface layer

• Controller: methods for routing client-side URL fragments



Backboneʼs MVC



Backboneʼs ModelModels are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes.



Backboneʼs Collection

Collections are ordered sets of models.

Collections may also listen for changes to specific attributes in their models



Backboneʼs Controller

Controller provides methods for routing client-side URL fragments, and connecting them to actions and events.



Backboneʼs View

Backbone views are used to reflect what your applications’ data models look like. They are also used to listen to events and react accordingly.



More about Backbone• Backboneʼs Event

• Backboneʼs History

• Backboneʼs Sync

• More ...



• Backbone.js Document - http://documentcloud.github.com/backbone/

• Backbone Tutorials

• Building a single page app with Backbone.js, underscore.js and jQuery

• What are some good resources for Backbone.js

• Backbone.js with Node.js and Socket.is to build real-time apps

• Creating LocalTodos.com -- A Short Story.

• Backbone.js and Sinatra on Heroku

• Cinco - 37Single framework based on Backbone.js, open source soon.

Resources





http://backbonetutorials.com/

http://backbonetutorials.com/

http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/




http://www.quora.com/What-are-some-good-resources-for-Backbone-js

http://www.quora.com/What-are-some-good-resources-for-Backbone-js

http://andyet.net/blog/tag/backbone/

http://andyet.net/blog/tag/backbone/

http://jgn.heroku.com/2010/10/25/creating-localtodoscom----a-short-story/

http://jgn.heroku.com/2010/10/25/creating-localtodoscom----a-short-story/

http://ryandotsmith.heroku.com/2010/10/a-backbone-js-demo-app-sinatra-backend.html

http://ryandotsmith.heroku.com/2010/10/a-backbone-js-demo-app-sinatra-backend.html

Javascript framework and backbone

Technology

Transcript of Javascript framework and backbone