Introduction to Backbone.js
10:00
The process of developing web applications has evolved considerably in recent years. Originally websites were fixed pages that required programmers to alter their layout or content. Today, web applications make use of Javascript in order to generate and distribute website content more dynamically. Javascript allows content to be rendered without the need to refresh the page upon each interaction, making it the world's most deployed programming language.
A considerable, common problem with Javascript applications however, is that the code can often be messy and unstructured and this makes them hard to maintain or amend. Many Javascript libraries are great at what they do but the lack of structure in them can often lead to applications filled with nested callbacks and concrete DOM elements. A solution to these problems are provided by Backbone.js by organising the code and increasing its overall ability to maintain them. Backbone has a flourishing community and has been used in the assembly of many big platforms like Pandora, Wordpress and Foursquare.
Backbone is made up of the following modules and let's explore them in the sections below with some simple examples:
- Models
- Views
- Collections
Models
Models are the core of every Backbone application and generally contains all of our data. They are the building blocks of backbone and can perform accompanying logic such as validation, defaults and getters/setters.var App = Backbone.Model.extend({ defaults:{ name:"JohnDoe", Age:27, Occupation:"Web Designer" } })
Here we created a model and set some default properties. These defaults determine if anyone has created a new instance of this model and assigns the default properties accordingly. For example if the 'name' and 'age' properties are set in the new instance, but the occupation is left blank, this property will take the default occupation value which in this case is “Web Designer”.
Views
Views in Backbone are equivalent to 'controllers' in the MVC framework Ruby on Rails. They bind the user events, render elements and templates, while appropriating data from models. Let's render the name property from our App Model onto a web page.var AppView = Backbone.View.extend({ el:"#AppContainer", intialize: function(){ this.render() } render: function(){ this.$el.html(this.model.get('name')) } }) var application = new App; var appView = new AppView({model:App})
So what’s going on here? Firstly, we created a new instance of our model with the variable 'application' and now we want to render this model on our webpage. Each View has an element that it's associated with (this is represented by 'el' here). The render function will generate the content into the selected element, in our case our App Model's name property will be generated within our '#AppContainer ' element on the page. The initialize function is called when the view is initiated, this means our render function will be immediately called and it should display our content on the webpage.
Collections
Creating numerous Models and associated Views can get cluttered quickly, especially in a large application. If you follow the pattern of creating one Model and a View, then another Model with another View, the result will be multiple models with no real connection. Backbone provides a solution for this through Collections, which are essentially ordered sets of Models. These Collections are like powerful arrays that can make announcements, listen for events when any element in the Collection changes and fetch model data from the server. This is a much cleaner way to store our data as functionality can be added to multiple instances of a Model. Much like we used Views to render our Models on the webpage, Collection Views can be used to provide the functionality for rendering each Model in a collection. A Collection View can filter through each item within a collection and for each item, deliver its own view with its own event listeners which can be very powerful.var AppCollection = Backbone.Collection.extend({ model:App }) var appCollection = new AppCollection; appCollection.add(app1) appCollection.add(app2) var application = new App var application2 = new App
Here we have created a new Backbone collection called 'AppCollection'. It needs to know what type of Model it will be dealing with so we pass it the 'App' Model created earlier. Beneath that we have created two new instances of the 'App' model and a new instance of 'AppCollection' called 'appCollection'. We then pass our two newly created 'App' models into the 'appColleciton' and presto! we have a collection of models. From here its possible to create a Collection View that would filter through each model in the 'appColleciton' and create a View for each accordingly. This method is far more concise and allows for announcements and events to be made on multiple Models, making Collections extremely powerful.
0 comments