Backbone.js…I need a chiropractor pt.1

I’m a little over three weeks deep into Telegraph Academy and I must say it has been a truly unique experience so far. The “Sprints” that we endure every two days are trying to say the least, they truly push you out of your code comfort zone. One particular sprint that is notorious for being of the most difficult deals heavily with Backbone.js, an MV* framework that remedies spaghetti code and gives your app structure…like a spine…get it…backbone…there’s a joke there. Due to the difficulty I experienced with this framework I thought I would give an overview on how this framework functions.

First thing to understand about Backbone is that it is a MV* framework. This means that Backbone deals primarily with Models and Views. A Model is the facts and only the facts, it represents the data for your particular application. Models are not concerned with Views rather Models trigger the events that Views utilize to display the data to the html. Below is a simple example of a Backbone model.

Screen Shot 2016-04-04 at 9.04.09 PM

The above example exhibits a simple Model of animal, the defaults method sets the initial state for this model and can consist of additional methods that you would like your skeleton Model to have. Which brings me to Collections,  a collection of models that are different but similar in model structure, rather a group of instances built from the original model.

Screen Shot 2016-04-04 at 9.24.42 PM

Notice above how AnimalCollection is created, extending from the model Animal which denotes that the collection belongs to the Animal model. As we create new instances of the Animal model we set their own defaults to what is specific for that particular animal. Finally we store the new animals in ‘myAnimals’ a new instance of AnimalCollection. It’s important to realize that myAnimals is basically an array of objects which in essence just vanilla javascript. I have found that once you break this framework down to it’s fundamentals, it’s just javascript.

Last but not least are the Views, now as I mentioned earlier the Views only job is to display the data. Having this sort of modularity is extremely useful when your app grows in complexity, this way edits to your code will only effect a certain piece of your code and not require you to delve deeper. Due to the complexity of Views I plant to devote an entire post to them in the future, hopefully by then I will have found my chiropractor.

Advertisements