Start from jQuery
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
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
• jQuery and jQueryUI • YUI • ExtJS • Underscore.js • MooToos • Dojokits • To many third part library and plugins ...
Spend more time on project, less on architecture!
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.
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)
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
Dive into Backbone A 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 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 ...