![ 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
}}]
});](https://image.slidesharecdn.com/spaarchitecture-120727131203-phpapp02/85/SPA-using-Rails-Backbone-10-320.jpg)
SPA using Rails & Backbone
- 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)
Editor's Notes
- #4: 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.