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.

1. By: Ashan Fernando

2.  Introduction
 Technology Stack
 Project Structure
 High Level Architecture
 Frontend Architecture MVC
 View
 Collection
 Model
 Routes
 Backend Architecture MVC overview
 View/ Controller/ Model/ Route

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)