On Wednesday the 11th May I had the opportunity to attend to a great event hosted by Betsson Group in Malta: a presentation of Aurelia from its creator Rob Eisenberg!

As opposite to standard presentations, this was a realtime coding session focused on bootstrapping a simple web application from scratch.

Cool. What is Aurelia?

Aurelia is a frontend framework supporting the MV* paradigms. It offers markup extension, dependency injection, CSS scoping, component-oriented structure and a bunch of modules to extend your application.

It’s competitors are the well known Angular (1 and 2), Ember, React, Knockout, … Even if probably the closest is Angular, since Aurelia is a complete framework.

So, what you saw?

The first thing which really surprised me is that you never see the framework in the code: along the talk, I saw only plain Javascript (ES6) and HTML, with the exception of some custom HTML attributes to provide the data binding with the UI. The only boilerplate present is related to the SystemJS configuration file.

I was so happy to finally see a completely transparent framework which allows the developer to focus on actual JS code!

Conventions vs. configuration

In the example we saw, starting is as easy as creating two files:

No decorators, metadata, no explicit reference of one file to the other: plain JS and HTML with JS code. The extra code you see in the HTML is actually Javascript.

But so, how it works? Part of the magic is triggered by simple bindings on the files and classes names, so it’s up to Aurelia to match the correct template with the proper code. While this can sound a bit scary and forcing you to follow one specific convention, on the other hand it unburdens the developer from checking imports, relative vs. absolute paths and offers a strong convention out of the box.

It’s simple Javascript

Another thing I really appreciated is that the HTML syntax for data binding is pretty simple and similar to ES6: this way it’s easy to understand even at a first glance and doesn’t require to learn yet another template language. For instance, during the demo, all the differences I saw were just the *.bind="expression" suffix, without extra symbols.

Take as an example the repeat statement:

Same dot notation and plain JS in the expression and in the template.

Just compare it for a while to the parenthesis jungle of the most famous framework.

Data binding

Data binding itself is unidirectional by default for every HTML element but the inputs. To specify which kind of binding you want, just tell it:

I have to admit that I definitely like the dot notation, which is widely used and available for several behaviours other than data binding. And the reason I like it is that it is close to Javascript.

The very same syntax is used to bind other attributes of the HTML elements, giving a linear and consistence experience.

Beyond the templates

A very nice feature is that you can teach Aurelia how to parse different files like MarkDown for instance just writing some JS code.  Then you import the template using the <require> tag.

This way it is able to support, for example, Knockout and Angular template’s syntax, allowing for a gradual transition towards the new framework.

Just came to my mind that one could probably write a parser for Collada, allowing a user to import in the page a 3D animation and bootstrapping it automatically.

About the event

The idea for the talk was born inside the MaltaJS community, thanks to Andrei Toma and Andrew Camilleri, and we found a great supported in Betsson. The company was in charge of the whole logistic and they did a great job, opening the doors also to external developers who can be interested in what is a unique event in Malta.

Check the videos to see it:




Frankly, I joined the event with a hyper-critical mindset. I don’t like the most the frontend frameworks, their attempts to break standards and the boilerplate soup you need to prepare before starting to work: when I have a problem to solve, I want to think at the problem, not at the instruments I will use.

Aurelia definitely surprised me as the framework is really unobtrusive: preferring conventions over configuration, it is really quick to grasp and the learning curve from an Angular user point of view looks smooth.

Another good point is that the core part is small compared to other frameworks, allowing for a modularity which is far beyond its main competitors.

On the other hand, I still have to see a more in depth example to have a better comprehension of its strengths and weaknesses.

One thing I definitely don’t like is the fact that they are still extending HTML: I think that the way to go is on the contrary to extend the programming language, to manipulate the markup and produce the desired results. But this is a good topic for a new post.