AngularJS vs. BackboneJS
AngularJS is a JavaScript library supported by Google that is distributed freely through the MIT license. As a derivative of the MVC structure, MVVM allows you to develop a one-page web application page in a short time and avoid duplication. In this blog, I explain the basic concepts of AngularJS and the features that distinguish it from other libraries.
Directives and Expressions
If you’ve worked with jQuery or a similar library before, you may understand that sometimes reading code can be challenging. When you view a page source, you can get a little idea about HTML objects and what they do. However, from a programmer’s perspective, we need to find them by ID or another parameter and link them to our code to communicate with the same objects. AngularJS has solved this problem by expanding HTML and adding new features.
This example shows that the directives saved us from writing a condition statement and a loop. We did not need to write the name of these interface objects in the “Controller”. In this section, {{}} is called Expression and is used to create output. There are various filters to be used with expressions.
For example, if we say {{user.name | uppercase}}, the output would be filtered and displayed in capital letters. The use of these filters is similar to the Pipe in Unix, not only in shape but also in function. We can apply multiple filters by sorting as {{ variable | filter1 | filter2 }}. We can also write new filters or directives according to our needs.
Two-way data binding
Unlike a template engine, directives are a structure that allows us to both read and display data, add new data, and edit existing data so that we can bind the data in two ways. The simplest example is the following.
Here, with the “ng-model” directive, we bound the input box into the “name” variable for data entry. If the condition in “ng-model” is true, viewing is not allowed. When there is data entry in this box, we see that the variable “name” and the expression {{{name}} change in parallel. Of course, this feature is used in “Controller” rather than using the interface data to bind the interface in a real project. However, the disadvantage of this feature is AngularJS needing to check whether there is a change in data by comparing it to the previous values one by one each time there is a need to refresh the interface. It is quite likely that it reduces performance in large scale applications.
Dependency Injection and Testing
Dependency injection is a simple but essential principle of modular project development. When we create various classes that implement an interface class, the principle is to use those as parameters instead of directly defining them within the code. In other words, classes “A” and “B” implement the same interface, and we can use them interchangeably. However, we still have to define them as “A” and “B”. But, why does the change of these classes create a problem for our module? If we use an interface class-type object as a parameter instead of defining these classes in our module, the use of “A” or “B” changes per our project, and it is no longer our problem. We can easily inject any object that solves our problem into our module.
AngularJS uses the dependency injection principle at all levels. Let’s say we have a service returning JSON, and we want to change it to XML. All we need to do is to change the parameter we assign to our code. The most useful aspect is to facilitate testing. For example, if we want to test a code that modifies the DOM, typically, we have to view a page and run the tests using a tool such as SeleniumHQ. Although SeleniumHQ is a practical and useful tool, we cannot run the tests fastly enough, as we need to create a page every time. However, with AngularJS, we only need to check the changes after injecting a virtual class to the function that makes the changes, instead of DOM. At this point, we no longer need to view a page. We can run our tests smoothly using any tool.
Some drawbacks of AngularJS are as follows;
First of all, learning its logic and API requires more effort than other libraries. It is not possible to find any known service/application developed with it yet. I have not personally experienced it. However, some articles state that it works very slowly with IE7. Finally, AngularJS can cause problems when working with some other libraries (jQuery, RequireJS, etc.). If you’re not quite sure about what you’re doing, you usually can’t do it. Then, you create more static pages than dynamic pages.
Some resources for learning Angular:
https://github.com/jmcunningham/AngularJS-Learning
http://angular-tips.com/blog/2013/08/why-does-angular-dot-js-rock/
http://docs.angularjs.org/tutorial/
http://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-with
If you are writing code in a dynamic language like Python, you may notice that some functions are already considered and built for you in advance. Unfortunately, that’s not the case with JavaScript. Underscore.js, a kit containing these predefined functions, can help you with this. It is not only used for functional programming but also for substituting for some missing functionalities in JavaScript. The functions in Underscore.js do not contain complex algorithms that you cannot write, yet they help you save time to start from scratch.
Amongst dozens of functions, functions such as map, reduce, min, max and range are self-explanatory. If you get confused about the values they take and return, you can get help from the Underscore.js documentation, which is relatively satisfactory. Some examples of other functions are;
_.bind (function, object): In JavaScript, the use of the keyword “this” is a little different from other languages. The scope of the object we want is not always the scope of the object we expect. With this function, we can connect a function to an object we want. So this is where we use it and how we use it ”this“ always shows the object we connect.
_.throttle (function, duration): Restricts the given function to a specified time frame and ensures that the task is not executed in more frequent calls.
_.union(*arrays): Creates a single series of arrays, taking only one of the elements found more than once.
_.difference(array, *others): Returns the values from an array not present in the other arrays.
_.memorize(function): Reverts the given tasks by adding memory. For example, you have a function that calculates and returns the same value for the same arguments. In this case, it is more practical to replace the calculated value in your previous call from memory instead of recalculating. You can be sure that using “memorize” for this type of function speeds up your code.
You can check Underscore.js documentation for further information.
Backbone.js is an MVC variant (MV *) library developed by the same developer as Underscore.js. It actively uses Underscore.js functions and is lighter than other libraries; therefore, it requires extra code for interface and other operations. It gives us incredible flexibility. Compared to a comprehensive alternative such as AngularJS, the biggest con is that it is highly dependent on Underscore.JS and Zepto. When you add Zepto and Underscore to Backbone.js, it reaches the size of a comprehensive library like AngularJS, even though it is as little as 10 KB itself. We can omit this as a comparison criterion because you can use jQuery or Underscore in an application that you write using AngularJS.
Another con is the lack of helpful features such as “dependency injection” and “two-way data binding” that Angular has. Nevertheless, it is a library that single page application developers frequently use thanks to the community and many plug-ins. At almost every corner of the internet, you can come across a website that uses BackboneJS.
TodoMVC is not a JavaScript library like the others. It is a project that aims to rewrite a simple to-do list application using dozens of different MVC libraries. It checks the applications, helps us quickly compare libraries, and discover which library suits us best. I wanted to mention it as I made great use of it while writing this blog post. If you would like to check it, you can see the examples from the Github page.