Aurelia Fundamentals
Aurelia is a relatively new framework, which has just reached Release Candidate status.
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 and 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:
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: NPM, JSPM, Nuget and Bower
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.
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:
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, including:
- You Don’t Know JS: ES6 & Beyond by Kyle Simpson (getify)
- Exploring ES6 by Teacher of the Year 2015 Dr Axel Rauchmayer
- Rapid ES6 Training by Mark Zamayota
- JavaScript Fundamentals for ES6 by Scott Allen and Joe Eames
- JS.Next: ES6 by Aaron Frost
What other options would you recommend for learning ES 2015/2016?
Thank you for reading the first part to this new series.
The next episode will be Getting Started with Aurelia and this will be released before the end of June.
