AURELIA: The Basics & Fundamentals

Aurelia is the creation of Rob Eisenberg and his team that mostly all came from the world of Angular. The framework was introduced to the tech world at the beginning of 2015. This framework was developed to build easy maintainable, loosely-coupled "end-to-end" Single Page Applications (SPA). Aurelia works on a base of modern Javascript advancements, so you can easily write your code in ES6 (or even ES7), use a transpiler like Babel, and operate without fear that some of the browsers won't support your code.

# MVVM Framework

Aurelia follows a MVVM software architectural pattern (Model-View-View-Model). The intent of this is to provide a clean “separation of concerns” between the user interface controls and their logic. It also helps to achieve maintainability, extensibility and testability of the app's code.

The MVVM pattern has been derived from the MVC (Model-View-Controller) model. The main difference between them is that all interactions in MVVM between Model and ViewModel go through binding system, which set loosely coupled relations between View’s elements and Model’s properties. By comparison, MVC goes through method calls.

# Data Binding between the ViewModel and Its View

Aurelia is a convention-based framework, which means that it has preset basics; however, you can always change the configurations to fit your needs. For instance, it is required by default that all paired ViewModels and the View templates have the same name and only differ in the file extension (e.g. if you create a module home.js for the ViewModel, Aurelia assumes that you have home.html file for your View).

Let's look at some code that demonstrates this and the work of a two-way Data Binding system.

Aurelia’s default initialization will search for an app module to start an app. So, from app.js we export class App, which is going to be our root ViewModel.

In app.html we put a root View. Again, by convention, every View should be nested inside of a template tag.

So, here is our simple page in the browser:

This example demonstrates how data-binding works. We get preset input value and message below it from the ViewModel, but as we enter another value in the input, text below changes immediately as we type.

You can put .bind on any element in your html View file. This will trigger Aurelia to search for the property in the corresponded ViewModel and set the value of that attribute.

By default, Aurelia uses one-way binding for most of the html attributes, so data flows from your ViewModel to the View. However, please note, inputs in two-way binding (as in our code above) can pass the data from your View to its View model.

Aurelia also allows you to be explicit about data flow direction and set .one-way, .two-way or .one-time flow directions for your attributes depending on your needs.

# Conclusion

Aurelia is managed by a highly professional community, which makes it a very stable framework. One of its best attributes is the two-way data-binding feature and that it is a highly modularized framework. In your project, you can use classic Aurelia with only a few of its libraries or extend it with your own libraries.