Tackling Backbone.js: Understanding its MVC — 01

a ‘technical’ blog post.


What is Backbone.js?

Backbone.js is an MVC framework for building RESTful single-page web apps. It’s a tool for front-end development that integrates well with other popular libraries like jQuery and Underscore.js. If you’re already familiar with those tools, jumping into Backbone should feel fairly simple. To get started, simply add Backbone, Underscore and jQuery to you project!

Did I say MVC?

Well, technically. But, before I jump into the nuances, lets answer the “What is MVC?” question first. Model-View-Controller (or MVC) is a pattern for implementing user interfaces. This type of architecture allows us to separate software into several distinct but connected parts that have very specific jobs and the ability to communicate with each other in a determined way.

There are 4 basic components to keep in mind. The Model, the View, the Controller, and the User. Let’s start with the user. The user interacts with your app as it’s service. Without a particular user (human or otherwise) your app is sorta useless. The Model handles data as dictated by the Controller. The View displays information to the user as informed by the Model. The Controller is more or less the command center. It captures information from the user and sends commands to the Model to update its associated View.

If you’d like to learn more about MVC patterns and other user interface patterns, I recommend checking your friendly Wikipedia post on MVC, HERE!

Model + View == Controller

In Backbone.js, the Model and View are coupled together to act as the Controller. This sorta simplifies things a bit. That interaction will look something like this. The user sends the View an input. The View then sets off an event which sends data to Model. The Model communicates that change to a database or server. The Model then updates the View as a consequence of the initial event. BAM!!! The user sees that change as they interact with your application.

Models and Views are objects in Backbone.js that we instantiate as needed. Below is an example of a Guitar Model.

Backbone.js Models in WebStorm IDE

We can now instantiate as many guitar as needed.

Backbone.js Models cont. in WebStorm IDE

Notice that we are defining custom methods to our Guitar Model, then we’re giving each guitar a particular set of methods specific to that guitar.

Below, we’re creating a View — similar to how we create Models — to render to the DOM information about a Guitar.

Backbone.js Views in WebStorm IDE

In our GuitarView, we also introducing the initialize function. This is a feature of Backbone. If defined, it’ll be invoked when the object is created.

Collections of Models

Earlier, I mentioned that Backbone.js doesn’t have Controllers classes, rather it uses a Collection object that acts as an ordered container for a given group of Models. I guess it’s a Model-View-Collection library. This allows us to listen to event triggers from the Collection rather than a each Model.

Backbone.js Collections in WebStorm IDE

Stay tuned for more!!

As I explore this framework further, expect more from me and Backbone.