In today’s highly competitive digital world, designing great customer experiences is crucial. If your application or site isn’t pleasant to use, customers will use someone else’s.

There are plenty of frameworks and libraries that can help developers design web applications with good UX/CX, one of which is Angular.

Prem Khatri, vice president of operations at software provider Chetu, believes the two reasons Angular has become a favorite among developers are its automation and ease of use. Angular makes it very easy to develop large enterprise apps. Specifically, Angular allows for greater code readability, end-to-end testing, and faster initialization, configuration, and rendering. 

RELATED CONTENT: Web development: So many choices to get the right fit

“Given Angular’s robust tools for creating web applications, such as its component-based architecture, CLI automation, dependency injection, Ivy Renderer, and its Google support, the platform is best used for the development of large-scale, UI-heavy web apps with dynamic content, as well as progressive web apps, or PWAs, that allow for app-like experiences on a web browser,” said Khatri. 

According to Stephen Fluin, developer relations lead at Google, about 90% of Angular applications are actually “behind the firewall.” Companies are creating Angular applications for internal use, to drive processes and workflows. “We will talk to a Fortune 500 company and find out that they don’t have one Angular application, they have 100,” said Fluin. “And this is actually very similar to what we see at Google with Angular, where we have thousands of Angular projects in Google and most of those are empowering employees and team members and partners.” 

Angular got its start 10 years ago, in 2009, with the release of AngularJS, which at the time was just called Angular. What is now known as AngularJS is just version 1.0 of Angular.

After Angular 1.0, the framework was completely rewritten to create the Angular that you know today. But that first version stuck around, and is still available today as AngularJS. 

In 2009, when AngularJS was created, the team set out with the goal of making web development easier, Fluin explained. It was built on a lot of the existing technologies at the time, such as ES5, otherwise known as JavaScript, he said.

In the early days of development, the team had to invent a lot of things on their own, such as a module system and new ideas around controllers. “Effectively we built up a lot of really cool primitives of how to build web applications,” said Fluin.

Then in 2014, the team started to notice and understand areas where Angular applications would fail at scale. “And the team tried to take the same philosophy of making web development easier and helping developers build better applications, and apply that to the modern web as it was, as well as trying to close some of the gaps that we saw and some of the ways that people were shooting themselves in the foot with AngularJS,” Fluin added

So they set out to completely rewrite the framework. If you look at Angular compared to AngularJS, you’ll notice that Angular is built on more modern web standards, Fluin explained. For example, while AngularJS was written in JavaScript, Angular is written in TypeScript. 

Fluin explained that when creating Angular, the team tried very hard “not to reinvent, but to just rely on a build on top of what exists in the web.” 

There are several great things about Angular that has caused it to become so popular in such a short amount of time. For example, according to Javier Gamarra, headless team lead at digital experience software provider Liferay, some positives are that it offers a lot of official tooling, has a powerful command-line interface (CLI), and it is a highly opinionated framework that actually makes it more similar to a development stack than a framework. 

And according to Lisa Strader, lead developer at Clearsurance, it also benefits from having a thriving community. She believes that the official Angular documentation is lacking, but it’s easy to find good tutorials, videos, and online courses. “As most developers know, a good Stack Overflow community is invaluable,” Strader said. 

In addition, the fact that it’s supported by Google gives developers confidence that it will continue to thrive and be supported and that it’s “not a fly-by-night tech that will be deprecated quickly forcing us to change our tech stack,” Strader explained. 

Other benefits Strader sees are integrated IDE support, ease of use of Angular Materials components out of the box, and the ability to encapsulate components and reuse them. 

But for all those benefits, the framework isn’t without its problems. It also has a lot of pain points associated with it. 

A few issues are that it is not SEO friendly, it can be hard to keep up with releases, and it has a steep learning curve, Strader explained. Strader went on to explain that Angular requires additional development work than other frameworks to get a site SEO-optimized. She explained that developers need to use prerendering tools or server-side rendering in order to serve content, which may cause issues for teams new to SEO who might miss this and be confused when they discover that Google isn’t indexing their pages because it only sees one page. Other SEO hurdles are that certain third-party SEO analysis tools won’t execute JavaScript and that the canonical URL for a page in an Angular app needs to be dynamically injected in order for Google to properly index the pages. 

Many companies also find it a challenge to keep up with new releases of Angular, though Strader believes that the ease of upgrading seems to be improving with each new release of the framework. 

“Angular has a very frequent release cycle – meaning your component can quickly become ‘legacy’ if your team isn’t able to keep up,” said Gamarra. 

In addition, there is a steep learning curve with Angular. This means that it may not be an ideal framework for smaller one-off projects. Gamarra said the steep learning curve is due to the fact that it is a large framework in terms of both size and API surface area. In addition, it uses a lot of Java-inspired patterns — like dependency injection and API surface area — that aren’t common in other JavaScript frameworks. 

Angular gets a new compiler in Angular 9
According to Fluin, a big change to the Angular codebase has just been released. Ivy is the next big milestone for Angular. Ivy is the result of an attempt to rewrite the Angular compiler and runtime, Fluin said. 

As of Angular 9, Ivy will be made default for people. It has backwards compatibility built in so that people don’t have to change their applications in order to take advantage of it. 

Ivy will allow developers to “lazy load just a single component,” Fluin said. This was a very highly requested feature, he explained. According to the team, Ivy will enable developers to significantly reduce the size of their applications.  

In addition to Ivy, the Angular team continues to work to improve the performance of Angular. “[We’re} doubling down on this idea that because we own more of the technology and build stack for building Angular applications, because we have our great CLI, we can continue to make applications better and better without people having to change their code,” said Fluin. 

Accessibility in Angular 
Web accessibility is an important thing to have, but unfortunately most websites don’t meet accessibility standards. In fact, a 2019 analysis by WebAIM of the top million website homepages found that 98.7% of them didn’t meet WCAG 2 (Web Content Accessibility Guidelines).

While a framework can’t guarantee accessibility, there are several tools available to Angular developers to improve accessibility, software architect and author of the Angular Project book, Zama Khan Mohammed, wrote in a post on the Angular blog.   

According to Mohammed, accessibility starts with UI design. He recommends that designers use color palettes with contrasts that meet the accessibility standards, choose appropriate typography, use responsive design, and create simple animations and interactions. 

A lot of accessibility issues can be addressed by using native elements and proper semantics. Here are a few rules to keep in mind:

  • Use semantics tags (like nav, aside, and main) instead of just using div and span.
  • Use the right order for headings
  • Use alt attributes on images
  • Use buttons for things that can be clicked on. Further, if a non-interactive element is the click event, then add in key events for keyboard accessibility
  • Associate label with the form control
  • Avoid positive “tabindex”
  • Use captions on video and audio

Other things to consider are keyboard navigation and focus management. According to Mohammed, keyboard navigation is important for users with motor disabilities. By making sure the tabs are in a logical order, it will be easier to navigate the website using just the keyboard. In addition to the tab key, there are other keys to keep in mind. The Angular CDK’s ListKeyManager helps maintain keyboard interaction for components like menus, dropdowns, selects, and list boxes. 

Focus management is also important for users who do not navigate with a mouse. “Knowing where the focus goes while using the application is really important for accessibility because we want users who do not use a mouse (screen reader/keyboard users) to be directed to the right place when an interaction occurs or when the route changes,” said Mohammed. Developers can force the focus of an element. This can become complicated in advanced situations, but the Angular CDK provides a FocusManager and FocusTrap service to help developers handle focus. 

Finally, Angular’s Codelyze can help detect common accessibility issues.  

“Accessibility is a must for all web applications and it should be considered from Day 1 in the project development lifecycle,” said Mohammed. “The Angular team provides tools to make it easier to create Accessible Components, and now it’s time for developers to utilize them and create accessible Angular applications.”