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
Brian describes Aurelia as a framework for building loosely coupled, maintainable and well factored single page applications.
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.
Brian says Aurelia is for evergreen browsers.
For information on how Aurelia works with hybrid mobile development, see aurelia-interface-update.
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
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:
We see that we have a new dist directory containing our transpiled code.
It also has functionality for navigating to different pages, including nested navigation.
Another useful command is:
This runs all of our end to end tests.