Intro to Angular and the Evolution of the Web

The World Wide Web is a place where we see rapid changes. What is new in the morning is a forgotten and ignored afterthought in the evening. If there is something in the modern age that moves faster than anything else, it is the web, the world of the internet. But the technologies behind the web do not move as fast as the web itself. Every time we want to make some changes to the technology we have to think about backward compatibility, so that what already exists on the web does not fall to pieces or become unusable.

The Frontend Survivors

Once upon a time the web was totally static. Many technologies popped up to make it dynamic, while others passed away when new ones came into play. Most of the time the primary changes were in the backend to make the web more dynamic, more interactive. The frontend of the web is governed by a markup language (HTML), a styling language that beautifies that markup (CSS), and a scripting language that makes things dynamic and interactive in the front side of the web (JavaScript). There were other languages and technologies for the front part of the web, but they didn’t last long or gain mass acceptance. Frontend technology did not change as much and as fast as the technology changed for the backend from the beginning of the web.

Dependence on the Backend for Dynamic Behaviors

Every time we want to make something interactive, process some data, update the view in front of the user we tend to fall back to backend technologies. The user clicks on something, waits for some time when the browser goes round and round, and after some time the user get what they want to see. Most of the work could also be done by the frontend without contacting the server again and again. But most developers tend to defer the task to the backend or the web application servers. Because there are a lot of choices for development in the backend—a lot of languages, a lot of frameworks, a lot of ways to do the same task. Back in the browser we only have one language called JavaScript to make things interactive and small number of options, libraries, frameworks to carry out the common tasks. Again, JavaScript had no native support for module, OOP, type-safety and a lot of features that every developer wants from a modern programming or scripting language. It gets messy very quickly when working on a relatively large project.

Path to Eliminating the Pressure on the Backend

To solve the problem described above a lot of other alternative languages tried to make their place in the browsers and none had the luxury to survive long. In the meantime a lot libraries and frameworks based on JavaScript tried to make scripting with JavaScript more fun and productive. A lot of them came into play and a lot of them passed away over the years. In the process of evolution of those frameworks and libraries, we now have some that most developers like to work with. Frontend frameworks helped eliminate the pressure on the backend and helped make the user experience much smoother. In this article I am introducing you to one of the most popular frontend web application framework called Angular.

Introducing Angular

Angular is an open source frontend framework for developing single page applications (SPA). It was made by Google, developed and maintained by a lot of individuals, organizations including Google itself. Angular is the successor to AngularJS. But, Angular is not backward compatible with AngularJS. At the time of this writing Angular's major version number is 5.

A framework should solve the most common problems, so that developers using that framework need not do that. Angular has solved a lot of common frontend web application development problems. It has divided the problems into smaller parts and tried to solve larger problems more easily. JavaScript is the only practical option as a programming language in browsers. But, it is an ever immature language that cannot be fixed overnight as that would break many existing applications. (The JavaScript language was designed in only 10 days and we cannot expect much maturity from it). We need to patch it, shim it and do a lot of hacking to make it work the way we want. Angular does that for us with the help of using TypeScript and patching, shimming on our behalf with the added benefit of further customization. Again JavaScript is not type safe—with the use of TypeScript Angular makes our program type safe and easily testable. The end result of TypeScript code is pure JavaScript and it can run on any modern web browser.

Event system in browser is not consistent among browsers. Again we often need to implement different software development patterns to get our desired behavior, we also mix and match different implementations. Angular provides a great interface for working with them with the help of RxJS (Reactive extension for JavaScript).

Angular divides views into components and you can take control of presentation and interactivity of every portion of the view of your application. It provides dependency injection so that you do not need to manage creation and maintenance of different portions of your application. It discourages global variables. Services are used to be made available to other components and services through dependency injection and you can control which component or services get what. Services and components have life cycle hooks that you can tap into to carry out some tasks, initialization, destruction, cleaning etc.

SPA and Angular

Many people have a misconception about single page applications. Some may think that single page applications have only one URL and with a single view. That is not what happens in single page applications. Single page applications can have any number of views and any number of URLs to show different views of the application. In single page applications navigating to a different view does not need to retrieve HTML repeatedly from the backend server or does not need to reload the page(s). A single page application is usually an application that does not need to retrieve the same HTML, JavaScript, CSS, images from the backend server again and again - that means it loads once and continues to run as long as you want it to. We create single page applications with Angular and we can have as many views and URLs as we want in the application without reloading it or making repeated request to the server for retrieving the same resources.

Conclusion

This article was just a simple introduction to the evolution of the web and to the single page applications with Angular. In future articles I will show you how to create single page applications using Angular.

About the Author

My name is Md. Sabuj Sarker. I am a Software Engineer, Trainer and Writer. I have over 10 years of experience in software development, web design and development, training, writing and some other cool stuff including a few years of experience in mobile application development. I am also an open source contributor. Visit my github repository with username SabujXi.