AngularJS, BackboneJS, similarities and differences.

Written by - Saumya

26 November 2015

When learning a new framework or library, its very difficult to look at the same problem from a different perspective. But when you hear a lot like ‘ohh, that library is similar to this’, then the tendency comes to compare it. And when you see similar terminology in both the frameworks, then you are absolutely sure that both are doing the same thing in the same way. I think, thats the main problem here with learning the frameworks like AngularJS and BackboneJS. Both of these have their own share of how to and where to, overall they seem completely different, even though the terminolgies seem completely same.

One such thing is Module. Both these frameworks define Module and use it. Both of them tell to use Module to separate concerns. But then both of them seem completely different while implementing the Module. Umm, Why?!

The difference is in the Module definition of both the frameworks. And that pushes back someone very new to the frameworks, thinking something wrong either in the frameworks or in the understanding of them. While the truth is something simpler than that.

AngularJS uses CommonJS module declaration.
BackboneJS uses AMD module declaration.

Once you know this difference, things get a lot easier to understand and will take lesser time than before to get upto speed in either of these. Have a look at the Module Definition documentation, it explains the difference of the module definitions. The bottom line is Javascript eco-system gives us two different kind of Module systems. Frameworks use one over the other depending upon their opinion. For example NodeJS uses CommonJS approach, while DOJO toolkit uses AMD way.

Now lets understand why this difference matters us as a developer. In CommonJS style declaration, each file is supposed to be a module which is same as AMD way too. The CommonJS module can expose as many Objects as one wants, to the application level. So that once one CommonJS module is included, the application has access to all the exposed Objects in that module. For that matter you can understand, why just adding a some-ng-file.js and including that ModuleName in the dependency of an AngularJS application, gives a lot of ngObject to play with. Where in AMD each module is exposing just one Object. If you want to play with the internals of that Object, you have to call that Object’s properties and methods. This way makes you feel like as if you are working in a Classical (Class based) language rather than Prototypical language. BackboneJS is doing exactly the same thing. Once you have got a BackboneJS module Object, you deal with it as if you are dealing with an Object from a Class. You invoke methods and properties of that Object.

So one Module in AngularJS is exposing a lot to play with and one Module in BackboneJS gives you just one Object to play with. The similarity goes to other frameworks and libraries as I mentioned earlier about DOJO Toolkit and NodeJS.

Happy coding with modules.