Aurelia is a relatively new framework, which reached v1.0 at the end of July 2016.

It’s popularity has rocketed in recent months, and many of you have told me that Aurelia is now JavaScript’s greatest Single Page Application framework:

(Note that React isn’t included in this poll. You can only have a maximum of 4 options in Twitter polls, and React isn’t an all in one framework. I have also looked at Angular 2 and Polymer recently.)

There are numerous reasons for it’s popularity: performance, ease of use, interoperability, unobtrusiveness and support for Web Standards to name only a few.

So it is the perfect time to learn this exciting new technology together. And I decided to learn with Brian Noyes and his new Pluralsight course Aurelia Fundamentals:

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

The aim of the Aurelia Fundamentals course is an end to end, comprehensive coverage of all the core features of Aurelia and how to use them. The only requirement for this course is basic knowledge of HTML, CSS and JavaScript.

In this first episode this new series, we look at what we need to know to get started with Aurelia:

Aurelia Prerequisites

Single Page Applications

Brian explains that for the past two decades, developers have been mainly developing web applications using a client server model where a server side rendering framework emits the HTML, CSS and JavaScript for us.

Some examples of server side rendering frameworks are:

ASP.NET MVC

Ruby on Rails

Django

Laravel

Without the aid of a server-side rendering framework, there is a lot more work to do on the client. Doing all of this work using just Vanilla JS is a steep challenge, and especially so for large applications.

This is why we have many JavaScript frameworks available to assist us, and Aurelia is one of these. The main components of a modern Single Page Application (SPA) framework are:

View Templates

ViewModels

Services

Data Binding

Routing / Navigation

Custom Components

Our aim is to use the framework to create code that is more fine grained, loosely coupled, maintainable and testable.

Brain recommends thinking about Single Page Applications as a 3 layered architecture:

Presentation (HTML/CSS)

UI Logic (JavaScript)

Data/Service Access – Client Services (JavaScript)

The role of the Server is diminished compared to the traditional client-server model. It includes one or more Web APIs that serve the requests that come from the client.

Brian warns that the bigger a SPA gets, the more challenging it is to manage memory, load times, and complexity. To manage this we rely on componentization, and loose coupling between components.

It is quite common to see applications that are effectively a collection of SPAs. For example an application might be composed of:

Customers SPA

Orders SPA

Accounts SPA

Each SPA would be a different html page to be navigated to.

Embracing the Modern Web

Brian describes some of the major improvements we have seen on the web over the last few years:

Browser Capabilities Standardization

Rendering and JavaScript execution speed

Standards more sophisticated

In years gone by we had huge releases of new standards, and it sometime took years before browsers caught up:

HTML2 in 1995

HTML3.2 in 1997

HTML4 in 1997

ECMAScript 3 in 1999

ECMAScript 5 in 2009

Today standards work reflects modern architectural practices: it is more modular and decoupled. The days of monolithic specifications are largely over – instead we have separate specifications for each major feature.

Brian explains that terms such as HTML5, ES2015 and CSS3 are umbrella terms for many different features which are typically associated with that version of the language.

He describes the relationship between JavaScript, ECMASCript and ES2015.

Next he explains why we need transpilers and polyfills and what they are. Some features cannot be solved with transpilers or polyfills and require the browser itself to support the feature.

Building Aurelia Applications

You can write your Aurelia applications in ECMAScript 5 style JavaScript, but Aurelia is a forward looking framework which itself was written using the latest JavaScript standard.

So Brian recommends writing Aurelia applications using the latest JavaScript standard and that is what we will be seeing in this course.

Tooling for the modern web

Brian explains there are a variety of tools that we need for modern web development:

Transpilers and Polyfills

Editor or IDE

Command Line tools (Node JS)

Package Management with NPM and JSPM

There are an absolutely ton of different package managers available today. Brian mentions 4 of them:

For web development with Aurelia, Brian recommends both NPM and JSPM. He describes both of these solutions.

Although JSPM is a package manager, it also leverages System JS to do client module loading, and it supports transpiling as well. So, in some ways, it can be seen as a competitor to Webpack.

In the course Brian uses Windows as the operating system, Sublime Text as the editor, and Gulp as the task runner.

We see how to install Node JS and then install JSPM, Gulp and http-server using NPM.

Then we run JSPM to set it up to use our Github account:

jspm registry config github

We agree to setting it up with our Github credentials and enter our Github username and password.

Brian recommends installing a local version of JSPM as well as a global version. JSPM uses the much of the same syntax as NPM and Ruby Gems. We initialize it with jspm init.

For some strange reason, Traceur is the default transpiler. I say strange because it is hardly as popular as Babel.

Best ES6 transpiler — Kevin O'Shaughnessy (@ZombieCodeKill) October 26, 2015

Brian overrides this config default to use Babel instead.

With JSPM initialized we now have a jspm_packages directory in addition to our earlier created node_modules directory.

Much of JSPM has been written by Guy Bedford, who is also heavily involved with System JS.

JSPM uses System JS as the client module loader, and we see a config.js has been created for us.

With all of these supporting pieces in place, we can now use jspm to install Aurelia:

jspm install aurelia-framework

ES 2015/2016 Introduction

Brian introduces the most import concepts that are new to ES 2015:

classes

modules

promises

inheritance

We see a demonstration of these concepts with following files:

SimpleClass.js

index.html

There are a number of options for learning ES 2015 in depth:

Thank you for reading the first part to this new series.