Understanding the pros and cons of Angular Development

Angular has been around for almost 10 years now and the first version of angular came into existence from AngularJs back in 2009.

Angular is a framework introduced by Google and used by Google at scale to build software products and is one of the most popular front-end web development frameworks in use today globally.

Source: http://techgenelu.blogspot.com/2018/

Architecture Understanding

To appreciate the pros of using angular for development one has to understand the architecture first since that is where lies all the magical plumbing which powers this framework and makes it one of the easiest to use to make an application for cross platforms.

Source: https://angular-templates.io/

Angular is a web framework written in typescript ( type-safe JavaScript ), which implements some of the core libraries and functionalities which users can then import into their applications.

The basic building block of angular is NGModules which provides all the functionalities done for users to use while developing their applications. Some of the top-level components of the architecture are as follows:

a. Modules

Angular NGModules are where developers define the entire domain, workflow, and specific capabilities for an application.

Modules consist of:

Root module or Application module, which acts as the entry point where everything is orchestrated and bootstrapped. To give an analogy think of this part as the layer at which all the wiring is done.

Modules are where all the imports etc.. are defined for an application. To give an analogy think of the modules as an orchestrator of an ensemble.

b. Components

Angular has several components which connect the dom [document object model ] with the “root component”. Components are like independent pieces of modules which can be
dependency injected into one another and developers can think of them as namespaces that hold the controller side logic in it for a part of the application.

Generally, every component of a class associates with one HTML template and serves to bind functionality for it.

c. Templates, directives, and data binding

Templates are parts of the angular ecosystem that bind the Html in your front-end application with angular keywords or angular markups.

Remember templates live inside angular components. Think of one as a hero and the other as its sidekick.

Template directives: Responsible for program logic, used with binding markups or angular keywords.

Event binding: Angular supports two-way event binding where changes reflected in your application code or inside HTML dom get reflected at both places.

d. Service and dependency injection

Angular architecture follows age-old principles of inversion of control via using dependency injection as a mechanism to do all the logic wiring across its components, making for a very loosely coupled architecture.

It enables code residing inside components to be lean, agile, mockable, making testing easy.

Enables developers to add and remove functionality from an application.

In angular, you can create a service class and use its @Injectable decorator to inject dependencies into your classes.

e. Routing

Routing classes are where all the URL direction, plumbing, and re-direction are handled.

This part of the architecture layer handles piping the URL to the view.

One of the smart features though provided in this is called lazy loading, where the router can load the module on demand and doesn’t have to do all the wiring at initialization, as in older routing architectures.

It is modeled to take care of the inherent hierarchies in your application as you build them out using the other components and built around the conventions/principles of how browser navigation works for end-users.

Overall Architecture Diagram Showcasing how the angular architecture is built.

Source: https://angular.io/guide/architecture

Pros of Angular Development

1. Maintained by Google

One of the major reasons for angular being one of the most used js frameworks for web development is because it is being backed and maintained by Google and a huge community of developers worldwide.

Stats -: Stackoverflow report.

Source: https://insights.stackoverflow.com/survey/2019#technology

2. Job demand

One of the primary reasons to learn a specific framework is not just its complex architecture, features, or support but its market value for a developer.

Due to the widespread popularity and demand for the angular framework, it is a really good tool to have as a checklist item in your cv. 

Looking at the demand via actual statistics gathered from various hiring sites and StackOverflow clearly shows angular as one of the topmost preferred frameworks by developers and companies.

Source: https://medium.com/zerotomastery/tech-trends-showdown-react-vs-angular-vs-vue-61ffaf1d8706

The data source for the above graph was based on

3. Two-way Data Binding

This is the one feature in angular that stands out and is the use of the entire framework.

Two-way binding ensures any changes in the dom ( view) get reflected in the application and vice versa.

The underlying complexity is handled by the NGModule directive in angular and using these users can achieve this reflection of data and view in their applications.

It comes from a data binding technique to link your data to your view.

Any changes in your data are detected by the angular framework and updated in the view.

With older vanilla systems like jquery or javascript, it was always the developer's responsibility to update the view.

Angular hence provides this plumbing without the users having to end up writing a whole bunch of boilerplate code.

Source: https://embed.plnkr.co/HpQHJ6ljGFrHy8abCPuh/

4. Faster Document Object Model [ HTML ] Manipulation

Because of the capability of two-way data binding inherent in the angular framework dom manipulation is the easiest in this framework. This is inherently not possible in a lot of js and jquery style frameworks and requires a lot of manual effort by the developer to implement all this.

It ends up saving developers time, effort, easing code complexity, and standardizes the approach to manipulate views.

5. Faster Server Performance

Angular as a framework comes loaded with a ton of CPU performance-enhancing features and since everything is written in a type-safe manner via typescript the inherent framework is much faster than other native js ones.

It also supports caching out of the box and has various toolkits available to improve server-side performance. Some benchmarking results:

Source: https://www.freecodecamp.org/news/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-e1cb62fd526c/

Transfer size on the client-side.

Source: https://www.freecodecamp.org/news/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-e1cb62fd526c/

6. Ease of prototyping and iterative development support

Angular provides one of the fastest startup times to write a minimum viable app. It almost takes no time to spin up a full-fledged angular application and with a daemon server running in the background you can do iterative development. 

Since users can quickly make apps, test them, see the changes in real-time getting reflected in the browser. Most systems built by google feature a really well thought out CI/CD flow [ continuous-integration & continuous-development ]. Angular is a prime example of that.

It provides all these features using ahead of time compilation concept -:

• Faster rendering

• Fewer asynchronous requests

• Small angular code size

• Detects angular template errors early

• Effective security against injection or cross-site scripting

7. Super ease of testing frontend angular applications

Since the angular architecture is built around the dependency injection style of architecture it really helps in doing test-driven development which is all the buzzword these days.

It allows components to be mocked and isolated, leading to better writing of unit test cases and integration test cases for an application.

Also since it natively supports typescript you can catch more compile-time errors in your code due to incorrect variables etc. 

Also offers tools like a protractor, jasmine, karma as testing tools to make your application robust and production-ready

8. MVVM Architecture

Source: https://www.journaldev.com/20292/android-mvvm-design-pattern

Model View Controller and Model View ViewModel architecture lay the foundation for a super responsive and fast application.

Since these are design patterns that stand the test of time and are generally the responsibility of the developer to implement or set up his codebase in this manner, which in cases of large codebases sometimes gets sloppy.

But in angular, all of that is so tightly bound to the architecture that it is very hard to deviate from the best practices.

9. Uses Plain HTML templates

Since angular applications use plain Html templates and not a custom version of them it makes development a really easy task. The framework passes the HTML as DOM elements to the compiler allowing easy re-usability, manageability, and extension of templates.

10. Component-based architecture coupled with smoother navigation using directives.

As mentioned in the architecture above all of the business logic in an angular app is segregated into multiple components where every component is responsible for a specific isolated task and has independent behavior.

There are three kinds of directives in Angular:

1. Components: Directives with an Html template.

2. Structural directives:  Manipulate the DOM layout by adding and removing DOM elements.

3. Attribute directives:  Manipulate the appearance or behavior of an element, component, or another directive.

Cons of Angular Development

1. A hierarchical tree-like architecture and Deep scopes.

Due to a layered architecture angular can end up being a slightly difficult framework to debug sometimes and people who are not used to n-tier architectures can find some of the concepts as abstruse.

Especially debugging the scopes in a large angular application can be a pain point at times.

All the injectors into angular are also hierarchical in nature and cause angular to have deep nesting sometimes.

A problem called injector bubbling shows one of the problems with nested scopes.

 

A component requests another component and angular will try to meet the dependency with the component's own injector, but if it can't find it, like constructors in object creation will pass that up to the chain to its parent injector, and so on.

These requests keep bubbling up until angular cannot find an injector that can serve the request as it runs out of injectors to serve the request.

So in cases where it runs out of ancestors, it will throw an exception, this can be pretty painful to debug especially if you coded an error in one of the base classes.

Ways to cap this are there as well, but in general deep hierarchies do complicate matters for novice users sometimes.

Thus angular can have a steep learning curve for newbies to software development.

2. Concept of Dependency Injection and Inversion Of Control

Source: https://bohutskyi.blogspot.com/2017/03/inversion-of-control-pattern.html

It’s a pretty useful concept but something which developers more attuned to the traditional style of development can find a challenge.

One there are many ways to do dependency injection and in a lot of the frameworks the wiring etc is done at bean level or in a configuration layer and dependencies are injected in via constructors or interface-based injection or using getters and setters.

But nonetheless, whichever approach is taken it is pretty difficult to get the hang of concept and how to manage dependencies in this manner for dom developers.

Sometimes the learning curve around DI can be a pain point for several teams.

3. Performance Tradeoff

Due to two-way data binding especially on old devices, angular dom-manipulation can also lead to a performance tradeoff since the browser will be super busy manipulating the dom elements and will take a lot of the compute resources.

Though this is not applicable to modern-day computers with enough RAM/CPUs and even mobile devices older versions can definitely experience a lag due to all the inherent abstraction built inside angular.

4. Coupled to JavaScript+Typescript.

Since to use angular you need to have javascript installed on your machine.

This can be a problem where javascript is not available with the OS, which is the case in some and end-users will have to install it in order for angular application development and running the end application.

Also, an application that is not polyglot in nature can be hard to be extensible for developers not used to a certain programming language.

5. Angular two-way binding can both be its biggest use but also its Achilles' heel.

It works on the principle of a digest-cycle, which is a recursive call to check the scope of each $scope variable or watcher in the HTML (dom tree).

In the case of huge nesting in the dom tree, this can have performance issues and developers should be careful with it.

Also, recursion has issues like consuming a huge amount of memory since the stack keeps getting filled up and can.

Also, the digest cycle works well with a limited number of watchers and the angular recommendation is to have around 2000 watchers per page, but more often than not developers tend to exceed it and it can cause huge lags in the system.

6. Heavily weighted framework

A lot of competition from other lightweight and different architectures like react ( promoted by Facebook ) and Vue ( Alibaba ) also acts as a con for angular which is a pretty bloated and heavy framework.

 

Especially in the microservices world where the dev community is today, angular apps can be pretty bloated due to too much abstraction and features from the framework which can’t be wished away as they are bundled into the framework.

Also, these frameworks introduced a concept of virtual dom which made changes to views easy as compared to angular where this is missing.

Also, these frameworks are lightweight libraries of javascript which developers can couple with other frameworks, but in the case of angular, it is not possible to do that since it seeks to establish its own ecosystem.

7. Angular when it was designed was to conform to the MEAN Stack

Source: https://www.chromeinfotech.net/blog/mean-stack-development-company/

Mongo [ no SQL database], Express [ Middleware ], Angular  [ Frontend Framework ], Node js [ Runtime Environment ].

While developers can choose different flavors of other databases, middleware, etc too but angular is only an excellent fit in a stack very much like this.

For example, making a transactional style fintech application in angular is quite challenging due to an async-based flow introduced by observables which are responsible for all the REST calls.

This has both its advantages and disadvantages, leading to a high learning curve.

8. Migration

One of the key reasons why angular is not in favor of enterprises style companies is the difficulty in porting legacy js/jquery-based code to angular-style architecture.

With a very fast and iterative development cycle with new versions of angular coming out and the community churning out new features, enterprises find it challenging to keep up the pace with the system.

Also, each new release is painful to upgrade, and a lot of them are not backward compatible.

Also, the development time and cost of resources allocated to achieve this have to be considered as well.

9. RXJs: Angular is built on two new languages typescript and RXjs.

 

While typescript is just a type-safe javascript and is easy to learn for old developers, Rxjs can be very abstruse even for an experienced developer.

Reactive programming is a different paradigm from a development standpoint and takes quite a bit of time to grasp and master.

Especially a lot of flattening operators, functional constructs, declarative style of programming take quite a bit of time to understand.

Rxjs is a huge library like the STL in itself and requires a lot of practice to master as compared to alternatives out there.

10. Opinionated Ecosystem

As Stephen Fluin, Developer Advocate on the Angular team, writes:

Angular is opinionated, giving developers defaults for things like network connectivity, state management, language choice, and build toolchains. These defaults are tested and validated with each other to ensure that the Angular platform moves forward at a steady and reliable pace.

While this may be great for people who can adhere to a particular style it is definitely something a lot of people cannot accept and do not prefer at all.

 

Developers especially love the flexibility and an example of the angular server page will show exactly what I mean, where users cant make out whether it's frontend code, or HTML code, or backend code.

Comparison of Angular with other JavaScript Frameworks

This comparison table comparing angular to the other most used and loved frameworks also highlights its strengths and weaknesses in comparison to its peers.