Web development has long benefited from a variety of PHP and Ruby frameworks that adhere to the MVC architecture. Yet, for some time, there was a discernible gap in similar frameworks within the JavaScript ecosystem. Enter Backbone, a game-changer in the world of JavaScript, paving the way for organized and modular front-end development by employing the MVC pattern with finesse.
Exploring Backbone
Backbone is a streamlined JavaScript framework crafted by the inventor of CoffeeScript. It’s important not to mix Backbone with a DOM manipulation library like jQuery; rather, it excels in rendering structure to JavaScript applications, working alongside templating systems with ease, thanks to its compatibility with JSON.
MVC Architecture and Backbone
The MVC acronym translates to Models, Views, Collections, and Routers in the context of Backbone.
Models
Picture a Model in Backbone as an individual entity, much like a record in a database. For instance, if you’re manipulating user data, each user would be instantiated as a Model. Constructing a model is straightforward:
var user = Backbone.Model.extend({});
But to make our Model functional, we need to inject activities that it should perform upon being created:
User = Backbone.Model.extend({
initialize: function(){
alert('Welcome to WebdesignerDepot');
},
defaults: {
name: 'John Doe',
age:30,
}
});
var user = new User;
Creating a Model instance with defaults could look like:
var dave = new User({name:'Dave Smith', age:25});
To fetch and update Model attributes, one would use:
var name = dave.get('name');
dave.set({age:31});
Collections
A Collection aggregates multiple Models, just as a user database might hold various users. With our User Model in place, a Collection of users can be represented with:
var Users = Backbone.Collection.extend({
model: User
});
To populate this Collection, you’d simply add multiple users:
var barney = new User({ name: 'Barney Stinson', age: 30});
var ted = new User({ name: 'Ted Mosby', age:32});
var lily = new User({ name: 'Lily Aldrin', age: 28});
var himym = new Users([barney, ted, lily]);
By logging himym.models, the specifics of barney, ted, and lily can be viewed.
Views
Views connect directly to DOM segments and Model data, serving to display this information to users. Commonly, a View would be bound to an HTML element and styling class:
UserView = Backbone.View.extend({
tagName: 'div',
className: 'user',
render: function() {
this.el.innerHTML = this.model.get('age');
}
});
You can also enhance Views with event handling for interactivity:
events:{
'click.user': 'divClicked'
},
divClicked: function(event){
alert('You clicked the div');
}
Routers
Routers in Backbone manage URL navigation within the application, particularly when leveraging hashtags (#):
var appRouter = Backbone.Router.extend({
routes:{
'user': 'userRoute'
},
userRoute: function() {
// the code to run when http://example.com/#user
}
});
Backbone.history.start();
This rudimentary router acts when the #user hash is accessed, establishing an interactive web experience.
Final Thoughts
We’ve just scratched the surface of what Backbone can achieve. For a holistic perspective, consider exploring Backbone’s templating options. Hopefully, this primer has illuminated the value MVC architecture brings to client-side engineering.
