0
By: Ashan Fernando
   Introduction   Technology Stack   Project Structure   High Level Architecture   Frontend Architecture MVC       V...
A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on ...
Ruby on Rails                           Java Script   (Backend)                              (Frontend)Jammit or Rails 3.1...
app/        controllers/          books_controller.rb        models/          book.rb        views/          books/       ...
Ruby on Rails Platform                                                                    Front End                       ...
var bookView = Backbone.View.extend({        template: “books / book.jst",        // reference to JST template        even...
   When using this technology stack, the view content (HTML) are stored in JST    files.   At runtime JST files are conv...
   Backbone collection is bind to a rest service    using its url attribute   var books = Backbone.Collection.extend({  ...
   var book = Backbone.Model.extend({    });   A plug-in called backbone relational also can be used to add    several m...
   Routes maps the request to the respective controller (request    URL/operation mapping to controller)   Controllers f...
Upcoming SlideShare
Loading in...5
×

SPA using Rails & Backbone

2,072

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,072
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 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.
  • Transcript of "SPA using Rails & Backbone"

    1. 1. By: Ashan Fernando
    2. 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. 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. 4. Ruby on Rails Java Script (Backend) (Frontend)Jammit or Rails 3.1 + Asset BackbonePipeline Backbone Relational• Asset Packaging for RailsRABL Underscore• (Ruby API Builder Language) JQueryDEVICE JQueryUI• Authentication solution for Rails Modernizr* Database• MySQL Uniform
    5. 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. 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. 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. 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. 9.  Backbone collection is bind to a rest service using its url attribute var books = Backbone.Collection.extend({ model: Book, url: /books.json });
    10. 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. 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)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×