Aurelia Fundamentals Update

Aurelia LogoWhen I completed my Aurelia Fundamentals course on Pluralsight, it was May 2016 and Aurelia had just released beta 1. I had started the course over 6 months before that, and the framework had evolved a lot. And since the course came out, Aurelia 1.0 released and there have been a couple of minor updates since then. At the point where Aurelia 1.0 released, a number of things had changed since I first got started with the course. So I knew it was time to go do an end to end pass on the course to bring it up to current day.

That update has now gone live, so for those who have already watched the course, I wanted to give you an outline of the changes here so that you can decide if you want to go rewatch those parts. For those that haven't checked out the course, please do and you can do so knowing it is up to date with the Aurelia release 1.0.4.


So what has changed?

There are a couple things that have changed in the Aurelia ecosystem that resulted in small but widespread changes to the course modules. There were also a couple of things that changed inside the Aurelia framework that meant that a couple of my existing demos needed to be updated because the underlying behavior of the framework had changed. I'll outline which demos changed in what way below. The other thing that needed updating is that the Validation Plugin that I had covered in the Module "Working with Services, Plugins, and Pub/Sub Events" was discarded and replaced with a completely new implementation. Some aspects of its use were the same, but I needed to replace the demo for that to be in line with exactly how the new Validation plugin works.

And because some of the changes resulted in code changes to the application that I build up over the modules of the course, and the exercise code was based on beta 1, all of the source code in the downloadable exercises has been updated to Aurelia 1.0.4.

So let me break those changes down a little more.

ES2015

The first is just the evolution of EcmaScript 2015 (aka ES6 or ES2015) and TypeScript in the last year or so. When I started the course, ES 2015 was already a standard, TypeScript use was not very widespread yet, so I decided to use ES2015 for the language throughout the course. There were also a couple of future ES-Next features in use in Aurelia (specifically decorators and class properties) and at the time it looked like those might get standardized in ES 2016. They did not. In fact, ES2016 is out/approved, and there is almost nothing new in it, and nothing that impacts anything I show in the course. So for all intents and purposes ES2015 and ES2016 mean the same thing. And since I already had good coverage of the key features of ES2015 that impact your day to day Aurelia coding, that meant I didn't really have to change much - other than the fact that in a bunch of places I referred to decorators and class properties as ES2016 features. So I wanted to go through and clean that up and just refer to them as ES-Next features.

TypeScript

In the last year or so, the adoption of TypeScript has grown in leaps and bounds, probably in part because both the Aurelia team, and the Angular 2 team decided to start using it to build out their respective frameworks. Much of Aurelia itself was already built with ES2015, but most of the code that was written late in the development of Aurelia 1.0 is actually using TypeScript. As a result, this highlights that you can easily mix ES2015 code and TypeScript code in a single project if you are using the Babel transpiler. However, it also meant I started getting a lot of questions on why I did not do my whole course using TypeScript. It did not make sense to me to go back and redo the whole course in TypeScript for a couple of reasons. There are throngs of JavaScript developers who may still want to stick with mainstream JavaScript, and from that perspective, ES2015 is just the newest version of JavaScript. Additionally, all the core features of ES2015 that drive the structure of your code (Modules, Classes, Promises, let variables, Arrow Functions, string templates) work exactly the same in TypeScript and I already show how to use all of these in the course. So I decided to stick with ES 2015 as the lowest common denominator for modern JavaScript development. But I also added some coverage to the first module of what the differences are between ES2015 and TypeScript - specifically the features of TypeScript that go over and above what ES2015 already gives us.

Creating New Aurelia Projects

When I started the course, the only way recommended by the Aurelia team to set up your project, pull in client libraries, and integrate transpilation and polyfilling was to use JSPM or to use a Yeoman generator to create the skeleton-navigation project. Since then the team has broadened the options, and at least in terms of the ways recommended by the team and documented in the Aurelia docs, there are three choices.

The first is exactly what I already covered in the course - use NPM to pull down development tooling packages, and then use JSPM to create your project and pull in client library packages. I had also covered the use of the Aurelia skeleton-navigation starter project through the use of a Yeoman generator that had been built for Aurelia. That generator is still out there and is one way to create a project based on the Aurelia skeleton-navigation. But since it is not being maintained by the core team, I decided to cover the skeleton-navigation project the way recommended by the docs - which is to simply download it from the Github repo.

The skeleton-navigation repo also contains 6 variants of the app - 3 each for ES-Next (meaning ES2015 + decorators and class properties) and 3 each for TypeScript. Then the three sub-variants are one based on JSPM + NPM as covered in the course, one using ASP.NET Core as a host environment, and one using Webpack. Since Webpack is getting very popular and has a lot of advanced features you might need down the road, I also added a demo to show using it and highlighting the differences with the JSPM version. I decided not to get into the ASP.NET Core version simply because I know there are a lot of courses being developed that focus on ASP.NET Core.

Another thing I added was coverage of the third main option for starting a new project with Aurelia - using the Aurelia Command Line Interface (or CLI). So there is now a demo in the Getting Started With Aurelia module that shows how to create a project with the command line interface and discussing what is different about the package management using that approach - specifically that the only package management system in play is NPM.

In addition to the new demos covering the Webpack variant of skeleton-navigation and the CLI, the fact that there are multiple ways to get started now resulted in some minor wording changes in a couple of other clips.

Give Me The Details!!!

OK, if you want to know exactly what changed, below is the specific errata, module by module and clip by clip. I suspect most will stop reading at this point, so let me just psuedo-end here and say - Enjoy! If you have questions about Aurelia (or other SPA frameworks), feel free to ping me on Twitter, or if you are a Pluralsight subscriber in the Discussions on the course page.

If you got this far and don't have a Pluralsight subscription, shoot me an email at brian.noyes AT gmail.com and I can get you a one month pass to check out my course and any of the other 5000+ courses in the library that will hopefully convince you it is well worth the subscription cost to have such a deep library of knowledge at your fingertips. From my (admittedly biased) perspective, if your employer or you yourself are not willing to invest a few hundred dollars a year in advancing your knowledge base and capabilities, you've got your priorities all mixed up. I am as much or more a satisfied customer of Pluralsight as I am an author for them. It is an indispensible tool for me to quickly get up to speed on new technologies, or refine my capabilties with existing ones. If you need your boss to hear that from someone else, let me know, I'd be happy to shoot them an email saying exactly that on your behalf.

Errata changes

Any clips not mentioned below have zero changes to them


Module 1: Prerequisites

Changed

  • Welcome: Minor ES 2015 wording changes in last paragraph, minor outline slide change
  • Single Page Application Architecture: A couple tiny wording changes to make it flow better, and mostly re-done to have common pace/voice/volume across the first half of this module. No changes to slides
  • Embracing the Modern Web: Significant ES 2015 wording changes, and changes on slides as a result, split off transpiler and polyfill discussion that was at the end into its own new clip m1-04
  • Transpilers and Polyfills: This content was part of Embracing the Modern Web in original course, split it out to its own clip for shorter clips. Minor ES 2015 wording changes from prior end, slide typo correction
  • Package Management with NPM and JSPM: Wording changes based on both ES 2015 wording changes and because of New Project starting points. Slide changes as well.
  • Setting Up Projects with NPM and JSPM: Replaced with new demo that includes wording changes and different steps in the flow for better clarity.
  • ECMAScript 2015 and 2016: ES2015 Wording changes and slide update.
  • ES-Next: Decorators & Class Properties: Changed to a slide instead of a demo due to platform changes that made the demo fail at this point if run before covering stuff that is in m2
  • Summary: Minor wording and slide updates

New

  • What About TypeScript?: TypeScript coverage and positioning relative to ES 2015

Module 2: Getting Started with Aurelia

Changed

  • Building a HelloAurelia App From Scratch: 3:28 - Added callout because image path for Aurelia logo has changed slightly
  • A Tour Through the Aurelia Bootstrapping Process: 1:44 - Updated callout to say "pre-release" vs "pre-beta"
  • Customizing App Startup: 2:27 - Added callout because of same folder path change as the callout in m1-05
  • Leveraging the Skeleton Navigation Starter Apps: Replace existing with new, new title of "Leveraging the Skeleton Navigation Starter Apps"
  • Summary: Replaces original m2-08, redid the summary based on the updates

New

  • Using the Webpack Skeleton Navigation Starter App
  • Creating projects with the Aurelia CLI

Module 3: Implementing MVVM With Aurelia

Changed

  • Leveraging Compose Element Options: Replaced with updated demo that covers changes in the data binding scope of parent ViewModels since original release
  • Implementing Composite View Hierarchies with the Compose Element: Replaced - just blanked out a line of code in the first 10 seconds that is no longer there because of the changes in the previous demo
  • Override View Resolution Conventions in Aurelia: Replaced with updated demo that shows a couple more features that showed up post beta

Module 6: Aurelia Routing Beyond the Basics

Changed

  • Returning Promises from Your Activate Method: Replaced with updated demo (changed semantics in the router with respect to returning promises from canActivate or activate ViewModel methods)
  • Custom Navigation Pipeline Steps: Replaced with updated commentary and slides because there are now more pipeline slots to put your extensions in and when those steps are called is different that before release 1.0
  • Implementing Custom Navigation Pipeline Steps: Replaced with updated demo (changed API in the router pipeline)

Module 8: Data Binding Beyond the Basics

Changed

  • Using the signal Binding Behavior: Added callout at 4:15 for missing step if viewer is following along

Module 9: Working with Services, Plugins, and Pub/Sub Events

Changed

  • Validating User Input: Replaced with updated coverage of the new validation plugin
  • Using the Validation Plugin: Replaced with new demo of the new validation plugin

Module 11: Preparing Your Aurelia Application For Production

Changed

  • Get Started Defining and Running Unit Tests: Chopped first 2.5 min of original beginning of clip to remove coverage of the Yeoman generator, replaced with new 30 sec audio intro, otherwise unchanged
  • Using the Skeleton Navigation Sample App's Build Infrastructure: Chopped first 19 sec of original beginning of clip, replaced with new 17 sec audio intro, otherwise unchanged