How and why I built An application with Aurelia

About me

I'm an Angular 2 developer by day

The problem I wanted to solve

I wanted to use a framework that would look clean and stay out of the way while developing.

What is An application with Aurelia?

Aurelia is a framework invented by Rob Eisenberg, who previously worked on Angular 2, but became disenchanted with its direction. It's a full-featured open-source framework that has the features of Angular 2, but remains standards compliant and removes much of the boilerplate and syntactic inconsistencies associated with Angular 2.

Tech stack

The application I am building is based on a d3 force-layout graph which is linked to a redux state. Aurelia is the framework used and it is built with webpack.

The process of building An application with Aurelia

Aurelia is easy to set up and use. The process involves creating components much like in Angular 2, using dependency injection. Routers, inter-component binding, and services are all present.

The first place to start is with the Aurelia docs, which are excellent. The example projects are also full-featured and implement most everything you will need.

Challenges I faced

The first and major hurdle is that Aurelia by default tends to build with jspm, rather than webpack. I initially tried the jspm skeleton, but switched the webpack because I felt webpack has far more documentation and a greater user base. With the webpack skeleton in place I then had to learn a little about webpack in order to ensure that all the modules I needed were available.

The second problem is that two modules provided by the Aurelia community didn't really work. The redux store wrapper includes a select decorator that does not preserve the component context when it is triggered. I ended up building my own redux wrapper.

The second module that didn't work was the observable renderer, which would have let me utilize Observables directly in templates. Since this would have been very good for intercomponent communication, I ended up binding everything to redux and keeping the components more modular, which is probably better in the long run. Reliance on redux also allows you to dealing with some of the underdeveloped change-detection in Aurelia, which can be at times quite behind Angular 2.

Key learnings

Aurelia is not that unlike Angular 2. If you are familiar with Angular 2 you will find it to be pretty easy to learn.

Tips and advice

Aurelia is a great framework that is clean and lets you really focus on the problem domain you are working on, rather than the framework itself. I would recommend it to anyone learning about MVC/* frameworks because it is very sophisticated but also clean enough that it is not overwhelming. Unfortunately it is not a marketable skill, but that is a shame, because I believe it is production ready despite its flaws.

The primary advantage of aurelia is readability and standards compliance. For example, to render a variable in a template, you simply use ${variable} in the template, which is the same syntax as ES6 itself. There is no strange templating language like in Angular 2.

Because there is no excessive overhead, and you can build readable components, the code is more maintainable. If the essential concepts of the problem can be realized, the tipping point can be reached where bugs are prevented simply by having the best code structure.

However, you might have to rebuild the wheel a few times, because the Aurelia community is not as large as with other frameworks.

Final thoughts and next steps

Aurelia will be my framework of choice for future hobby projects, and I look forward to contributing to the framework itself.