Category Archives: Backbone.js

Best Practice to Build a Backbone.js App

backbone-300x53I’m going to show my way of building a Backbone.js application architecture. But first I will tell you why I’m going to do that.

There is no one best way to build a Backbone.js app, Backbone.js is so flexible that you can write a good application is many ways.

Backbone.js has a lot of critics. The most obvious of all is the claim that there is no one straight forward way to build a Backbone.js app, more than one recipe exist. Every individual is doing it a little bit different. In my opinion that is a good thing.

What You Already Need To Know

This is a basic tutorial for creating an application architecture but you should already know what is a backbone model, collection, view and how to create them.

Freedom of Coding

You can built an app in any way You want. That can be a bad thing if you are not such a good developer. So I will say to you that if you are planing to be a mediocre developer, don’t develop in Backbone.js, it’s not that it is hard, it’s actually very easy. So easy that it will let you do stupid things, similar to PHP.

Gradually Adaptation

Backbone.js is a very versatile tool, and as such you can basically do whatever you want. One of these perks is the ability to convert your app gradually to Backbone.js. Yes! it is not a framework, you can play with a little feature and you can migrate your app bit by bit.

POP, or Power Of Plugins

I’m not talking about Backbone Plugins… those exist and they are great. I’m referring to any JavaScript plugin that exist. want to use the funky jQuery dropdown plugin that you saw? You can! Or what about this beautiful bootstrap tooltip plugin? You can.

In fact it is very easy to use any plugin and embed it in your Backbone.js application. This feature was the most important one for me.

Application Structure

Ok, after the ‘why’ let’s move on to the ‘how’, Every Backbone.js app that I’m building has the same structure layout. It does not have to be in that structure, I just found out that most of the time that structure is a best practice for me.

I’m using one global variable that holds the entire application. Usually I call it ‘app’.

here is the structure of the app object:

As you see under the app object there is another object called ‘bb’ that is my short to Backbone, all my Backbone objects will exist under the ‘bb’ object.

Under the ‘bb’ object there are three types of objects that start with an uppercase

  • Models
  • Collections
  • Views

And as you can imagine, all of the models will be under ‘app.bb.Models’, collection under ‘app.bb.Collections’  and views under ‘app.bb.Views’

The actual instances of models will be under ‘app.models’, same for collections and views.

Creating a New Model Object

When creating a new model, just extend the ‘app.bb.Models’ object:

It is best practice that the object name will also start with an uppercase, this way it will be easy to distinguish between objects and instances.

Creating a New Model Object Instance

Creating an object instance is simple:

The same process apply to collections and views.

Raw Data

Preserving data after manipulation could be easy when you have a dedicated object for it. Want to create data that is not part of your models / collections / views? In those cases I save the data under ‘app.data’ and ‘app.data.rawData’. This is not a good idea if you have a huge amount of data – the browser have a size limit and with a humongous amount of data it could crash.

You should use Underscore.js

I must admit, the first time i encountered Underscore.js i didn’t get it. All I saw is a bunch of functions…

Let me start by saying that you want to use underscore.js, you might don’t know it yet but you want to.

Underscore.js is exactly what it seems – it is bunch of functions. But these collection of functions have one true goal – to make you put your attention on developing your logic and make some operations trivial. If you are familiar with jQuery, than you probably know the benefits of how it is simplifying the DOM manipulation, Underscore.js is similar to that in a manner that it is simplifying data manipulation in JavaScript.

Underscore give your JavaScript coding a turbo engine by giving you functions that let you sort and filter your data really easily.

The easiest way to understand Underscore.js is by an example:

Let’s say that you have a collection (an array of JavaScript objects of the same kind) of student grades and you want to give student id ‘15’ an extra 10 points.

In pure JavaScript it could look like this

In Underscore.js it will look like something like this:

At first it looks a bit weird to use the ‘_’ as an object, but if you got used to the jquery ‘$’ you will get used to this one too.

The findWhere function will go over the collection and will return the first occurrence of the the student with an ‘id’ of ‘15’, this is really efficient because if you have 1,000,000 students – it does not have to go over all of them – as soon as it finds it – it will stop the search.

besides the performance boost and the fact that it was easier to write you can see that it is easier to read – that is an awesome bonus because six month from now when you want to add a cool feature to your code you can understand it better because it is more readable.

Another example is to create a function that returns how many students got a grade that is higher than 85:

And the Underscore.js version:

the function that is passed as a second parameter to the filter function is the actual filter function, that mean that each object that will return true from that function will be added to the filtered collection – in our case each object that has a grade that is higher than 85 will be in the filtered array collection.

We could use some other function called countBy to get a similar (yet different) solution:

As you can see – complex logic can become really easy with the power of Underscore.js functions – and I showed only a few of the more simple ones. You can use complex operations like ‘map’ and ‘reduce’. Reduce function could be used for summing operations over objects, for example:

Let’s say that we have a collection of family, and each object in the family have an income. We want to calculate the total income of the family members. So, that’s easy with reduce:

 

That’s it! If you wonder what the third argument is then it is the initialization of the sum var – but it can be practically anything.

Underscore has a lot more functions to handle objects and object collections – you can find out all the function reference API on Underscore.js website.

Underscore.js have more features except from from the previous functionality, it has a built in templating function, a simple one, but that is where it is powerful – it is also simple to use…

All Underscore functions are chane-able,  that is another characteristic that was taken from jQuery.

Extending Underscore.js to your own use case:

It is very easy to extend Underscore.js and built on top of it – just use the mixin function to do that:

That example show a simple way to extend Underscore function base to your own, in this case we created a new function called capitalize which capitalize the first letter of the string and turning to lower case any other character.

Please note that in addition to all of the above Underscore also has a section on functions – this section can help you bind function and other helpful development workflow like ensuring a function could get called only once, delayed, run only after called X times and much more.

I want to end this post here, not because I don’t have anything else to add about Undescore functionality – it has a lot more power, that you can discover for yourself in the project website. I encourage you to do so! go ahead and play around

Best practice – implementing a collection view in Backbone.js

backbone-300x53

Lately I was working a lot with Backbone.js, I really love this tool! It is so easy to encapsulate my code into separate components.

What I had a lot of thought about but with no real answer is what is the best way to implement a collection view?

As I see it there is mainly two ways to approach this:

  1. Implement the model with a model view and the collection view will just be the container that contain all the model views.
  2. Implement the collection view to render also the models in it.

Each of these approaches has upsides and downsides. And the difference is really the question of where to render the model? in the model view? or in the collection view? the intuition is to do it in the model view – but that is making a few disadvantages of interaction between the models.

The downside I have with the 2nd approach is that for any addition / subtraction from the collection the entire collection view (with all the models) will need to re-render, in a collection with thousands of models – that is a huge problem! But it has an upside too – if the models have some kind of interaction between them (sorting, filtering) it is much more easy to implement it in the 2nd approach.

The downside of the 1st approach is the upside of the 2nd and vice a versa. So I could say that I should select the solution according to my needs, and that is what I did until now. Until the day that I needed both upsides…

So the question is – is there a way to implement the 1st approach but to also have the ability to have sorting and filtering on the UI? The only way I could think about that happening is that the collection view will also hold all of the model views but that just does not sounds right…

Go with the Model-View approach

Well, it is the combination of both that solves this problem. How can it be both? it is actually the first approach, each model has it’s own model view, so adding to the collection will not need to render the entire collection view. Only when we want to sort / filter – the entire collection view will be re-render.

Encapsulation

This solution is really a best practice since the models does not know about the sorting / filtering that can be made to them – this will be implemented in the collection and the final visual result will be rendered in the collection view

Untitled drawingSo when we want to render all the models that a ‘filter’ function returned us. we will run on each model and we will create it a model view and then we will append all the model views to the collection view.