DailyJS

The Aurelia Client Framework

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

frameworks libraries browser

The Aurelia Client Framework

Posted by Alex R. Young on .
Featured

frameworks libraries browser

The Aurelia Client Framework

Posted by Alex R. Young on .

Aurelia

Vildan Softic wrote in to tell me about Aurelia, a new client-side framework. It got a lot of press recently, so I've been reading through the documentation and source to learn more about it.

Aurelia was created by Rob Eisenberg and is the successor to an older framework called Durandal 2.x. It's built from several libraries that provide the following features:

Aurelia uses ECMAScript 6 features like modules, so it uses jspm as the client-side dependency package manager. One of jspm's main features is it can load any module format.

View models are managed using dependency injection containers, and it combines this with ES6 classes to make the syntax relatively lightweight. This example uses DI to provide a lazy resolver for HttpClient:

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

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

In theory you could now swap the implementation of HttpClient, which would be ideal for writing tests against a mocked server.

Aurelia doesn't really depend on too many Node modules -- it's mainly build tools like Gulp and Karma for testing. The build scripts allow it to provide ES6 features using the 6to6 transpiler, so it's an important part of the framework. However, this entire layer is really a giant polyfill that allows you to focus on writing modern JavaScript.

It has features that are similar to other frameworks, particularly AngularJS. The dependency injection approach is different to Angular, it reminds me more of some of the .NET and Java desktop projects that I've seen over the last few years. Also, some features like two-way binding and custom HTML elements will appeal to people that are trying to make reusable UI components that can be shared across projects.

I realise that many readers suffer from framework fatigue, but Aurelia's early adoption of ES6 features to solve some of the problems we now face in client-side development is extremely promising.

Resources