Introduction

Creating and developing rich user experiences is one of the top priorities of organizations in 2016. Javascript, despite some criticism, is one of the most popular programming languages for building software. This is because you can find it in any of the layers that compound a software system. Because of its popularity, it is often easier for technology teams to recruit Javascript web developers, than web developers of other languages.

Graphic Javascript is the most common programming language

However, as mentioned, developers have criticized Javascript. Today, developers want to be able to rapidly develop interactive web applications, and it’s here that Javascript frameworks, such as Aurelia, Angular, or React, provide a major boost to standard Javascript. So at this point, let’s turn to examine Aurelia in more detail.

What is Aurelia?

Aurelia is the next generation client-side JavaScript framework created by Rob Eisenberg under the ECMAScript 6 (ECMA 2015) standards to be the successor of Durandal 2.x framework to create your own applications for the browser. It means its core and its collaborative libraries have been written with ES6 completely.

Aurelia applications are designed to be:

• Maintainable
• Testable
• Extensible

You can use the Aurelia framework to build a variety of application-like desktop applications using Electron, mobile apps using Cordova/CrossWalk/Phonegap and modern Browser apps. It can be integrated with any technology easily, it is pluggable, very customizable and has been designed with conventions in order to avoid the developer having to write lot of configuration code.

Different from other frameworks, Aurelia is recognized as an official product by Durandal Inc. It means it is an open source framework with optional commercial support.

Aurelia is currently in an early preview stage which means it is beyond in alpha version. According to Rob Eisenberg, Aurelia is not ready to go into production yet but it will be soon.

Graphic Summary of Aurelia

Advantages & Benefits

When using Aurelia you are building a next generation application. The main advantages you will find when using Aurelia as your SPA framework include:

• Aurelia has no dependencies.
• Allows developers to write components with plain Javascript. Additionally you can use ES6, Typescript, old Javascript Code, Coffeescript, etc.
• Aurelia uses simple conventions to reduce the amount of code developers need to write and maintain.
• Uses dependency injection so developers can easily test their components, for example using Karma + Jasmine.
• Aurelia is 100% extensible and modular. Developers may want to write their own plugins, custom elements and components.
• Aurelia is compliant with new standards.
• Microsoft TypeScript language is officially supported.
• Different to Angular or React frameworks, Aurelia has official product support through Durandal Inc.
• Developers can contact the Aurelia members and its core team through GitHub and raise questions/bugs/suggestions. Normally developers receive answers almost immediate.
• Custom trainings and consulting through Durandal.io company is provided.
• Aurelia is an evolution of the Durandal framework so there is a lot of experience regarding single page application architectures.
• Easy to learn for users with previous experience on Angular or KnockOut.

Architecture & Structure

Aurelia uses the MV* pattern, which for those of you not familiar with it, provides separation of concerns and a two-way bind data within views. The view is written with HTML and is rendered into the DOM. The view-model is written with JavaScript and provides data and behavior to the view. Basically Aurelia will find a VM and then find a view to tie together.

Aurelia relies on:

• NodeJS: Runtime environment for developing server-side and networking applications. Provides a rich library of various JavaScript modules like gulp, grunt, which simplifies the development of web applications.
• Jspm: Package manager for the browser, allows multiple versions of the same package and supports circular dependencies. It relies on SystemJS so packages can be imported as a module.
• SystemJS: Universal dynamic module loaders. It allows to load modules from npm, jspm, ES6 modules, etc. It’s installed automatically by Jspm. It works well with traceur and babel transpilers.
• RequireJS/Browserify: These are module loaders. When planning the architecture developers prefer to use those module loaders instead of SystemJS which depends on Jspm and go with Bower.
• Babel JS: It has support for the latest version of Javascript by using syntax transformations. Developers can immediately use next generation Javascript. You can also choose Traceur as transpiler
• Shims: Intercept API calls adding a compatibility layer on top of the newer code to resolve to support older functionality.
• Polyfills: Allow us to use HTML5/CSS3 features in legacy browsers. Aurelia has a minimal set of polyfills necessary to run and support any browser. It is mostly necessary for IE.
• Aurelia Skeletons: A good starting point to create your own Aurelia application is to clone from the remote repository some of the already set up skeletons for different kinds of applications which come with Gulp tasks and optimization stuff configured.

A common Aurelia application structure looks like:

build: Root directory for your build tool configuration.

task: Directory where your automated tasks files are stored.

lib: Where generic non-app specific code lives. Utility classes and functions for doing utility-like tasks

src: Root directory , contains; app.html, app.js and main.js

components: Where common application components like headers, navigation, footer, etc live

services: A folder for singleton service classes to work with API’s calls.

resources: Where our custom elements and value converters live.

styles: Where the stylesheets files live.

Belatrix Contributions to Aurelia

Since Aurelia is a new technology, which is still maturing, there are a plenty of ways to contribute to the project.

• Developers can fork the core/libraries and submit new pull requests with improvements over the existing code as well as new functionality.
• Developers can raise bugs or ask questions through Github.
• Developers can create new plugins and introduce them into the master branch.
• Developers may resolve others’ questions.
• Developers can fix bugs and submit them through a pull request.

Belatrix is providing development services using Aurelia as the main single page application framework.

Our goal is to contribute with the community by creating plugins or improving the existing code.

The Belatrix team has also contributed by raising some bugs/questions and we created a skeleton to build a mobile application using Phonegap which is currently being reviewed by the core team. With some migration work it can be used with Crosswalk easily. We take advantage of the Cordova engine to create Single Page Application to the mobile having Aurelia working.

Check out the pull request on Github.

We encourage people to fork some code and make their own contributions.

Conclusion: A forward-thinking technology targeting today`s mobile and browser environments

Aurelia is forward-thinking written with ES2016. It integrates with web components and it does not have external dependencies, except polyfills. It leverages the technology of the future to target today’s mobile desktop and browser environments. It is a real evolution of the Durandal product and has been created based on all the experience taken from that framework and several discussions which Rob Eisenberg had with the Angular team.

For those of you interested in developing next generation javascript applications, Aurelia will sure to be your favourite framework.

Webinar

Make sure to check out our in-depth review of Aurelia. You can listen to the recording here.

Important Links

• Aurelia Repositories
• Aurelia Team
• Aurelia Web-Site
• Aurelia-Docs