Aurelia is a relatively new framework, which reached v1.0 at the end of July 2016.
(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
In this first episode this new series, we look at what we need to know to get started with Aurelia:
Single Page Applications
Some examples of server side rendering frameworks are:
- ASP.NET MVC
- Ruby on Rails
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.
- View Templates
- 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)
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
- 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.
Building Aurelia Applications
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.
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.
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:
There are a number of options for learning ES 2015 in depth:
- 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
- JS.Next: ES6 by Aaron Frost
Thank you for reading the first part to this new series.