The Good and the Bad of Angular Development

Reading time: 15 minutes

Angular is a part of the JavaScript ecosystem and one of the most popular software development instruments today. It was introduced by Google in 2009 and received warm recommendations from the development community. According to the 2022 StackOverflow survey, 23 percent of software engineers apply the framework to create user interfaces. So, let’s talk about the main features of these tools and explore their benefits and drawbacks in terms of front-end engineering.

What is Angular: The story behind the JavaScript framework

Angular, supported by Google, is an open-source, JS-based software engineering platform for building user interfaces (front-end). Its history traces back to 2009 when Misko Hevery and Adam Abrons, Google engineers, developed the framework known as AngularJS and officially released it in 2010.

Watch the Angular overview on our YouTube channel and make sure to subscribe

AngularJS: a new era of SPA development

AngularJS revolutionized web development by providing a convenient way to build dynamic, single-page applications (SPAs).

Such an app consists of one HTML document that runs in the browser and doesn’t need reloading each time a user interacts with the page. To respond to a button click or other event, it takes the appropriate content from the server and updates dynamically a certain part of the UI rather than generating everything from scratch. The well-known examples of SPAs are Facebook, Twitter, Gmail, GitHub, and many other pages we deal with daily.

Designing complex dynamic web pages with pure or vanilla JavaScript is time-consuming. Not to mention that, in big projects involving many programmers, the front-end is a challenge to understand and maintain. So, the key idea behind AngularJS was to simplify SPA development by introducing several considerable advantages.

MVC architecture. AngularJS divides your web app into three distinct parts  — Model (data), View (the UI layer), and Controller (business logic). The three units can be developed in parallel and separately tested. As a result, the code becomes easier to understand, maintain, and extend.

Two-way data binding. The JavaScript framework synchronizes the Model and the View by applying a two-way data binding technique. As the data in the Model changes, the View does too. This allows engineers to reduce development time as it doesn’t require writing additional code to provide continual View and Model synchronization.

Dependency injection (DI). AngularJS comes with a built-in mechanism to pass (inject) dependencies  — or rules defining how pieces of code interact with each other and behave under certain conditions —  instead of creating them inside the components. This enables developers to change or configure dependencies without altering an app module as well as reuse them across multiple modules. All in all, DI simplifies testing and contributes to the reusability and maintainability of app components.

Featuring a prominent set of benefits, AngularJS quickly grew in popularity. But unfortunately for the framework, technologies developed even faster. Before long, the platform stopped meeting the rising requirements of the web and lost its position to newer competitors that kept popping up like mushrooms after the rain. Even constant improvements couldn’t save the day. So, in 2014, Google decided to completely rewrite it.

For several years, AngularJS has existed side by side with its successor simply named Angular. But in 2022, it, at last, reaches the end of life, i.e., the community will no longer maintain the framework. That said, devoted users can still find support from third parties, and AngularJS code will remain on GitHub.

Angular vs AngularJS

In September 2016, Google released Angular 2. The difference between the old AngularJS and the new version was so radical that you couldn’t just update from one to the other. The main changes are as follows.

TypeScript instead of JavaScript. Unlike its JS-based predecessor, Angular uses TypeScript, a strict syntactical superset of JavaScript developed by Microsoft for designing large applications.

Components as the most basic building blocks. AngularJS enables developers to create reusable pieces of code with the help of directives  — HTML extensions assigning a particular behavior to the element. Angular inherited all standard directives but introduced reusable, self-sufficient components as its main building blocks. In a nutshell, a component is a directive connected with an HTML template defining what renders on the page.

Better performance. Both AngularJS and Angular significantly reduce development time. However, due to the component-based architecture and more effective data binding, Angular apps can be five times faster than AngularJS.

Introducing CLI.  AngularJS doesn’t have its own command line interface (CLI). Angular 2+, on the other hand, comes with a CLI that allows for quick generation of components, services, directives, etc.

Mobile-friendliness. AngularJS was not designed with mobile browsers in mind. When developing Angular, Google took into account this gap so the new framework got the support for mobile web and native mobile apps.

Semantic versioning and Angular version history: from Angular 4 to Angular 13 and 14

After Angular 2, the framework has been sticking to semantic versioning (SemVer) meaning that new releases

  • appear on schedule — every six months (as of this writing we had Angular 14 and were waiting for Angular 15);
  • have backward compatibility — in other words, a new version can use files and data created with older versions; and
  • are supported for 18 months, including 6 months of active support with scheduled upgrades and 12 months of long-term support when only critical fixes are released.

While it’s up to you whether to move to the newest version or not, it’s recommended to stay constantly updated as each fresh release comes with additional features, better performance, and improvements aimed at increasing developer productivity. The migration between two neighboring versions is quite simple (look through the Angular Update Guide for clear instructions) and takes much less time and effort than transitioning from, say, Angular 6 to Angular 14.

Below are some major enhancements from Angular versions.

Angular 4 featured an improved compiler that reduced the size of JavaScript code generated from Angular’s HTML and TypeScript by more than half. It also placed animations in a separate package to remove extra code from the production bundle. Those efforts made the framework smaller and faster.

Angular 5 simplified building progressive web apps and also added CLI Workspaces to handle multiple Angular projects.

With Angular 7 CLI was enhanced with prompts to explain the functions and purposes of elements, so using CLI became more intuitive.

Angular 8 arrived with a preview of Ivy, a new generation renderer meant to replace the older compiler and runtime  — View Engine. The goal of Ivy was to make the app run faster and reduce the bundle size. A full switch to Ivy happened in Angular 9 where it became a default compiler for all applications.

While Angular 10 focused on quality and performance improvements rather than on new features, Angular 11 presented Component Test Harnesses to help with testing Angular Material components. Another widely advertised innovation of the ninth version is automatic font inlining  — at the compile stage, Angular CLI downloads and inlines fonts being used in the project.

Angular 12 concentrated on stylistic improvements, giving developers more control over the project, and removing legacy components. This tendency extended to the next version. With Angular 13,  the support for View Engine (the first Angular renderer), Internet Explorer 11, and Node.js versions prior to 12.20.0 came to an end. It also simplified creating dynamic components.

Angular 14 pleased developers with a long-awaited feature  — Strictly Typed Forms. Many engineers call it the most significant upgrade since the introduction of the Ivy renderer. Previously, Reactive or Model-Driven Forms in Angular didn’t have type definitions, and as a result, TypeScript couldn’t catch many common errors. Now, this issue is fixed.

MEAN stack

Angular belongs to the so-called MEAN stack. The acronym describes four technologies that cover major software product development aspects.

MMongoDB, NoSQL (non-relational) database

EExpress, back-end middleware

AAngular, front-end framework

NNode.js, runtime environment. (Learn more about Node.js pros and cons in our dedicated article.)

While engineers may be using Angular regardless of other technologies in the stack, they can always rely on an existing firm ecosystem that also has its full-stack developers, or specialists covering all aspects of software development.

Angular tools and setup

Here we’ll talk about the main tools that engineers commonly use with Angular to get the full benefit of the framework.

RxJS. It’s not likely that you’ll be able to work with Angular without RxJS, a reactive programming library, aimed at handling asynchronous data with multiple events. It allows engineers to set up multiple channels of data exchange and ease resource consumption.

Angular CLI. Command-line interface (CLI) is used to create projects, add files, perform updates, and deal with debugging, testing, and deployment.

We’ll talk more about RxJS and Angular CLI below.

Code editors. Currently, many popular code editing products support Angular. The most common ones accepted by the community include Visual Studio Code, Sublime Text, and surprisingly not – Angular IDE, and WebStorm. However, check to determine if your favorite code editor fits Angular.

Pros of Angular

The main problem with Angular is that it came to the new world dominated by the impact of its leading competitor React (check our React vs Angular comparison). And the debate on whether you should use Google’s framework or the one from Facebook is quite intense. This rivalry should be kept in mind when choosing the best-fit instrument for your next project. Now, let’s have a look at the main benefits that the technology suggests to the engineering community.

⊕ Component-based architecture that boosts developer productivity and provides a high quality of code

Angular components can be thought of as small pieces of a user interface, like a section of the application. While each component is encapsulated with its functionality, there is a strict hierarchy of components in Angular.

angular

The component tree is shown over UI elements of an app

In the given example, components are the sections of an eCommerce app: The application itself is a parent component hosting a menu list and shopping cart. Correspondingly, the menu list has its child components, and each menu item hosts an item description component as well. That’s what is called component hierarchy.

The component-based architecture allows for building UIs with many moving parts and, at the same time, streamlines the development course for engineers. Other main benefits of such a design are as follows.

Reusability. Components of similar nature are well encapsulated, in other words, self-sufficient. Developers can reuse them across different parts of an application. This is particularly useful in enterprise-scope projects where different systems may have many similar elements like search boxes, date pickers, sorting lists, etc.

Readability. Encapsulation also ensures that new developers – who’ve been recently onboarded to a project – can read code better and eventually reach their plateau of productivity faster.

Unit-test friendly. The independent nature of components simplifies unit tests, and quality assurance procedures aimed at verifying the performance of the smallest parts of the application, units.

Maintainability. Components that are easily decoupled from each other can be easily replaced with better implementations. Your engineering team will be more efficient in maintaining and updating the code within the iterative development workflow.

⊕ TypeScript: better tooling, cleaner code, and higher scalability

Angular is written in TypeScript language, which fully compiles to JavaScript, but helps spot and eliminate common mistakes when typing the code. While small JavaScript projects don’t require such an enhancement, the enterprise-scale applications challenge developers to make their code cleaner and verify its quality more often.

Putting the TypeScript-first policy of Angular into the benefits section is an arguable point for many engineers. TypeScript-related complaints appear now and then among the development community. Engineers have to learn yet another language. However, TypeScript is there for a reason and you still can use JavaScript if you want to.

Victor Savkin, a former developer from the Google Angular team, explains that the shift from JavaScript to TypeScript is justified by the tooling for large enterprise-scale projects. TypeScript has better navigation, autocompletion, and refactoring services.

As for 2022, Angular 14  supports the latest Typescript 4.7 release.

⊕RxJS: efficient, asynchronous programming

As we mentioned, RxJS is a library commonly used with Angular to handle asynchronous data calls. Thinkster suggests viewing RxJS for JavaScript code as you would Henry Ford’s assembly line for car manufacturing. It allows for handling events independently in parallel and continuing execution without waiting for some event to happen and leaving a web page unresponsive.

In principle, this works like the assembly line, where execution is broken down into individual and interchangeable pieces, rather than being tied to a single person. Asynchronous programming existed before RxJS, but this library has made many things easier.

While many engineers complain about the RxJS learning curve – and it’s unarguably a steep one – as soon as you master the tool, it shines in multiple ways. The library operates with Observables, a sort of blueprint that describes how data streams are combined and how the application reacts to variables in these streams.

Once you’ve got a grip on Observables, you can easily reuse, manage, and combine them as Lego blocks, reducing the complexity of such programming operations as building drag-and-drop features, handling large volumes of data in chunks, etc. You can leverage RxJS with other frameworks that function with front-end (React) or back-end operations (Node.js), but in Angular RxJS is a necessity, which we’ll also discuss in the cons section.

⊕ The platform-agnostic philosophy

Angular was developed with flexibility and cross-platform philosophy in mind. As a web framework, it supports browsers on iOS and Android and allows companies to share the codebase and engineering skillset across the web and mobile apps or even take the mobile-first approach.

To make this happen, in 2015 Angular developers cooperated with the team behind the NativeScript framework which focuses on building close to native mobile apps. When using NativeScript UI components to build mobile interfaces your developers will be operating in familiar JavaScript and Angular environments, and the learning curve to tackle mobile won’t be that steep.

NativeScript

Image source: NativeScript.org

⊕ High performance ensured by built-in tools

Multiple factors can help in making your application faster. The main boost is ensured by hierarchical dependency injection, Angular Universal, Ivy renderer, differential load, and other Angular tools.

Hierarchical dependency injection.  Angular uses improved hierarchical dependency injection.  The technique decouples actual components from their dependencies by running them parallel to each other. Angular builds a separate tree of dependency injectors that can be altered without reconfiguring the components. So, classes don’t have dependencies in themselves but consume them from external sources.

hierarchical dependency injection tree

Every component tree has an assigned tree of injectors that contain dependencies information

The approach provides high-performance scores for Angular applications. As the Angular team claims, Angular 2 was 5 times as fast as AngularJS, and – as engineers claim –  the later versions have increased the performance mark.

Angular Universal. Angular Universal is a service that allows for rendering applications view on a server instead of client browsers. Google provides a set of tools to either pre-render your application or re-render it for each request by a user. Currently, the toolset is tailored to Node.JS server-side frameworks and supports ASP.NET Core.

Ivy renderer. Angular components and templates are written in TypeScript and HTML, but the actual HTML is not used directly in the browser. It takes an additional step when HTML and TypeScript are interpreted into JavaScript instructions. A renderer is an engine that translates templates and components into JavaScript and HTML that browsers can understand and display.

Ivy is the third iteration of the Angular renderer after the original compiler in Angular 2 and Renderer2 or View Engine in Angular 4 and above. With the Angular 9 update, Ivy became a standard compiler and runtime for Angular applications. One of the interesting features of Ivy is tree-shaking. It removes unused chunks of code, making the applications smaller and faster to load. This can optimize the size of large applications, as well as improve their performance.

Ivy is an ahead-of-time (AOT) compiler, which compiles your app right during the build process.

Differential loading. Differential loading is a way to load content and optimize bundle size. What it does, is allow you to create two different bundles for legacy browsers and new ones. Angular would use recent syntax and polyfills for the newer browsers while creating a separate bundle with stable syntax for legacy browsers. That way, differential loading reduces bundle size and loading speed for corresponding browsers, improving the overall performance.

But we recommend taking any performance claims with a grain of salt. Not only does the underlying architecture contribute to that, but also the quality of code that your engineers produce.

⊕ Google support and documentation

Some software engineers consider the mere fact that Angular is backed by Google a major advantage of the technology. And for a reason. The tech giant uses the framework for building its internal tools and public-facing websites like Google Cloud Platform and AdWords. It constantly releases updates, offers developers robust technical support, and maintains clear, highly-detailed documentation to help everyone master the technology.

⊕ Angular Material components to create aesthetic UIs

Material Design is a cool set of visual elements used for building UIs in Android, iOS, Flutter, and web projects. You’ll be happy to know that the Angular team has been constantly updating their framework with Material Design components. The great thing about this library is that it considers how people interact with digital products and strives to make their experience seamless and aesthetically pleasing.

With Angular Material, you get prebuilt components the variety of which span across form controls, navigation elements, layouts, buttons and indicators, popups, modal windows, and data tables. They are adjusted to Angular use and are easy to integrate into a project.

⊕ Seamless updates using Angular CLI

The Angular command-line interface is favored by many engineers for various reasons. It’s easy to set up, and newbie-friendly, it comes with testing tooling out of the box and simple commands, and more.

One of the impressive features is the NG update <package> command. It checks the package and makes recommendations for updates possibly required for all dependencies, including loaders and plugins. Some code updates that involve 3rd-party dependencies can be updated automatically by the… 3rd party if – for instance – they decided to fix something in their products. You may check how this works on the Angular Update Guide page.

The same applies to Angular itself. Considering that the team has an impressive rhythm with new versions coming in about six months, there must be a simple way to update Angular itself without breaking anything. Ng update @angular/core will refresh your framework packages, TypeScript, and RxJS.

⊕Powerful ecosystem

As Angular has been around for donkey’s years, it’s been snowed under by packages, plugins, add-ons, and development tools. You can explore a part of the community’s handiwork by looking at the list of Angular Resources. These include IDEs, tooling, UI environments, Angular Universal for server-side rendering that we mentioned above, analytics tools, facilities for ASP .NET, data libraries, etc.

If the average engineer gets lost, there’s always a tool to help solve a problem that pops up.

⊕Angular Elements: compatibility with different engineering environments

If you have multiple projects running some of which aren’t Angular, you can use Angular Elements in other engineering environments. These may be the apps built with Vue.js, React, or even jQuery. You can reuse your Angular component by wrapping it as a DOM element (Custom Element). It’s convenient if you or your team have to switch between various technologies.

Cons of Angular

If you’ve been following the hype and discussion around Angular, you may know that the technology generates much criticism around it. Let’s examine the main drawbacks to also be considered.

Θ Divided and churning community

The community around any technology is what makes it powerful in the market. And the Angular community story is quite controversial. According to the 2018 StackOverflow Developer Survey, Angular (both AngularJS and Angular) was the second most commonly used technology in the category Frameworks, Libraries, and Other Technologies, which is cool. The same survey of 2019 shows an Angular/AngularJS drop to the ninth position among the most used frameworks with 53 percent of respondents.

As of 2022, Angular is the fifth most popular technology while AngularJS is 13th. At the same time, almost half of the respondents hate the newer framework (the other half loves it, though), while AngularJS remains the most “dreaded” technology for the third year in a row.

StackOverflow 2022 survey

Most dreaded technologies in 2022. Source: 2022 Developer Survey

Θ Migrating legacy systems from AngularJS to Angular requires time

As we said, there’s a monumental difference between AngularJS and Angular, and so is the path of migration from the past to the future. Check this migration recommendations page. Unlike updating from, say, Angular 13 to Angular 14, it won’t be a breeze, especially if you’re dealing with a legacy monstrosity.

There are different ways to do that, one of which is to use a hybrid approach. It entails having both old and new Angular operating at the same time while you incrementally update the whole product. Not only does it take time, but you’ll also have to review many tools, transition to a new language, and deal with a heavier app as you have both Angulars running.

Another technique that can be applied during the migration is called lazy loading. Lazy loading is an optimization technique, which means loading only those parts of the app (or its content) that were invoked by the user. When the component or function is required, Angular would leverage the part of the app and render it. With lazy loading, parts of the AngularJS app can be invoked and rendered within the Angular application.

Θ Angular is verbose and complex

The most frequent complaint that you hear from the Angular development community is the verbosity of the instrument. This problem hasn’t changed since AngularJS.

Although we’ve mentioned the component-based architecture as the major Angular benefit, the way components are managed is too complicated. For instance, you may need up to five files for a single component in Angular, have to inject dependencies, and declare the component lifecycle interfaces. Other points of concern are Angular-specific 3rd party libraries and Angular syntax. Much of the development time in Angular is spent doing repetitive things.

Θ Hard learning curve

If you onboard new developers familiar with JavaScript to learn and use new Angular, they will be challenged compared to similar React or Vue onboarding. The array of topics and aspects to be covered is large: modules, dependency injection that we mentioned before, components, services, templates, etc.

Another barrier is RxJS, a reactive programming library for asynchronous programming. Learning it, at least on the basic level, is mandatory for using Angular. Engineers complain about error messages that are too cryptic to grasp without additional research followed by trial-and-error manipulations.

TypeScript, as we’ve already said in the benefits section, is also a bone of contention. While TypeScript improves the maintainability of code, having to learn it doesn’t make the curve gentler.

Why use Angular

If you were to read different feedback posts from the development community, you’d likely stumble over complaints rather than excitement. But we aren’t that pessimistic about Angular. While it has never been as popular as React, it still perfectly fills its niche.

Enterprise-scale applications. The use of TypeScript for increasing the maintainability of code, the performance score that improves as you make more complex applications, and specific ecosystem choices make Angular the main instrument for long-term and heavy-investment projects where a steep learning curve is compensated for by stability and ongoing tech support.

And this is the major difference between the new Angular and React that you may also consider. The latter is easy to grasp, deploy, and start working with, but it’s less versatile and maintainable than Angular.

Simple standard apps and idea testing. If you already have a team of Angular developers, the framework can be used for fast design of very simple projects  — like standard SPAs, functional prototypes, and minimum viable products (MVPs) to test your idea. It will take no more than a week to build a prototype of a dashboard or marketplace since the framework has a lot of templates and tools to boost development.

This post is a part of our “The Good and the Bad” series. For more information about the pros and cons of the most popular technologies, see the other articles from the series:

The Good and the Bad of Hadoop Big Data Framework

The Good and the Bad of C# Programming

The Good and the Bad of Java Programming

The Good and the Bad of Python Programming Language

The Good and the Bad of React Native App Development

The Good and the Bad of React Development

The Good and the Bad of Selenium Test Automation Software

The Good and the Bad of Xamarin Mobile Development

The Good and the Bad of .NET Framework Programming

The Good and the Bad of Node.js Web App Development

The Good and the Bad of TypeScript

The Good and the Bad of Vue.js Framework Programming

The Good and the Bad of Swift Programming Language

The Good and the Bad of Ionic Mobile Development

The Good and the Bad of Android App Development

The Good and the Bad of Microsoft Power BI Data Visualization

16 Comments

Comments

avatar
Sort by: newest | oldest | most voted
Herbert Gilliland

“Before AngularJS, HTML, the web markup language, was always static, meaning that users couldn’t actively interact with interfaces on the HTML pages.” This is a complete fabrication. Angular did not enable this. The W3C Consortium, creators of the HTML5 standard, enabled developers to formally declare new attributes and element tags in January 2008 as a “working draft” without breaking the markup. Prior to this, many of these features were enabled through the use of jQuery, which continues to grow in popularity as the number one most used javascript library (75% of websites used it in 2020), often used in tandem… Read more »

Simon Robertson
Nov 11, 2018
Simon Robertson

“And this is the major difference between the new Angular and ReactJS that you may also consider. The latter is easy to grasp, deploy, and start working with, but it’s definitely less versatile and maintainable than Angular.” I completely disagree with that statement. What makes an application maintainable is the quality of the codebase, not the technologies that are used. I have worked on numerous large-scale applications that are using React, and they are perfectly fine to work with and maintain. The difference between Angular and React is the former is far more opinionated than the latter. Angular is a… Read more »

Miu
Oct 11, 2019
Miu

Inconsistency across systems creates a high order of complexity than enforced sameness. While I agree that poor development practices produces poor results no matter what you’re using, what I’ve seen of large React projects is massive, poorly performing packages mainly due to duplication of effort/library functionality, lack of controls at the architecture level and lower quality engineering due to hiring to a price point. But hey, at least it’s not the hobbyist dumpster fire over at Vue.js.

hey ho
Mar 14, 2022

Angular turns simple task, that any web desgner could handle, into complex tasks that even experienced developers might need days for. The cryptic css is a good example. For no good reason it cascades VERY different than actual css. You need up to 50 lines of code in three different files to put in a simple background- image. What kind of decadant mind believes that this is good? And dont be fooled by command-line-code-generation. It will fail at any tast that isn’t run of the mill. Most of the code-heavy developers, who never have to think about finances and time,… Read more »

Bhim Singh
Feb 22, 2018
Bhim Singh

Every application has some limitations and pros. It depends on you what is your requirements. In today’s world, there are a lot of companies offering angularjs development services and they also promise to be the best and will easily convince you to use angular for your application. But it is very time-consuming when comes to SEO of angularjs based website or applications.

jfarjon
Jun 10, 2021
jfarjon

You wrote : “Before AngularJS, HTML, the web markup language, was always static, meaning that users couldn’t actively interact with interfaces on the HTML pages.”
This statement is quite inaccurate as before Angular JS was and still is how HTML pages became dynamic. Angular is just another face of the JS ecosystem.

M.S. S.
Feb 16, 2022

I want to know how to add adsense code properly to my angular 9 site. I want to add different ad slot for each component. I mean every component has its own ad slot. I have placed but sometimes it show and sometime it doesn’t, and on redirect to abc.com/acb/def from abc.com/acb, most of the time it’s doesn’t appear. Also, if statcounter (web analytic) shows exit links (last link from which people leave the site, which is adsense ads) 110, adsense shows half of that. Maybe it’s because i haven’t placed ads code properly. Angular doesn’t allow outside script, do… Read more »

Alphonic Network Solutions

Thanks for the great and informative content. It contained very useful information, which really made my work easier. Do keep posting more such amazing stuff.

ricky.piller@gmail.com
Feb 26, 2018
ricky.piller@gmail.com

Good article. Angularjs can be component oriented as well and I would say anyone making anything new should considering using the component() way in Angularjs since it gets the benefits you mentioned for Angular 2/4. You can also use ES6 classes to make components/controllers/services which I think is great and really can be a stepping stone into Typescript. It’s about time the javascript world gets in line with the rest of the world when it comes to the idea of classes 🙂

Altex Lansing
Apr 18, 2018

Enterprise scale apps with angular? Good luck. I guess it depends on your definition of enterprise scale. Usually what angular blogger-developers consider enterprise scale is just trivial stuff. Maybe it’s the effort needed to build trivial stuff that is enterprise scale when using angular.