getting started with aurelia brian noyes cto & co-founder, solliance inc ()...

Getting Started with AureliaBrian Noyes

CTO & Co-founder, Solliance Inc (www.solliance.net)

brian.noyes@solliance.net, @briannoyes

About Brian Noyes

CTO and Co-founder, Solliancewww.solliance.net

Microsoft Regional Director

Microsoft MVP

Pluralsight authorwww.pluralsight.com

te brian.noyes@solliance.net

@briannoyes

http://briannoyes.net

Web API Insider, Windows Azure Insider,Window Store App Insider, C#/VB Insider

<HTML/> {JavaScript;}CSS

<HTML/>

{JavaScript;}

CSS

C#

Razor ASPRuby

PHP

Browser

Single Page Applications

© Brian Noyes. All rights reserved.

Server

Single Page Application

Presentation (HTML/CSS)

Database

Web API

UI Logic (JavaScript)

Data/Service Access – Client Services (JS)

Web API

Single Page App Architecture

UI Rendering

SiteSPA

Single PageApplication

Web

Application!=

Web Site or

Web Project

=Orders SPA

Customers SPA

Etc SPA

© Brian Noyes. All rights reserved.

Embracing the Modern Web

Browser Capabilities Standardization Rendering and JS execution speed Standard more sophisticated

© Brian Noyes. All rights reserved.

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

© Brian Noyes. All rights reserved.

Transpiling

Transpilers CompilersHigh Level Language

“Machine” Language

ES2015

ES5

© Brian Noyes. All rights reserved.

Polyfills

Browser API

Polyfill Library

Application Code

© Brian Noyes. All rights reserved.

Quick Intro to ES2015/2016

Modules

Classes

Promises

let variables

String templates

Arrow functions

Generators

Enhanced Object Literals

Destructuring

Rest parameters

Default parameters

Spread parameters

const variables

iterators

comprehensions

unicode Set

Map

WeakSet

WeakMapProxies

Symbols

© Brian Noyes. All rights reserved.

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

© Brian Noyes. All rights reserved.

Package Management

JSPM

NuGet

NPM

Bower? ??

© Brian Noyes. All rights reserved.

NPM vs JSPM

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

Installed with NodeJS Download module

dependencies for Node app development

Download packages used as command line tools

Server libraries and frameworks

NPM JSPM

© Brian Noyes. All rights reserved.

Aurelia

Client AppFramework

Any editor or IDEAny serverbackend

Any client platform/

Current browsers

© Brian Noyes. All rights reserved.

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

© Brian Noyes. All rights reserved.

Aurelia Features

Modular Architecture Dependency Injection Two-Way Data Binding UI Composition (MVVM) Routing / Navigation Task Queues

Pub-Sub Messaging HTML Templating Custom Elements Custom Attributes Logging

© Brian Noyes. All rights reserved.

Browser Compatibility

Chrome Internet Explorer 11

Microsoft EdgeFirefoxSafari 8+

Evergreen

© Brian Noyes. All rights reserved.

Setting Up an Aurelia Project

Two paths From scratch yo aurelia

From scratch 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

yo aurelia Yeoman scaffolding tool Lays down skeleton-navigation sample app Full build, unit test, end to end test, serve, watch etc Gulp

tasks

© Brian Noyes. All rights reserved.

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

© Brian Noyes. All rights reserved.

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

ViewModel

ModelObject

ModelObject

ModelObject

Model

Data Binding

Client Services / Repositories

© Brian Noyes. All rights reserved.

MVVM Approaches in Aurelia

composeElement

Routing &Navigation

CustomElements

Hierarchical MVVM / Navigation

Page

Root View

ListView

ListViewModel

ItemView

ItemView

ItemViewModel

DetailsView

DetailsViewModel

ItemViewModel

Root ViewModel

© Brian Noyes. All rights reserved.

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

© Brian Noyes. All rights reserved.

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

© Brian Noyes. All rights reserved.

Dependency Injection in Aurelia

Done using the @inject(type[,type2,…]) 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); …

}}

© Brian Noyes. All rights reserved.

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);

}}

© Brian Noyes. All rights reserved.

Please use Event Board to fill out a session evaluation.

Questions?

Thank you!