Date post: | 13-Jan-2015 |
Category: |
Technology |
Upload: | daniel-lv |
View: | 6,397 times |
Download: | 2 times |
Copyright 2010, Intridea Inc. All Rights Reserved.
JavaScript framework and
Backbone
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
JavaScript is Important
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Start from jQuery
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
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?
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Building a web application with
jQuery
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
JQuery can give us this:Browser
Dom Manipulation
Ajax
Server
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
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
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Itʼs all easy to create JavaScript applications that end up as tangle
piles of jQuery selectors and callbacks.
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
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
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
How to fill in the gaps?
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Extended the JavaScript language
itself
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Dynamic run-time & OO • Prototype
• Narcissus
• Super-Class
• JS2Lang
• CoffeeScript
• Hacking construct method and
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Provide rich library and toolkits
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
• jQuery and jQueryUI
• YUI
• ExtJS
• Underscore.js
• MooToos
• Dojokits
• To many third part library and plugins ...
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Spend more time on project, less on
architecture!
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Application Framework
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Think about is Rails in front-end
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
YES! A MVC Pattern
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
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
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
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.
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
MVC Frameworks• JavaScriptMVC
• Backbone.js & Underscore.js
• Spine.js
• SproutCore
• Sammy.js
• etc...
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
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)
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Who use it?
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Basecamp Mobile
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Flow
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
CloudApp
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Jeremy Ashkenas• DocumentCloud
• Coffee-Script
• Underscore
• Docco
• Github
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
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
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Alex MaxCaw
• London, United Kingdom
• Author of <<JavaScript Web Applications>>
• http://alexmaccaw.co.uk
• https://github.com/maccman
• https://twitter.com/maccman
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Backbone? Spine?
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Dive into BackboneA demo about Backbone scaffolding application
with Rails back-end
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
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
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Backboneʼs MVC
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
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.
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Backboneʼs Collection
Collections are ordered sets of models.
Collections may also listen for changes to specific attributes in their models
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
Backboneʼs Controller
Controller provides methods for routing client-side URL fragments, and connecting them to actions and events.
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
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.
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
More about Backbone• Backboneʼs Event
• Backboneʼs History
• Backboneʼs Sync
• More ...
Tuesday, June 28, 2011
Copyright 2010, Intridea Inc. All Rights Reserved.
• 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
Tuesday, June 28, 2011