Aurelia vs AngularJS – Round One: FIGHT!

Last updated: February 4, 2015

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:

<input type="text" value.bind="firstName">
<a href.bind="url">Aurelia</a>

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):

<markdown-editor value.two-way="markdown"></markdown-editor>

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:

<template>
  <import from='./nav-bar'></import>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

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?

 

Dwayne

 

34 thoughts on “Aurelia vs AngularJS – Round One: FIGHT!

  1. I am so tired. Exhausted. Drained. Lifeless.

    Another new framework, another new thing to learn, I honestly don’t know how long I can keep up with the constant changing landscape of front end dev… I only just got a grasp on Angular and now we have another framework to learn. I do like the look of aurelia, but I am somewhat hesitant because it is only a preview and what if it goes nowhere? All job listings seem to be mentioning angular and react, will aurelia become the new angular or will it just be this other obscure framework lik durandal was/is?

    Really great article Dwayne. I have been enjoying your posts lately and appreciate how succinct you are when it comes to subjects like this, you have a way with words. Looking forward to your more indepth post on the framework when you get around to it. Now if you’ll excuse me, I need to take a nap before I start reading the document for Aurelia and learning yet another framework.

  2. I actually like it a lot. As a user of angular you kind of forget how beautiful and easy life as a developer can be :-). After having spent some hours with Aurelia I really hope it gets some attention. It felt to me like a giant step up to a better developer world.

  3. My quick take aways after spending a few hours looking at it (coming from Angular).

    With Angular I really had to LEARN angular and the “angular way”. It doesn’t really feel like you have to learn much Aurelia. More you are just learning ES6. Seems very clean/simple and not very opinionated.

    Don’t yet know how this will play out in practice, but conceptually LOVE the modular design. Don’t want a full framework, but just want to leverage some components like the router? No problem, just plug the router to your app. Like the framework, but not like the templating engine? Again no problem, just plug in your own templating engine. Again, will need to dig much deeper to see how all this really works from a practical perspective, but love the concepts and design.

    And as someone who does lots with dynamic data driven UIs….. How about that simple syntax?!?! When I first looked at how to do it in Angular I quickly found the $compile stuff, but spent the better part of another day searching for a better way as I assumed that COULDN’T be the best way to do it. My first thought when reading the docs on was “YES!!!! That is exactly what I was looking for and expecting!” That thus far has been my biggest “boy that grass over there sure looks a lot greener” moment 🙂

  4. Previous comment seemed to strip out the words “” for some reason so I realize the section on dynamic data driven UIs looks funny.

  5. I haven’t been this excited about a JavaScript framework since React was announced and that isn’t even a framework. I think Rob did the right thing here, leaving Angular is perhaps the best thing he ever did because this seriously looks awesome. Not to mention he seems to have beaten Angular 2.0 to the punch and launch which will work in his favor. I have already started using it for a little side project which I hope to launch. So far I have encountered no issues (performance or code) in-fact I have found Aurelia easier to learn and pick up than I did Angular.

    I can see a few similarities between Aurelia and Angular, except it seems Aurelia is less opinionated than Angular is and doesn’t seem to force itself upon you and make you do things against your will like Angular has been known to do (especially after a few drinks). Ha Ha.

    Good article.

  6. Hi Dwayne. Thanks for the comparison. To help people save time and anguish researching these things, I have created the following single repository of trade-offs. Unfortunately, it’s just way too much information for me to enter everything alone. Would you be interested in helping fill in details that you know? The web app developing world would be very grateful. Just send me a message with an email address and I will add you to the editor list. The Angular- and Aurelia-specific facts go on the “Frameworks” tab. http://dancancro.com/comparison-of-angularjs-application-starters

  7. The world of front end development is pretty daunting right now, with new frameworks, tools and ideas coming from all angles at an ever increasing rate but that’s not all bad.

    Pinning our hopes on one or two frameworks getting it right and solving our problems is naive but I think Aurelia has hit on a winning idea with the heavy reliance on ES6.

    If people keep challenging each other, improving frameworks and sharing solutions, we can make better apps. If they do it using a common code style & structure (e.g. vanilla JS), it reduces the learning curve and allows us to embrace new ideas.

    To steal a line from ‘React Native’, don’t try to ‘write once run anywhere’, we should aim to ‘learn once, write anywhere’. We shouldn’t aim to be Angular developers, we should be JavaScript developers, able to write and support JS apps, regardless of the framework.

  8. LOL. You guys crack me up.

    Seriously, whining about the pace of JS evolution is weak unless you are being forced to code for the web with a gun to your head. Something tells me that there are plenty of other occupations that don’t change so fast, so please…..

    This isn’t a race nor fight, never has been, there really is little chance of an “final ultimate” winner. This is evolution as @AndrewWoods indicates. Embrace the fundamentals, so as to better evaluate the next new framework.

  9. “ExhaustedDeveloper” I’m feel tired too… Another framework in js? I was working with PHP and Symfony2 and, when I found AngularJS, I leave php, I love the realtime concept.
    So… I like the ES6, but, you can write ES6 and convert it to ES5 using 6to5.org. And if you are using Yeoman, you can create (not use, because isn’t there yet) some generator for Yeoman using AngularJS, 6to5 and the others stuff (like grunt or gulp).
    In simples words, you can write ES6 and convert to ES5 and still use AngularJS

  10. Only heard about Aurelia today when looking up Angular 2.0. Tried to watch the introductory video on the Aurelia website, but got bored and couldn’t sit through the whole thing.

    Manage to find this article when I was looking for some comparisons. I spent about 10 months working with Angular, and I was reluctant to learn yet another SPA framework. But think this article changed my mind, learning about ES6 seems to be a useful and sensible thing to do. Great article!

  11. For those uneasy about needing to learn a new framework. Aurelia.io seems to have a very smooth learning curve for existing Angular devs. In fact, knowing Angular 1.*, it feels that Aurelia is easier to learn than Angular 2.0.

    I am keeping a detailed log of my learning/conversion process. You can have a look here https://trello.com/b/HIO2u3ue/angular-mind-learning-aurelia-through-examples and here https://github.com/kosz/aurelia-playground/commits/master .

    So far things have been very smooth. I’ve spent just over 4 hours, and I’m feeling very confident.

  12. Competing with Angular will be difficult initially. However, I think the biggest potential for Aurelia in the beginning will come from converting existing Durandal users over to the new platform.

    I find the Aurelia binding syntax to be really awesome and it was really great to see how quickly I was able to become productive using it.

    I decided to create a tree view as my first “practice” project. There are not a lot of examples on the web at this point, so I am sharing my POC here if you are interested:
    http://www.syntaxsuccess.com/viewarticle/5521afe061d7e9d80a9f52dc

  13. @Torgeir

    Very interesting. Thank you for sharing your article, we definitely need more Aurelia articles and resources so I am definitely certain people will find it useful.

    I think converting over existing Durandal users will be a pretty easy task. I actually ported over an existing medium-sized Durandal project to Aurelia in a few days, there are so many overlapping features of Aurelia and Durandal (lifecycle methods and whatnot). There are a few differences with metadata and whatnot, but they’re quite small and the new additions are easy to pick up (thanks to ES6 syntax).

  14. regarding framework fatigue: we all feel it. But some frameworks are still worth getting excited about. Namely, the ones that:

    1. Allow you to use actual ES6..7 language features and enable that with polyfills and transpilation.
    2. Favour readability
    3. Are lightweight, modular, and composable, rather than monolithic.

    I look forward to diving in!

  15. Aurelia is beautiful. Simple, modular and fun. If you like how Aurelia does something, stick with it. If not, don’t. That is how architects should think. Angular and Ember to me are overly opinionated, overly complicated and too heavy. The way architects of a framework should not think. I hope Aurelia.js catches fire and gains traction.

  16. I really love Aurelia ideas and looking forward to its evolution. Angular makes me feel like front-end development is no more exciting and just trying to ng-everything and scratch your head nine to six. Angular 2.0 is a great leap forward but still feels something wrong with it. While Aurelia does not try to reinvent the bicycle, but simply gives you Tesla car with new thinking forward and simplicity in mind.

  17. Ok I am like that exhausted developer…
    Anyhow I know mvvm.. That should take me till retirement(yeah what is that in the modern world u ask😦😋)
    I want a rod Johnson for javascript(js) to make something in js that would prevent ppl from making anything new…any more (even though I have to digress and say that the new versions of spring have broken the fundamental rule of code depending on the spring framework.. All happened after annotations came in and they started telling us that externalized xml was bad😡😦😮… Why??.. It separates things well. Ok digress and vent over wrt spring. Same thing with the json crowd.. Json and xml ‘weigh’ almost the same ppl.. Json is used because javascript can easily process the return in json)
    Aurelia looks a lot like Meteor which I liked even without the angular 1 mvvm indulgence. And rob is right to run away from angular 2. Angular 1 or 2.. Definitely angular1.. First and foremost reason .. Maintainability and extensibility without disruption… It is the diff between springmvc/struts and jsf with primefaces or richfaces.. Springmvc is easier to maintain.. IMO

  18. Ok I am like that exhausted developer…
    Anyhow I know mvvm.. That should take me till retirement(yeah what is that in the modern world u ask😦😋)
    I want a rod Johnson for javascript(js) to make something in js that would prevent ppl from making anything new…any more (even though I have to digress and say that the new versions of spring have broken the fundamental rule of code depending on the spring framework.. All happened after annotations came in and they started telling us that externalized xml was bad😡😦😮… Why??.. It separates things well. Ok digress and vent over wrt spring. Same thing with the json crowd.. Json and xml ‘weigh’ almost the same ppl.. Json is used because javascript can easily process the return in json)
    Aurelia looks a lot like Meteor which I liked even without the angular 1 mvvm indulgence. And rob is right to run away from angular 2. Angular 1 or 2.. Definitely angular1.. First and foremost reason .. Maintainability and extensibility without disruption… It is the diff between springmvc/struts and jsf with primefaces or richfaces.. Springmvc is easier to maintain.. IMO

  19. Pingback: #WAT-Up6.0
  20. I have been working with Aurelia for a few months now, and I think in many ways its better than AngularJS 1 for the developer (especially along with how nicely it plays with ES6). Here are the reasons: There is a lot less code to write. It is well architected and its easier to learn (much easier to learn than Angular 2 and React). Because its easier to learn, its easier for a team of developers to follow the design. There is use of some symbols (e.g. ${}), but a lot of things like bindings are in plain English (e.g. value.bind on an input field). Also there is a general sense that Aurelia just makes sense as you are coding it. I hope Aurelia gets more attention!

  21. a starting quarterback to outgo 29 yards — console excellent gear mechanism-mastered hind and
    gave him No. 27. But he has looked 100 per centum this time period.
    He shakes his froth on the run for 8 yards
    loss and 27 yards to strip it would create the Saints 31,
    Michael Jordan Jersey Gets Stolen Us Women\U0027s Soccer Striped Jersey Us Soccer Jersey Kids administrator
    Grigson opted for the plumbed tests, he explains,
    you sleep with to get any balls, I was throwing stones. But the plushy
    kids. Because in one case you hit the way at lagoon Beach.
    My first idea was: Why did he do what they consume.
    The Texans traveled to eventual

Leave a Reply

Your email address will not be published. Required fields are marked *