Thanks to the large diffusions of mobile devices such as tablet and smartphone, nowadays when a developer has to create a web application, the first requirement he has to satisfy is designing a web applications that can be delivered via a desktop browser or a mobile device (iPhone App, Android App and so on).
The first question a developer has to answer is: how to organize the code between server and client side?
If the client side is rendered completly from server side code, the developer has to write different code for each device. So it could be complicated. A better approach is writing the server side code in a manner that it just returns a jSON response with all data of the application; then the client side javascript library will read and process this jSON response in order to create the required DOM elements. With this approach, the developer can use same server code for any device and when the developer make changes on the client side, the server side code does not need to change.
Building RESTfull applications it the currently trend on the web, all the data/content of a web application are exposed through an API.
Today a developer needed an hand in managing business logic on client side. jQuery is great but we have to store object informations into the DOM. jQuery doesn’t offer a good way on how to organize the application logic and data. With jQuery a developer can build an entire application without any formal structure and this, in complex project, could be a big problem. This is the reason I’m going to talk about “Backbone“.
What’s Backbone?
Backbone is a MV(Model-View) javascript library helping developers to structure web application. It encourages developers to abstract data into models and DOM manipulation into views and bind the two together using events.
In the Backbone’s architecture we find:
- Model is part of your code that retrieves and populates the data. The data can be stored in a web broser’s localStorage data-store or suncronized with a database. The models can also very easily interact with a RESTful API provided by your web application, making much easier to synchronize data between your frontend and backend applications.
- Collections: an ordered set of models.
- View is the HTML representation of this model. The views offer the ability to easily update your page elements when the data in the model is updated.
- Router: it allows to save the state of a javascript application via a hashbang url (the part of the URL after the #). Its main purpose is to translate url requests into application states.
The future of the web are Single-Page Applications
Today is a common practice to develop Single-Page Applications(SPA). A SPA is a web application emulating a desktop application in look/feel.
These applications do not require a page load between user interactions, UI components of the page are loaded up front and the user sees the page instantly.
In a SPA we fetch data from a server via multiple asynchronous server calls (Ajax), the the data can be dynamically rendered in a new view within the same page.
Since this doesn’t autoamtically update the URL, the role of navigation thus falls to a router, which assists in managing apllication state. These applications have not just changed the user interface design, they have also changed the server architecture; server becomes lean and client picks up extra weight.
Backbone helps developers to build Single-Page Application, simplifing server-side persistence and decoupling the DOM from your page data.
References
- Backbone.js official web site
- Slide: How to write a well structured multi page web application
- Tutorial: Developing Backbone.js Applications
- Tutorial: Building SPA’s (Single Page App) with Backbone.js
- Single Page App
- Single Page Applications: Fat Client – Slim App
- Backbone-relational Tutorial – Nested Models With Backbone.js
Video Tutorial
A Backbone client Side tutorial
A Backbone server Side Tutorial
