Angular vs Aurelia: Who Wins?

Reading Time: 11 minutes

A web application framework (WAF), also known as a web framework (WF) supports the development of web applications, which includes web application programming interfaces (APIs), web resources and web services. WAFs standardize the approaches developers use to build and implement web applications, largely by automating common tasks. For example, they often include libraries of routines that perform tasks like database access, session management and creating framework templates. These routine help promote the reuse of code, which reduces development time.

Many WAFs are currently available, so selecting one the best requires you to compare them in many areas. Aurelia and Angular are popular JavaScript (JS) client frameworks that decision makers often consider when developing applications for desktops, mobile devices and the web. The use of JS is currently a critical factor for software development frameworks, according to a 2018 survey by StackOverflow showing that nearly 70 percent of developers consider JS to be their primary coding language.

Both Aurelia and Angular include the modern features needed to build complex applications such as HTML, routing, single page application (SPA) and user interface (UI) composition. However, significant differences in their performance and capabilities also exist, requiring careful consideration of many trade-offs.

Angular

Angular is an open-source TypeScript-based framework developed by the Angular Team at Google, along with its community of organization and individuals. TypeScript is an open-source programming language developed by Microsoft and first released in 2012. Its primary difference from JS is that TypeScript does more code checking at compile time.

Angular is a ground-up rewrite of AngularJS and is generally considered a separate product. Angular was initially released in 2016 and is currently in version 9.0.0, as of February, 2020. Active support for this version of Angular will end in July 2020 and long-term support (LTS) will end in July 2021.

A survey in early 2020 shows that the number of people who have used Angular and plan to continue using it has dropped by 2 percent compared to the same time in 2019. Furthermore, overall interest in Angular dropped by about 1 percent.

Aurelia

Aurelia was initially released in 2015 and is currently in its first version. Developer interest in Aurelia peaked in mid-2016 in the United States. As of mid-2019, interest was about 25 percent of that peak. This trend is typical of other JS frameworks; initial interest rises quickly and then fades as developers turn their attention toward newer products.

Convention over Configuration

Aurelia favors convention over configuration, so it has minimal impact on development. This software design paradigm, also known as “coding by convention,” reduces the number of decisions that developers need to make, ideally without sacrificing flexibility. David Heinemeier Hansson introduced this philosophy in Ruby on Rails, another web development framework. However, it’s closely related to earlier concepts in software development like the principle of least astonishment and sensible defaults.

Coding by convention essentially means that a developer only needs to specify an application’s unconventional aspects. For example, if a model has a class called Sales, the database will have a corresponding table called “Sales” by default. The developer doesn’t need to write code for these names unless deviating from this convention. Aurelia’s behavior is similar when writing configuration files; the developer only needs to specify settings when the desired behavior deviates from the convention.

Modules

Aurelia is a collection of JS modules that serve as a platform for building applications for web browsers, desktops and mobile devices. Building applications in Aurelia generally consists of composing simple components with standard JS and TypeScript classes, along with an HTML template. These modules implement specific features of Aurelia such as the following:

  • Binding
  • Dependency injection
  • Metadata
  • Routing
  • Templating

Developers can use many of these modules individually in any JS project, including Node.js.

Open Web Standards

Aurelia also uses the Document Object Model (DOM) standard, which is independent of both platforms and language. This standard places web documents in a tree structure such that each node in the structure represents part of a document. Aurelia implements its own HTML parser and JS extensions, while also leveraging DOM APIs to optimize performance. It’s also based on the World Wide Web Consortium’s (W3C’s) Web Components, which will allow Aurelia applications to evolve as this standard advances without requiring major rewrites.

History

Rob Eisenberg is a central figure in the development of both Angular and Aurelia. He discussed his reasons for leaving the Angular team at Google to develop Aurelia in a 2016 interview with Cuttlesoft. Rob’s approach to software development is heavily influenced by his love of music, which he also studied in college. He views software development as a combination of art and reasoning, just as with musical composition.

Open-Source Advantages

Rob is a strong proponent of open-source software, which has greatly affected his career as a professional software developer. He regards the developer community as one of its greatest advantages because it provides a sense of camaraderie that allows developers to easily get help. It also means a closer relationship between developers producing the source and its users, which help the code grow more easily. Another advantage of open-source software is that bugs are identified and fixed faster because more eyes are looking at the code. Developers also have greater freedom, since there aren’t any owners to dictate the course that development should take.

Enterprise Support

Developers can build commercial add-ons for Aurelia that support enterprises. Organizations can form a support level agreement (SLA) with Aurelia that puts both development teams in touch with each other. Enterprises can submit support tickets that receive priority according to the terms of the SLA. This added value is worth the cost for many enterprises, since they can obtain the advantages of open-source software while retaining the support of proprietary software. Aurelia will also support version 1 clients for a year after the release of version 2, while users make this transition.

Future Developments

Rob expects the trend towards open-source development to continue growing. Software development is already at the point to where some open-source code is a virtual necessity. Organizations that have previously been reluctant to adopt open-source development are beginning to recognize its benefits. More developers want open-source, making adoption more a matter of management and company politics than a technical issue. Major players like Apple and Microsoft are embracing open source, and other developers will soon follow suit.

Microsoft in particular has kept software development as part of its core competency, which isn’t the case with Google. Most of their revenue comes from ads, so they take a very different approach to software development. While they are working on Angular as an open-source project, they don’t consider it to be a Google product nor do they consider Angular developers to be their customers. On the other hand, Microsoft does consider .Net developers to be their customers. This difference in business perspective has profound implications for open-source developers.

Reasons for Leaving Google

Rob left Google due to irreconcilable differences he had with the rest of the Angular team. He felt their design choices wouldn’t be sufficiently flexible when Angular was implemented. He also thought Angular’s development process was disconnected from its user community, especially when work began on version 2. Despite Google’s strong interest in supporting its users and availability of data, it never produced any case studies or use cases for Angular.

The Angular development team is organized as a subteam of Google’s Adwords Customer Relationships Management (CRM) team. Anything Angular does is will thus be driven by Adwords CRM system because it isn’t an independent product. Angular doesn’t have a business side because it’s funded internally by Adwords, which has its own agenda.

Take Away

Rob’s take away from his time at Google is that companies are spending millions of dollars to develop software on JS platforms without official support from the makers of those platforms. The system at Google simply isn’t set up so that a software development firm can simply offer Google money to fix a bug. In practice, the company would have to hire a development team on the side to do it, which would likely be a breach of Angular’s terms of service (TOS). Rob left Google because he realized that this structure was creating business problems that no one at Google was working on to any significant extent. He couldn’t solve them while working on the Angular team because the solution is to create a company and product with the structure needed to provide accountability to its customers.

Comparison

The Slant favors Aurelia over Angular for a client-side JS model-view-viewmodel (MVVM) framework as of 2020, ranking Aurelia third and Angular fifth. The MVVM software architectural pattern promotes separation of graphical user interface (GUI) development with that of business logic, generally through the use of a markup language or dedicated GUI code. This model exposes data objects such that developers can easily manage and present them to users. Important areas to compare Aurelia and Angular include the following:

  • Convention over configuration
  • Standards compliance
  • Popularity
  • Commercial backing
  • Language support
  • Routing
  • Documentation
  • Interoperability

Convention over Configuration

The “convention over configuration” philosophy is an advantage for Aurelia. This design approach means that Aurelia is unobtrusive to developers, in addition to being easy to learn and understand. Aurelia only requires developers to follow simple conventions without the configurations that Angular needs. The syntax of Aurelia is also easier to learn since developers can build components in vanilla JS and Typescript.

Aurelia developers can also focus on application logic without worrying about framework issues. For example, developers can create a component in Aurelia without annotating it with a decorator or specifying metadata. Aurelia takes care of a lot of these things by itself provided the developer follows simple conventions. As a result, development takes less time in Aurelia than in Angular since Aurelia programmers can concentrate more on business logic.

Aurelia’s highly modular approach to software design allows developers to build applications the way they want without being forced into particular rules or paradigms. Developers can also replace individual modules more easily in Aurelia since they can be used separately or as a full framework.

Standards Compliance

Aurelia is fully compliant with existing web standards as well as those that are currently emerging. Angular is far behind on this issue and is continuing to deviate from the standards. Aurelia libraries are more agnostic than Angular, meaning they contain mostly vanilla JS and TS classes. Developers can easily change implementations and test their code more easily in Aurelia while maintaining a business orientation.

Case sensitivity is one of the most obvious areas where Angular’s lack of compliance has implications for developers. Standard HTML is case-insensitive, so HTML tags in Aurelia are case-insensitive. Angular uses case-sensitive syntax, so it can’t use HTML parsers in web browsers. That means web browsers can’t handle directives like ngFor and ngModel natively. NgFor changes the structure of the DOM, allowing it to repeat a given HTML template for each value in an array. The Ng-model directive binds the value of HTML controls to application data.

Aurelia allows developers to easily wrap all templates in a single tag. This task is difficult to accomplish in Angular and may not be possible at all. Even if when is, Angular requires the developer to provide the name of both the templates and elements.

Binding

The difference in design philosophy between the two frameworks is also apparent when binding events to actions. Aurelia easily supports both one-way and two-way binding, which is difficult in the case of Angular and can lead to confusion among developers. In one-way binding, data only flows from objects to the user interface (UI). Two-way binding allows the synchronized transfer of data between objects and the UI, meaning any changes in one is reflected in the other.

Aurelia defaults to one-way binding, in accordance with conventional wisdom. Two-way binding is more common for uses such as binding an input widget to a particular view-model. However, many developers consider two-way binding to be anti-pattern, making it difficult to understand what the code is doing in complex applications. The syntax that Aurelia uses to bind variables within a class is also similar to the way JS does it. Aurelia developers can specify the type of binding they’re using, which aids in self-documentation.

Popularity

A recent survey by Hot frameworks consistently shows that Angular is more popular than Aurelia across multiple scoring methods. Angular has a Github Score of 90, a Stack Overflow score of 95 and an overall score of 92. In comparison, Aurelia has a Github Score of 75, a Stack Overflow score of 63 and an overall score of 69. One reason for Aurelia’s comparative lack of popularity may be the lack of major, successful web applications built in Aurelia, until recently.  Microsoft just published their careers site using Aurelia! 

 

Commercial Backing

Angular is backed by Google, which provides it with a large ecosystem and user community. However, this large community also means that Google doesn’t provide Angular users with individual support, so it’s completely open source.

Aurelia has a smaller ecosystem, so its third-party components aren’t widely available. It supports Aurelia applications through its base company Blue Spire Inc., which also provides consulting services for Aurelia users. Furthermore, Aurelia’s ecosystem is growing rapidly, largely due to its ease of development, simplicity and standards compliance.

Language Support

Angular requires the developer to write JS code only in Typescript. Aurelia developers can use Typescript as well, but they can also choose other coding languages like ECMAScript (ES) and all its variants, which provide developers with much more flexibility. While developers can use ES in Aurelia, they’re still strongly encouraged to use Typescript because most of Aurelia’s documentation and resources use Typescript.

ES is a specification for scripting languages published by Ecma International to standardize JS, which has remained the popular implementation of ES since it was published in 1997. Other common variants of ES include ES5, ES 2015, ES 2016 and ES.Next. Aurelia also includes tools like Gulpfiles, which aid in converting one ES variant to another.

Routing

Both frameworks handle routing configuration in a similar manner, although the definition of those routes is significantly different. In Aurelia, developers define parent routes in one place and put the configuration for sub routes into the child components. This approach completely encapsulates the components, hiding their inner complexity. Angular developers must define a module’s routes within a central configuration file, including paths, routable components and sub routes. This approach makes route definition much more complex in Angular.

Documentation

Aurelia and Angular both have an abundance of documentation and tutorials, allowing developers to learn the basics of these frameworks by following the tutorials on their respective sites. The most noticeable difference in this area is that Angular’s documentation has a steeper learning curve. The main reason for this difference is that Angular updates its framework continuously, requiring developers to constantly learn new changes and adapt to them. Furthermore, Angular is the more complex framework, making it more difficult to more difficult to transition from simply using to changing how it works.

Interoperability

Aurelia works well with other frameworks and has the advantage in interoperability over Angular. For example, Developers can use React components by creating a custom Aurelia element. Aurelia also works with Polymer, since they’re both based on the WebComponents standards.

Ongoing Developments

Both Angular and Aurelia are evolving rapidly, and both products will experience significant changes in the near future.

Angular

Angular 9 is a major upgrade, with the most significant changes including the use of the Ivy compiler and runtime by default. This change makes Angular bundles smaller and provides Angular with improvements in run time, debugging, type changes and builds stability. In addition to the overall improvement in performance that the Ivy compiler provides, the latest version of Angular has faster build time since it enables ahead-of-time (AOT) compilation by default. The long-term effects of IVY on developer interest in Angular remain to be seen.

Angular has also been updated to work with TypeScript 3.6 and 3.7. Additional changes include improved binding for Cascading Style Sheets (CSS) and improved internationalization. Furthermore, Angular v9 includes hundreds of bug fixes.

The most important changes in future releases of Angular are likely to include improvements to Ivy, especially reducing the bundle size and run time.

Aurelia 2

Aurelia 2 will be the next major version of Aurelia, which should be released shortly as of March 2020. This version retains all of Aurelia’s current capabilities, but improves them significantly. It still uses the same component model and syntax for binding and templating. The dependency injection (DI), compositional approach and emphasis on standards are also unchanged in Aurelia 2.

Latest Changes

Many of the changes in Aurelia 2 are improvements to existing tools, which are essential for a framework to be viable today. Aurelia 2 will work with bundlers and loaders more effectively since it follows the latest module loading standards. Several of these bundle and build tools are based on vanilla JS. Enhanced debugging tools in Aurelia 2 will also improve error messages, logging and stack tracing.

Future Changes

Aurelia 2 takes a new approach to project scaffolding to make this process easier than ever. Developers will no longer need to install an Aurelia-specific command-line interface (CLI) to build projects. They’ll be able to simply use Node.js to run npx, allowing them to generate a new project ready for deployment. No additional installations will be necessary.

The Aurelia 2 team is also working on integrating Visual Studio (VS) into Aurelia 2 to improve its context sensitivity, or inellisense, which is useful for functions like automatically completing attributes and binding expressions. Aurelia uses non-breaking templating syntax, so intellisense will also work in Aurelia. Developers also need comprehensive documentation of their framework as their projects grow, especially for design language and components. Aurelia 2’s support for Storybook will help accomplish this requirement.

Summary

Angular and Aurelia are both front-end frameworks for modern application development. They also support third-party tools and allow the integration of existing applications. The best choice depends on the parameters the developing organization values most, including community support and security. The ease of resolving technical problems with application and component functionality is also an important factor in choosing between Angular and Aurelia.

The most obvious difference to non-developers between the two frameworks is that Angular has a larger user base and community, primarily due to backing from Google. However, Aurelia is more stable than Angular, so Aurelia would be preferable in high-end applications where quality and security have great value. On the other hand, Angular may be preferable in cases where the application size is small, but the rate of requests is high.

We at Baytech Consulting, a custom web application development company,  have completed many projects in both Angular and Aurelia. Overall, we use Aurelia when given a choice.