Two Months (and counting) With Aurelia

Update: January 2017

I am using Aurelia, still. I am loving working with it and I find it hard to work with anything else. Aurelia has been stable and has saved me hundreds of hours of time by allowing me to be super efficient.

Update: December 2016

I am still using Aurelia and enjoying it thoroughly. Since writing this article, Aurelia has grown immensely and hit a stable v1 release with constant improvements being made. Such a great framework that I am glad I decided to use.

Back in January I wrote an article about Aurelia, squaring it up with AngularJS and pointing out how its use of ES6 features and polyfills makes for a clean and easy to use Javascript framework.

Since that original post I have actually been using Aurelia quite a bit and have started writing a production application with it as well. Using Aurelia has been a breath of fresh air and I thought I would share some of my experiences with the framework.

I have yet to get around to writing a tutorial on using Aurelia, but I thought I would share my experiences working with Aurelia so far. Things I like, things I do not like and things I think that can be done better.

Setup

Nobody likes setting up things. Even though for most projects I have a set workflow of how I use Gulp for testing and running other tasks, I still find I spend time adapting it to work on a project-by-project basis. Not to mention all of the other things that sometimes need to be added or configured.

In Aurelia things are different. The setup process is so simple, you could probably show your grandma the basics and she could setup an Aurelia application. The out-of-the-box defaults for JSHint, Gulp tasks, ignore files, Karma and Protractor configuration files make things so much easier to get up and running.

When I started using Aurelia, the only thing I changed was the identation levels in the .editorconfig file that ships with Aurelia and defaults to 2 spaces (I prefer 4). But that’s it. I literally started using it right away and that is one area Angular and other frameworks/libraries fail. Giving you sensible defaults and letting you write code.

Documentation

Surprisingly, I haven’t had to reference the documentation as much as I thought I would. The framework itself is so simple to use, you pick up its conventions and way of working so quickly. When I started learning AngularJS, I found it took a solid month before I understood how it expects things to work and all of its weird abstract syntax.

The only time I had to really read the documentation, was when I ran into some issues with the routing system caused by my own ignorance and not the framework itself. But honestly, you would be surprised how easy Aurelia is to pick up.

I am sure as I progressively get deeper within the framework I might need to reference certain parts of the documentation a little bit, but compared to my first-time experiences with Angular in Aurelia everything feels so much less stressful.

ViewModels

In Aurelia you write classes (ES6, TypeScript, whatever) which are your controllers aka a ViewModel, which in turn are immediately bound to a HTML file of the same name (your View). This means you spend less time configuring the framework and more time actually using it.

If you create a ViewModel called “users.js” the ViewModel assumes that you have a “users.html” file which becomes the view. Referencing the Javascript ViewModel within your route definition will load up that file when you visit it in your web browser.

Templating & Syntax

The templating system in Aurelia in one word: AMAZING. While you’re still writing HTML, you can do more powerful things like utilise the Shadow DOM to create compartmentalised components complete with their own styles, logic and markup. Because the HTMLImports specification allows you to write your views as though they are components or just HTML files, you get a lot of flexibility.

The syntax for binding to elements, model values and writing things like loops feels equally as liberating. Want to show or hide an element? show.bind="expression" or want to add in a repeater? repeat.for="item in items" on the element you want to repeat.

Completeness

Rob has been quite vocal about how he thinks Aurelia shouldn’t be used in production quite yet. More tests need to be written, probably a few more features and potentially API breaking changes. Having said that for what is effectively an alpha release, Aurelia feels like a stable and complete framework. So far I have not felt as though anything was missing, it makes it easy to include third party libraries like jQuery and Bootstrap.

If this is just a taste of better things to come, I think I will probably die of excitement when version 1 rolls around because Aurelia already wipes the floor with Angular 2.0 and any other SPA framework I have used (including Ember).

Bugs/Issues

As I briefly touched upon, Aurelia feels complete. It doesn’t feel like an early preview or alpha, it feels like a stable release. While I wouldn’t recommend taking my word for it alone, the experience I have had so far is that Aurelia has been able to achieve everything I have thrown at it without any problem whatsoever.

Conclusion

I knew Aurelia was going to be fun and an entirely new experience, but I never thought I would enjoy Aurelia as much as I have. I have been moving away from SPA frameworks in favour of Facebook’s React.js library and Flux methodology, but I think Aurelia has made me a believer.

I used to think when Angular 2.0 rolled around we would see uniformity amongst the popular SPA frameworks, but it is evident that Angular as it heads towards its 2.0 release is going in an entirely different direction. Whether it is worse or better, who is to say.

I think Aurelia is definitely off to a great start and with the talented Rob Eisenberg behind the wheel, it is sure to be a smooth ride.