The Good and the Bad of Developing with Angular
Angular is one of the most popular web application frameworks today. Introduced in 2009 by Google, it’s a part of JavaScript ecosystem and one of the most used web application frameworks as per StackOverFlow survey.
As per the survey, approx. 36.9% of software engineers now use AngularJS and the new version of Angular 2+ to create user interfaces.
Here we discuss the main features, benefits and drawbacks of using Angular
What is Angular — Introduction to Angular and how it came to be
Angular started as a side project in 2009 by Miško Hevery and Adam Abrons. It was called <angular /> that would help developers, designers create web applications utilizing simple HTML tags.
The name “Angular” comes from the angle brackets, or <> that surround the HTML tags.
“We wanted to see if we could make it easier for Web designers, not necessarily Web developers, but Web designers, to sprinkle a little bit of extra HTML into their code so that they could turn a static form to something they could actually send in an email.
The idea would be that you could [for example] have a mom-and-pop shop that sells pizza or something, maybe you could [have] a simple ordering system just by adding a bunch of these tags and they could send an email to the server.” — Miško Hevery
AngularJS’s main advantage when it was released was that it’d let you turn an HTML-based document into dynamic content. Prior to AngularJS intro, HTML (the web mark-up language) was always static, which means that the users couldn’t interact with the interface on the HTML pages.
While there were other ways of building dynamic single-page applications, those were too complicated for convenient engineering. Thus, AngularJS reduced the development effort that was typical when creating dynamic content and the users got web pages with dynamic forms and elements.
Google released Angular 2 in September 2016. They re-wrote the framework entirely to match the increasing requirements of the modern web.
Angular (also referred to as Angular 2+) is built in TypeScript that offers developers with robust tools for building the client side of web applications.
The difference between this an AngularJS 1.x and the new Angular was improved significantly that the product at its core remains even with the new versions released.
Angular 4 was released in 2017 and since then several versions are regularly released bringing in several major updates.
What are the pros and cons of using Angular?
The good of Angular
Improved server performance
Angular reduces the burden from server CPUs as it supports the caching and other processes. This means that the server performs very well due to the reduced traffic and because it only serves static files and reacts to the API calls.
MVC architecture implementation
In AngularJS, the ‘Model-View-Controller’ or MVC architecture as it is called binds value to the framework when making a client-side app. Plus it also establishes essential features like data-binding and scopes- it automatically integrates app the app elements without adding extra code.
With the MVC architecture, it is possible to isolate the app logic from the UI layer and support the separation of concerns.
The controller [C] gets all the requests for the app and then works with the model [M] to create any data required by the view [V]. Consequently, the view utilizes the data created by the controller to exhibit the final displayable response.
Component-based architecture that facilitates reusability, readability, maintainability
You can think of components as small pieces of interface that are independent of each other. Sort of like a simple app with a list of items and a corresponding search box for you to retrieve the items by word matches.
The box with listed names, the search box as well as the main sheet where the other boxes are positioned- all are considered separate components in Angular.
Like mentioned above, AngularJS was mainly built around MVC architecture- starting from the next version, Angular is considered as a component-based architecture (which is similar to MVC but makes sure higher re-usability of the components on the app).
This features allows for building UIs with many parts and in the meantime, streamlines the development course for developers.
Re-Usable-Similar components are greatly encapsulated, or we can say self-sufficient. Developers can reuse them on different parts of an app. This is particularly beneficial in enterprise-scope apps where diverse systems come together but have many similar elements like date pickers and search boxes etc.
Readable — Encapsulation also makes sure that new developers can read the code better and reach productivity faster.
Maintenance — The components that are easily decoupled from each other can be easily replaced with better implementation- so it is easier to maintain and update code within the iterative development workflow.
Greatly testable websites and testing option
One of the benefits of Angular is that it builds highly testable websites and applications. It allows end-to-end testing and unit testing (used for checking the app performance and verify whether it works as per client requirements) which makes debugging and testing easier.
This framework is practically built in mind with the features that support testing. With the help of Dependency Injections (DI), the testers can easily insert the test data in the controller to check its output and behaviour. Other unique testing tools offered by this framework include Karma, Jasmine and Protractor etc.
Two-way data binding
Angular expedites and simplifies that data-binding which doesn’t need a developer to put in work at all. It is referred to as two-way binding as it makes sure that the changes are made to the view are instantly presented in the model and vice-versa.
Directives
Directives that enhance the HTML functionality and are appropriate for dynamic client-side applications begin with the prefix ng so that HTML can determine them and understand that they are app elements.
They keep the scripts and HTML pages free of clutter and organized and allow independent codes by stuffing specific functions together and using them repeatedly. Besides a set of default directives, Angular also permits developers to make custom directives.
