1. Getting Started with Aurelia
Brian Noyes
CTO & Co-founder, Solliance Inc (
@briannoyes

2. Visual Studio Connections
About Brian Noyes
CTO and Co-founder, Solliance
Microsoft Regional Director
Microsoft MVP
Pluralsight author
Web API Insider, Windows Azure Insider,
Window Store App Insider, C#/VB Insider t e
@briannoyes
Updates will be available at

3. Single Page Applications Browser CSS CSS <HTML/> {JavaScript;}
Razor
ASP
Ruby
PHP
<HTML/>
{JavaScript;}
Single Page
Applications

4. Single Page App Architecture
Single Page Application
Presentation (HTML/CSS)
UI Logic (JavaScript)
Data/Service Access – Client Services (JS)
Server
Web API
Web API
UI Rendering
Database

5. != = Single Page Web Application Application Web Site or Web Project
Customers SPA =
Orders SPA
Web Site or
Web Project
Etc SPA
Site
SPA

6. Embracing the Modern Web
Browser Capabilities Standardization
Rendering and JS execution speed
Standard more sophisticated

7. ECMAScript 2015 (ES2015) AKA ECMAScript 6 (ES6)
ECMAScript is the standard
JavaScript is the implementation of that standard by browsers
Approved as a standard in June 2015
Changed to a year-based version number system
Most browsers do not fully support yet
Can start using today through transpilers and polyfills

8. Transpiling Compilers Transpilers High Level Language ES2015 ES5
“Machine” Language

9. Polyfills
Application Code
Polyfill Library
Browser API

10. Enhanced Object Literals
Quick Intro to ES2015/2016
Promises
Default parameters
Generators
Map
Arrow functions
String templates
Modules
iterators
Rest parameters
Symbols
Destructuring
Classes
Enhanced Object Literals
const variables
Spread parameters
WeakSet
let variables
comprehensions
WeakMap
unicode
Set
Proxies

11. Building Aurelia Applications
Aurelia itself is written with ES2015, TypeScript, and a couple ES2016 features
You could use ES5 to write Aurelia applications
But you shouldn’t! Embrace ES2015 or TypeScript.
You will have better productivity by going with the Aurelia flow and using ES2015/TypeScript and possibly a couple of ES2016 features

12. Package Management
NPM
JSPM ?
Bower ? ?
NuGet

13. NPM vs JSPM Installed with NodeJS
Download module dependencies for Node app development
Download packages used as command line tools
Server libraries and frameworks
Installed with NPM
Download libraries and frameworks for client app development
Does client module loading
ES2015, CommonJS, or AMD
Uses SystemJS
Transpiles your code
Babel, Traceur, or TypeScript

14. Aurelia Client App Framework Any client platform/ Current browsers
Any server
backend
Any editor or IDE

15. Aurelia Overview
Rich interactive client JavaScript application (aka Single Page Application)
Run in the browser
Use the Model-View-ViewModel (MVVM) pattern
Convention over configuration
Leverage the power of the modern browser

16. Aurelia Features Modular Architecture Pub-Sub Messaging
Dependency Injection
Two-Way Data Binding
UI Composition (MVVM)
Routing / Navigation
Task Queues
Pub-Sub Messaging
HTML Templating
Custom Elements
Custom Attributes
Logging

17. Browser Compatibility
Evergreen
Chrome
Internet Explorer 11
Safari 8+
Firefox
Microsoft Edge

18. Setting Up an Aurelia Project
Two paths
From scratch
yo aurelia
npm install jspm (+ some sort of web server – i.e. express or http-server)
jspm init – choose Babel for last option (which transpiler)
jspm install aurelia-framework aurelia-bootstrap
Yeoman scaffolding tool
Lays down skeleton-navigation sample app
Full build, unit test, end to end test, serve, watch etc Gulp tasks

19. Building an Aurelia App
Add SystemJS and JSPM config.js to page
Add aurelia-app attribute on root element (body or div in body)
Import aurelia-bootstrapper
Build out root View/ViewModel (app.html/app.js by convention)
Build out child Views/ViewModels and use composition or navigation to present them
Data bind to ViewModel properties and methods from views
Consume client services in ViewModels

20. Model-View-ViewModel (MVVM)
Architecture for structuring your client side code
Based on the Model-View-Controller pattern
Ongoing interaction between View and ViewModel
Data flow and communications primarily through data binding
View
Data Binding
ViewModel
Model
Model
Object
Model
Object
Model
Object
Client Services / Repositories

21. MVVM Approaches in Aurelia
compose
Element
Routing &
Navigation
Custom
Elements

22. Hierarchical MVVM / Navigation
Page
Root View
Root ViewModel
List
View
Details
View
Item
ViewModel
Item
View
Item
ViewModel
Item
View
List
ViewModel
Details
ViewModel

23. Data Binding Key feature for doing MVVM
Supports one-way, two way, and one-time bindings
Adaptive binding - multiple observation strategies with fallback to dirty checking if (rarely) needed
Easy and intuitive to use
No special/strangle syntax in html
Add .bind to any property on a HTML element
Use string interpolation bindings for rendering values into DOM
Handle looping over collections with repeat.for
Conditionally render with show, if bindings

24. Routing and Navigation
Add configureRouter method to any ViewModel
Add router-view element(s) to the View
Define routes in configureRouter
Navigate with links in the page or programmatically by calling navigate() on router
Supports multiple view ports in a single View
Supports nested navigation (child View that has its own router)
Manages the view activation lifecycle
Extensible pipeline architecture

25. Dependency Injection in Aurelia
Done using decorator on the class
Instance(s) of type(s) is passed to the constructor of the class
import {SomeService} from 'someService';
import {inject} from 'aurelia-framework';
@inject(SomeService)
export class App {
constructor(someService) {
this.taskName = '';
this.someService = someService; }
startTask() {
var taskNo =
this.someService.startTask(this.taskName); …

26. Dependency Injection in Aurelia
Alternate (non-ES2016): use static inject property instead of decorator
import {SomeService} from 'someService';
export class App {
static inject = [SomeService];
constructor(someService) {
this.taskName = '';
this.someService = someService; }
startTask() {
var taskNo =
this.someService.startTask(this.taskName);

27. Please use Event Board to fill out a session evaluation.
Questions?
Please use Event Board to fill out a session evaluation.
Thank you!