JavaScript, AngularJS : The Heroes of Modern Web Applications

Introduction

 

This article is dedicated to all my fellow JS lovers. I believe you too are one of them, otherwise, you won't be here. We know that the web world is moving very fast and the movement is heavily touching various JS frameworks. I mean, I am not saying server-side technology like ASP.NET, JSP, or Python are valueless and will vanish from the market. 

 

They are in there instead and besides that JavaScript is playing a vital role in application development.

 

Why? Why do I need to learn the world's most confusing language?

 

Forgive me for this hard title, but not only I but many passionate JavaScript developers have accepted that JavaScript is one of the most lovely, sweet, and confusing languages that play a vital role in web applications irrespective of server-side technology.

 

 

Yes, this is the beauty of JavaScript, whatever your server-side technologies are, JS is there always on the client-side and this is the reason for learning JavaScript. Let's think that today you are in ASP.NET, tomorrow you may need to work with some other server-side technology like PHP, JSP, or anything else, the server language varies but the client does not.

 

So, you can use your existing client-side knowledge (read JavaScript) in any web application. Fine, let's return to the 21st century. When the AJAX concept was being introduced, people used to use JavaScript as a form validation language, just to check a few input elements and prompt with a popup message, but the concept of AJAX changed the game.

 

The industry used this simple, lightweight language to exchange data from the server in a very clever way, and hence the popularity of JavaScript increased. So, like me, many believe that AJAX is the concept that made JavaScript popular.

 

Ok, I will learn JavaScript, but why all this JS Framework like jQuery, Angular and Backbone?

 

If you are frustrated with all of them then you are not a true JavaScript lover; okay I am kidding. Anyway, they are there to help you. Not to harass you by wasting your valuable time, to learn them. Yes, those are various JavaScript libraries, in other words, they are pure JavaScript code that performs a certain task and they are the master to perform their respective task.

 

 

Someone (read jQuery) is strong in DOM manipulation then another one (AngularJS) will help you to form an MVC structure in a client-side application and many more exist.

 

Let's have a quick look at various JavaScript libraries, then we will discuss a few cool features of AngularJS.

 

Backbone.JS

 

This is similar to angularJS but not as smart as Angular. It will help to implement an MVC structure in a client-side application. It's simple to use and implement and has nice documentation in its the official website.

 

Knockout.JS

 

If you are a Microsoft stack developer then you should love this framework. Microsoft unofficially suggests KnockoutJS as the client-side framework. It's cool and a very strong framework to implement the MVVM pattern in a client.

 

jQuery

 

No need to spend many words on jQuery, it shows it's power in action, not in words. It's a nice and very strong DOM manipulation library that is purely written on top of JavaScript. It's not only for DOM manipulation but also provides many useful functions, like get()/post() and so on to make AJAX calls and many more. If you still have not gotten your hands dirty with jQuery then I strongly recommend you do that.

 

Ember/ Mustache JS

 

Sometimes it's very common to perform the same operation repetitively in application development. In such situations, those frameworks will rescue you.

 

Just define a template, provide data and it will make wise use of your data in terms of template formation. Oh I know, it's really hard to express in words, just give it a try and have fun.

 

Node.JS

 

This is not a client-side JS framework but a server-side programming platform that has changed the face of web servers. Whether you believe me or not, a 4-line JavaScript code snippet can act as a web server on top of the node.Js platform.

 

It's a JavaScript platform built on top of a V8 JavaScript engine developed by Google. The point is that many server-side technologies are currently being inspired by node.js.

 

Fine, oh no more... Let's tell me Why AngularJS?

 

Yes, let me ask the same to you; why not angularJS? The truth to be told, again Angular is a JavaScript framework like the rest of all and the purpose is more or less similar. Being a JavaScript framework, it's too confusing like JavaScript. If you are an AngularJS beginner. But yes, once you understand the concept then it's cool and smooth. This is my personal perception; it may not match yours.

 

 

Let me make a strong comment. AngularJS is a total client-side solution, even if you are not interested in touching any other JS framework, it's ok.

 

What is not in angular?

 

From two-way data binding to DOM manipulation to make AJAX calls to a template system and many more and the most important is the MVC architecture in the client side. So, let's have a quick walkthrough of angularJS.

 

Client-side templating

 

Multi-page web applications create their HTML by assembling and joining it with data on the server and then shipping the finished pages up to the browser. Most single-page applications, also known as AJAX apps, do this as well, to some extent. Angular is different in that the template and data are shipped to the browser to be assembled there. The role of the server then becomes only to serve as static resources for the templates and to properly serve the data required by those templates. Let's see an example of what assembling this data and template on the browser looks like in Angular. We'll use the obligatory Hello, World example, but instead of writing “Hello, World” as a single string, let's structure the greeting “Hello” as data that we could change later.

 

For it, we'll create our template in hello.html as in the following:

<html ng-app>
   <head>
      <script src="angular.js"></script>
      <script src="controllers.js"></script>
   </head>
   <body>
      <div ng-controller='HelloController'>
         <p>{{greeting.text}}, World</p>
      </div>
   </body>
</html>

And our logic in controllers.js is as in the following:

function HelloController($scope) {
   $scope.greeting = { text: 'Hello' };
}

MVC in the client side

 

The MVC application structure was introduced in the 1970s as part of Smalltalk. From its start in Smalltalk, MVC became popular in nearly every desktop development environment where user interfaces were involved. Whether you were using C++, Java, or Objective-C, there was some flavor of MVC available. Until recently, however, MVC was all but foreign to web development. The core idea behind MVC is that you have clear separation in your code among managing its data (the model), the application logic (the controller), and presenting the data to the user (the view). The view gets data from the model to be displayed to the user. When a user interacts with the application by clicking or typing, the controller responds by changing data in the model .

 

Finally, the model notifies the view that a change has occurred so that it can update what it displays. In Angular applications, the view is the Document Object Model (DOM), the controllers are JavaScript classes and the model data is stored in object properties. We think MVC is neat for several reasons. First, it gives you a mental model for where to put what, so you don't need to invent it every time. Other folks collaborating on your project will have an instant leg up on understanding what you've written, as they'll know you're using an MVC structure to organize your code. Perhaps most importantly, we'll claim that it delivers great benefits in making your app easier to extend, maintain and test.

 

This is the great advantage of AngularJS; the point to make is, as I said earlier, not only angular but also many JavaScript frameworks provide an MVC flavor.

 

Two-way data binding

 

It is one of the great features that have come on the marker now that AJAX has become popular. Before AJAX single-page apps were common, platforms like Rails, PHP or JSP helped us create the user interface (UI) by merging strings of HTML with data before sending it to the users to display it. Libraries like jQuery extended this model to the client and let us follow a similar style, but with the ability to update part of the DOM separately, rather than updating the entire page. Here, we merge template HTML strings with data, then insert the result where we want it in the DOM by setting the innerHtml on a placeholder element. This all works pretty well, but when you want to insert fresher data into the UI or change the data based on user input, you need to do quite a bit of non-trivial work to make sure you get the data into the correct state, both in the UI and in JavaScript properties.

 

But what if we could have all this work done for us without writing code? What if we could just declare which parts of the UI map to which JavaScript properties and have them sync automatically? This style of programming is called data binding. We included it in Angular because it works great with MVC to eliminate code when writing your view and model. Most of the work in moving data from one to the other just happens automatically. To see this in action, let's use the first example and make it dynamic. As is, the Hello Controller sets the model greeting.text once and it never changes from then on. To make it live, let's change the example by adding a text input that can change the value of greeting.text as the user types.

 

Have a look at the following example.

<html ng-app>
   <head>
      <script src="angular.js"></script>
      <script src="controllers.js"></script>
   </head>
   <body>
      <div ng-controller='HelloController'>
         <input ng-model='greeting.text'>
         <p>{{greeting.text}}, World</p>
      </div>
   </body>
</html>

The controller, HelloController, can stay exactly the same without ever registering a change listener on the input field, we have a UI that will dynamically update. The same would be true for changes coming to and from the server. In our controller, we could make a request to our server, get the response and set $scope.greeting.text to equal what it returns. Angular would automatically update both the input and the text in the curly braces to that value.

 

Dependency Injection

 

This is another great feature of AngularJS. AngularJS is developed in such a way that all other frameworks also fit in the same application and avoid name collision. Dependency injection in AngularJs is like magic. It lets us follow a development style in which, instead of creating dependencies, our classes just ask for what they need. This follows a design pattern called the Law of Demeter, also known as the principle of least knowledge.

 

Have a look at the following code.

function HelloController($scope, $location) {
   $scope.greeting = { text: 'Hello' };
   // use $location for something good here...
}

The $scope service (yes, it's a service) is playing the main role of dependency injection here.

 

Conclusion

 

I think I have highlighted a few very important concepts of angularJS. There is mare many more remaining in the list. I am interested in showing some practical stuff with AngularJS in the next article.

 

Happy learning.