Programming | Computer Science | Software and Technology

Wednesday, August 26, 2015

AngularJS is really a Super-heroic (not just because they say so) framework when it comes to modern web application development. With the introduction of AngularJS, there was no longer a place for most of the loopholes and smelly codes in client side programming. It helped the web developers a lot to manage, reuse and extend their code by providing the the well reputed MVC architecture and a blueprint to build their applications upon. So lets make a quick peep into this awesomeness!

Why so dynamic?

Nowadays, when we browse through the internet, we come across thousands of types of those fancy features in web apps. We seldom find pure HTML-only websites (almost never web apps). This is due to the extensive list of features provided by Javascript, which took the web application domain into a whole new level during the past two decades. A few years back,
  • After submitting a form, we had to wait for a considerable amount of time until the page completely reloads, just to know that we have done a mistake typing our email address. Great! Now go on and fill out it again to find what will go wrong this time. 
  • We had all the trouble in the world just to watch an album of images one by one. Yes, we had next, previous buttons! But to view the next image, we had to reload the entire web page with hundreds of images on it. (If you are lucky enough, you will land on the same scroll position of the page. Otherwise you have to scroll down too)
  • After doing a small change to your email preferences, we had to reload the entire page to see the change in action.
  • We did not have the comfort of experiencing the auto-fill, suggestions features in text input elements.
Since in '95 Brendan Eich introduced Javascript, hundreds of millions of websites and web apps have been using it to provide a rich dynamic experience to their users. Great libraries like jQuery, jQuery UI, YUI, D3.js and Kendo UI has been putting the icing on cake of Javascript for this entire time.

So what's the issue?

The issue is not really on the Javascript side; but with HTML. It is entirely apparent that nothing is going to replace HTML when it comes to marking-up web pages. But it lacks the dynamic behavior and the trouble we have to go through to make it such is big, sometimes..

If you have used Javascript/jQuery with HTML, you may have observed a common pattern which we should adhere to make our web apps (Whenever I use the term web apps, be kind enough to think about websites too) dynamic. Lets take a simple example,

In the below example, when a user types his username in a text input, a suggested email address is displayed underneath. I am using an approach using jQuery and another approach using AngularJS. (I apologize because the code is not in proper standard or using best practices. I only need to explain the difference.)

jQuery Approach

html

<div ng-app>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <div>Suggested email : {{yourName + "@gmail.com" }}</div>
</div>

jQuery

$("input#username").keyup(function () {
    $("#suggested_email").html("Suggested email : " + $(this).val() + "@gmail.com");
});

result

AngularJS Approach 

html

<div ng-app>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <div>Suggested email : {{yourName + "@gmail.com" }}</div>
</div>

javascript

Yeah you don't need any Javascript/jQuery for a simple task like this when using AngularJS. The developer should be more focused on the application logic and the best practices. He should not bother implementing and testing trivial DOM manipulation logic.


result

The result is same as above.

So, what is the secret behind this? 

Like I mentioned earlier, AngularJS makes HTML more dynamic. One core feature of AngularJS is the way it handles two-way data binding. In the above example, if we take a look at the jQuery approach, we can see that every time a change occurs in the text input we should explicitly write code to catch this event and manually manipulate the relevant DOM elements accordingly. Just think that if the change of that text input should change 10-15 DOM elements, we have to write more and more code to manipulate all those elements.

Here we were concerned about how to communicate from the html view to the application model. But what if we need to change a DOM element whenever our underlying model changes? Lets say that the suggested email text is displayed according to the result of an AJAX request. So, we have to write another code segment to handle this functionality.

This really messes up our application logic, makes it non-reusable and extensible, and most importantly testing becomes a nightmare.  The two-way data binding mechanism really makes the developer's life easy by allowing the communication between View and Model two way.

2-Way Data Binding of AngularJS

This design not only makes the code well-organized, but also it makes our application much more testable. Because of the fact that DOM manipulation is clearly separated from our business logic, we can plug it out and test separately. Nowadays, applications built upon almost all the programming languages gives a great support for testability. So why don't we make our Javascript based web apps easily testable too?

Conclusion

Here we have discussed about AngularJS by means of its capability to make HTML more dynamic and we had a look at one of its beautiful concepts called 2-way data binding (We'll talk about this in depth in the future). According to what we discussed, I think it is clear that AngularJS is worth giving a try. Not just because, it makes our lives easier, but also it makes sense to build a reusable, extensible and testable application too. In the upcoming articles, we will take the features of AngularJS one by one and discuss about the usefulness of them.

Popular Posts