If you are new to Single Page Applications, This will give you a great understanding of a proven technology stack & Architecture used in a popular commercial project.
3. A single-page application (SPA), also known
as single-page interface (SPI), is a web
application or web site that fits on a single
web page with the goal of providing a more
fluid user experience akin to a desktop
application.
~ wikipedia
4. Ruby on Rails Java Script
(Backend) (Frontend)
Jammit or Rails 3.1 + Asset Backbone
Pipeline
Backbone Relational
• Asset Packaging for Rails
RABL Underscore
• (Ruby API Builder Language) JQuery
DEVICE
JQueryUI
• Authentication solution for Rails
Modernizr
* Database
• MySQL Uniform
5. app/
controllers/
books_controller.rb
models/
book.rb
views/
books/
index.rabl
frontend/
books/
book.jst
routes/
routes.rb
public/
javascripts/
application.js
routes/
booksAppRouter.js
models/
book.js
library.js
views/
bookView.js
Apart from this, the Database configuration/ Asset configurations are stored
separately in respective folders
6. Ruby on Rails Platform
Front End
Web App
Rails MVC
RESTful Services & Content Backbone MVC
Collections
Routes HTTP/JSON Request
Controller Model
R
HTTP/JSON Response o
u
t
Model e
MySQL DB View s
View
7. var bookView = Backbone.View.extend({
template: “books / book.jst",
// reference to JST template
events: {
"click .icon": "open"
},
initialize() {
this.render();
},
render: function() {
var book = this.model.toJSON();
$(this.el).html(this.JST({
book: book
}));
},
open: function() { // book open logic goes here
}
});
8. When using this technology stack, the view content (HTML) are stored in JST
files.
At runtime JST files are converted into JavaScript functions (Underscore
Template functions) using the Asset Pipeline (Jammit).
Book.jst
<h1><%= book.title %></h1>
<div><%= book.content %></div>
<div><%= book.footer %></div>
Book JST after conversion to JavaScript
var JST.book = function(book) {
var out = "<h1>" + book.title + "</h1>";
out += "<div>" + book.content + "</div>";
out += "<div>" + book.footer + "</div>";
}
9. Backbone collection is bind to a rest service
using its url attribute
var books = Backbone.Collection.extend({
model: Book,
url: '/books.json'
});
10. var book = Backbone.Model.extend({
});
A plug-in called backbone relational also can be used to add
several models in relationship with eachother.
var library = Backbone.RelationalModel.extend({
relations: [{
type: Backbone.HasMany,
key: 'books',
relatedModel: 'Book',
reverseRelation: {
key: 'storedAt',
type: Backbone.HasOne
}}]
});
11. Routes maps the request to the respective controller (request
URL/operation mapping to controller)
Controllers fetch a instance of a model and render the particular model
using the respective view
The instance of the model queried in the controller is readily available for
the view and it renders the content using the respective model instance
data. (HTML or JSON based on view template)
Model reflects the instance of a database table in language structure
All the assets (JavaScript/ Images/ CSS & etc.) are stored in Asset.yml and
added to the respective resources using the asset pipeline (Jammit)
Notes de l'éditeur
A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.The way traditional web applications work causes disruption in the user experience and workflow.SPAs address these issues by requiring no page reload by the browser during an application session. All user interaction and changes of the application state are handled in the context of a single Web document.