Welcome to Part 2 of this series reviewing the Pluralsight course Aurelia Fundamentals by Brian Noyes.

Brian is CTO and Architect at Solliance, an expert technology solutions development company.

Brian is a Microsoft Regional Director and MVP, and specializes in rich client technologies including XAML and HTML 5, as well as building the services that back them with WCF and ASP.NET Web API.

You can follow Brian through his blog at http://briannoyes.net

Also in this series:

Part 1 – Aurelia Prerequisites
Part 2 – Getting Started
Part 3 – Implementing MVVM
Part 4 – Using Dependency Injection
Part 5 – Routing Fundamentals

Aurelia Overview

Brian describes Aurelia as a framework for building loosely coupled, maintainable and well factored single page applications.

He discusses how Aurelia compares with other JavaScript frameworks, saying it’s closest cousin is Durandal.

He also discusses Angular 1.x, saying it’s a good framework, but with some flaws.

These flaws are some of the reasons why the team has taken some different approaches when developing Angular 2.

Brian says some other popular frameworks are Ember, Backbone, Knockout and React. Of these, only Ember is as comprehensive as Aurelia is (although this means the others are smaller in size). He also adds that if you want you can use React as a template for Aurelia’s default templating and databinding.

As well as this course module, there is a Getting Started guide written by Rob Eisenberg. This has links to download either the ES 2016 configured Aurelia, or the TypeScript configured Aurelia.

Browser Compatibility

Brian says Aurelia is for evergreen browsers.

For information on how Aurelia works with hybrid mobile development, see aurelia-interface-update.

Aurelia Features

We learn about the following features:

• Modular Architecture
• Dependency Injection
• Two-Way Data Binding
• UI Composition (MVVM)
• Routing / Navigation
• Task Queues
• Pub-Sub Messsaging
• HTML Templating
• Custom Elements
• Custom Attributes
• Logging

Building a Hello Aurelia App from Scratch

A Hello World app using Express JS, Babel, Aurelia-Bootsraper, and Bootstrap.

We see two techniques for data binding to our html view: template literals and .bind

A Tour Through the Aurelia Bootstrapping Process

This discusses the concept of Convention over Configuration.

One of these conventions is to load the module named “app”.

We see that aurelia-bootstrapper.js is transpiled ES5 code.

To find the original code, Brian goes to github.com/aurelia where there’s a separate project for each module produced by the Aurelia team, and he walks through the index.js code

Here’s the official aurelia-bootstrapper readme.

Customizing App Startup

Brian writes a configure method in main.js. This module imports LogManager and ConsoleAppender, and the demo just logs debug messages to the console.

We also see how to load a different name than app, by supplying our desired name into setRoot.

Leveraging the Aurelia skeleton-navigation Starter App

We want to be able to:

• Build app, doing transpiling of code at design time
• Use LESS or SASS and compile it to CSS
• Run Tests, both unit and end to end
• Serve up code and be able to debug it

We can do all of this quite easily using Aurelia’s starter kit skeleton-navigation.

Brian installs Gulp, Yeoman and Vildan Softic’s generator-aurelia.

Then the project is trivial to build:

gulp build

We see that we have a new dist directory containing our transpiled code.

We see that the demo app has the same functionality as Rob demonstrated at NDC Oslo when he compared 6 popular JavaScript frameworks.

It also has functionality for navigating to different pages, including nested navigation.

Another useful command is:

gulp e2e

This runs all of our end to end tests.