Aurelia vs AngularJS – Round One: FIGHT!

Things just got real in the front-end framework space. Durandal developer Rob Eisenberg and once upon a time short-term core Angular 2.0 developer has announced a new framework called Aurelia. A beautifully designed full-stack SPA framework with support for ECMAScript 6 syntax right out of the box and some clever design decisions.

Not only does it allow you to build applications using ES6, but it supports all forms of alternative abstraction syntax out of the box like TypeScript, AtScript and even CoffeeScript. Rob has plans to put out migration documentations detailing how to migrate from Angular 1.x, Angular 2.x and of course: Durandal. They are not currently available, but are on the roadmap as can be seen here.

The syntax

What we are seeing in Aurelia is undoubtedly the vision that Rob had for syntax in Angular 2.0. But due to internal politics and some resistance, Rob left because he realised Angular 2.0 was heading a direction that didn’t match the path he had in his own head (although he didn’t specifically state the reasons, this is the impression I and others got).

The way you bind to variables declared within your application class is absolutely beautiful and simple. No weird symbols or abstract naming, just similar syntax to what you can already find within Javascript itself.

Check out this example taken from the docs for binding to a variable:

Beautiful. But it gets better. You can explicitly specify the type of binding you are using, which effectively self-documents your HTML for other developers to easily be able to see if a value is being one-way or two-way binded.

Another example from the documentation showcasing the explicit syntax (in this case, two-way binding):

Sweet. Sweet. ES6

Being able to write web applications using ES6 is not a new thing. In-fact, there are solutions out there that allow you to write Angular applications using ES6. However, Aurelia takes things a step further and includes support for ES6 as well as a Gulpfile with customised build system for transpiling your ES6 down to ES5 compatible code.

It makes me truly excited knowing that I can write an application using ES6 syntax and not have to worry about ES5 support because the included build system and configuration means I don’t have to research the best way to transpile my applications (nor do newcomers). This means you can just start writing code without having to worry about anything else.

The problem with Angular is even though it simply adds a layer over the top of traditional HTML, you have to learn its abstractions; directives, controllers, services, factories and the way it expects things to be done. Then you need to understand how to do things “the Angular way”, how the $digest cycle works, scoping and issues with nested scoping, communicating between components and other various aspects of Angular that add to the learning curve.

As frameworks transition towards the use of ES6, we will one day see dominant front-end frameworks solely using ES6 or an abstraction language like TypeScript. So when you learn Aurelia you are learning the future, you are learning ES6 and not so much the framework itself. This means all future frameworks that use ES6 will leverage your existing ES6 knowledge which means if you choose to learn Aurelia, most aspects of it should apply to another framework.

Pluggable & Modular

One of my favourite aspects of Aurelia in comparison to an existing solution like Angular is the fact that it doesn’t force you to work a particular way. If you have worked with Angular before then you would have heard the term. “the Angular way” when someone says that, they’re basically saying that Angular is heavily opinionated and if you try and do something that Angular wasn’t designed for, then you either have to do it the Angular way or no way.

Aurelia is the exact opposite of opinionated. When building the framework, Rob had the foresight to develop a framework that can be decoupled to the point where you can use parts of Aurelia in other applications/Node.js modules. While some might be happy working whatever way their framework tells them to, developers who are unsatisfied with the way a particular component works in Aurelia for example, can replace it entirely.

A great example is the component of the framework that watches your models/variables when using two-way binding. While we don’t have native support in most browsers for Object.observe() just yet, Aurelia allows you to replace the observing functionality with any solution you want to use including support for ES7 Object.observe() if the users browser can support it.

Don’t want to use most aspects of Aurelia except maybe the dependency injection component? That’s cool, Aurelia allows you to pick and choose what components you want to use and leave most of the framework due to the use of ES6 modules and functionality being broken up into feature chunks.

Aurelia learning curve

Piggybacking off of the existing point, the decision to use ES6 class syntax and other spec features means the learning curve is considerably lesser than other frameworks. The biggest complaint in AngularJS is the steep learning curve, weird HTML abstraction syntax and way you actually define and configure an application.

While ES6 syntax and features are still foreign to many front-end developers, those with experience working with a language like Java or PHP will notice some similarities and pick up things very quickly. The documentation as it stands is exceptional. It is clear, relatively concise and arguably easier to follow than Angular’s nightmare of a documentation that even stumps the professionals every once in a while.

The decision to use ES6 and the great documentation will lure a lot of developers intimidated by Angular’s syntax and lacking documentation over to Aurelia.

Keep in mind that as ES6 becomes more widely supported, more and more of these SPA frameworks will support ES6 syntax and eventually all frameworks will. Aurelia is the first of the bigger frameworks to support ES6 syntax out-of-the-box (there are frameworks that support it, just lesser known ones), but presumably the new Angular will support the syntax as will others in the coming months.

At this stage in the game ES6 support is an advantage, but it won’t be an advantage forever or for long. It might just be enough to lure developers over early before the likes of Angular ship their own new version which could be just what Aurelia needs to get ahead.

Templating in Aurelia

The templating system in Aurelia actually utilises the W3C HTML Imports specification for importing HTML templates and logic. As such you write what is relatively straightforward HTML, but you can also easily include other HTML files and everything is contained with opening and closing template tags.

An example of importing using the Aurelia template engine taken from the documentation:

As you can see, importing a navbar component is done by using a HTML like tag called import. No need to use DIV’s and weird attributes like import or aurelia-import or like you might be familiar with in Angular ng-include. The templating aspect of Aurelia while just requiring less syntactic sugar, is definitely easier to write and more inline with the standards set forth.

Dependency Injection and kittens

When it comes to dependency injection in Aurelia, it is simply a matter of defining a static method that returns what you want to be injected into the application, then referencing it on the constructor of your defined class.

An example of dependency injection taken from the Aurelia documentation:

import {HttpClient} from 'aurelia-http-client';

export class CustomerDetail{
    static inject() { return [HttpClient]; }
    constructor(http){
        this.http = http;
    }
}

Aurelia vs Durandal

While I am not clear on the intentions of Rob, I believe the intention is for existing Durandal users to migrate to Aurelia. As I mentioned earlier, there are guides coming detailing how to migrate from existing frameworks to Aurelia (one of those being Durandal). However, the plans are to keep maintaining Durandal 2.x for the foreseeable future.

I have no doubt that some of the concepts from Durandal made their way into Aurelia, but it appears that Aurelia is very much its own thing independent of Durandal. In-fact, what we see in Aurelia is a glimpse of what Angular 2.0 could have been had Rob had his voice heard a little more (but we’ll wait and see how Angular 2.0 turns out).

The syntax, the excellent support for ES6 and supplied Gulpfile for building back to ES5, it is the perfect package for easy out-of-the-box development allowing you to focus on the code and less time working out how you want to configure your build system (something I have done a bit for Angular, as I try and find a combination that works well).

One of the biggest differences is out-of-the-box Aurelia supports native ES6 class syntax for defining a module. Whereas in Durandal, you define a class as an AMD module as underlying module support is provided by RequireJS which works really well, but the syntax doesn’t look as nice in my opinion. Having said that, ES6 class syntax and AMD syntax are not really that far away from one another to easily port Durandal code to Aurelia.

There are literally too many great things to say about Aurelia and I haven’t even fully immersed myself into it just yet. I have already started playing around with it and I like what I see thus far. Of course it will take a bit of time before people start encountering caveats and other issues in the framework, but provided the community rallies behind Aurelia, I think it has a great chance at becoming a dominant player in the SPA framework war.

As other more dominant and less framework like contenders such as Mitrhil and React.js go down the path of concentrating on performance over syntax or features, it will be interesting to see where the likes of Aurelia ends up within the existing ecosystem of frameworks and libraries in the next year or so.

Is Aurelia ready for production?

You might have noticed that Aurelia fails to mention being in alpha or beta, and is definitely not ready for a stable 1.0 release just yet, Rob refers to Aurelia currently as very much an early preview (as of January 2015). This isn’t to say that Aurelia cannot be used in a production application, but being so new (like anything), you should tread lightly when deciding to write a whole new application with it just yet.

While Rob doesn’t plan on making any massive API breaking changes to Aurelia, he has plans to add new features and improve existing aspects of the framework. So if you are cool with things changing (even slightly) and you are happy to update your application as you go along, then there is no reason you couldn’t use it.

Start learning ES6

Even if you can’t or you are not comfortable using Aurelia just yet, I implore you to start reading up on ECMAScript 6 features now and understanding the syntax around modules and classes. It seems we are heading in the direction of SPA frameworks using ES6/ES7 features instead of writing their own complicated abstractions and polyfills, eventually (and hopefully) you won’t have to learn a new framework because you already know ES6.

As uncertainty remains around just what Angular 2.0 will look like, Aurelia has just entered the race as a VERY worthy contender for the SPA crown. Can we just hurry up and standardise on a front-end framework already? I think I speak on behalf of most developers when I say it can be tiring to have to continually learn the new flavour-of-the-week front-end framework. Things show no signs of slowing down just yet, I am keeping up, but would love to be able to breathe for a little while before I need to learn another MV* framework.

I will be doing a more detailed write-up shortly on Aurelia as I delve into its underlying complexities and see where it shines and where it epically fails (as the youth of today say). Perhaps even a comparison between AngularJS 1.x, React.js and other frameworks.

Try it out by reading up on Aurelia here and getting started with the code. Jump in.

Are you excited about Aurelia and if so, what parts excite you and what parts don’t?