1. JavaScript
framework and
Backbone
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
2. JavaScript is Important
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
3. Start from jQuery
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
4. 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?
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
5. Building a web
application with
jQuery
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
6. JQuery can give us this:
Browser
Dom Manipulation
Ajax
Server
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
7. 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
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
8. Itʼs all easy to create
JavaScript applications
that end up as tangle
piles of jQuery selectors
and callbacks.
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
9. 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
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
10. How to fill in the gaps?
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
11. Extended the
JavaScript language
itself
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
12. Dynamic run-time & OO
• Prototype
• Narcissus
• Super-Class
• JS2Lang
• CoffeeScript
• Hacking construct method and
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
13. Provide rich library
and toolkits
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
14. • jQuery and jQueryUI
• YUI
• ExtJS
• Underscore.js
• MooToos
• Dojokits
• To many third part library and plugins ...
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
15. Spend more time on
project, less on
architecture!
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
16. Application Framework
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
17. Think about is
Rails in front-end
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
18. YES! A MVC Pattern
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
19. 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
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
20. 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.
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
21. MVC Frameworks
• JavaScriptMVC
• Backbone.js & Underscore.js
• Spine.js
• SproutCore
• Sammy.js
• etc...
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
22. 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)
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
23. Who use it?
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
24. Basecamp Mobile
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
25. Flow
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
26. CloudApp
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
27. Jeremy Ashkenas
• DocumentCloud
• Coffee-Script
• Underscore
• Docco
• Github
• Twitter
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
28. 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
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
29. Alex MaxCaw
• London, United Kingdom
• Author of <<JavaScript Web Applications>>
• http://alexmaccaw.co.uk
• https://github.com/maccman
• https://twitter.com/maccman
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
30. Backbone? Spine?
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
31. Dive into Backbone
A demo about Backbone scaffolding application
with Rails back-end
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
32. 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
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
33. Backboneʼs MVC
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
34. Backboneʼs Model
Models 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.
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
35. Backboneʼs Collection
Collections are ordered sets of
models.
Collections may also listen for
changes to specific attributes in
their models
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
36. Backboneʼs Controller
Controller provides
methods for routing client-
side URL fragments, and
connecting them to actions
and events.
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
37. 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.
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
38. More about Backbone
• Backboneʼs Event
• Backboneʼs History
• Backboneʼs Sync
• More ...
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011
39. Resources
• 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.
Copyright 2010, Intridea Inc. All Rights Reserved.
Tuesday, June 28, 2011