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

Getting Started with AureliaBrian Noyes

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

[email protected], @briannoyes

http://www.solliance.net/

mailto:[email protected]

About Brian Noyes

CTO and Co-founder, Solliancewww.solliance.net

Microsoft Regional Director

Microsoft MVP

Pluralsight authorwww.pluralsight.com

te [email protected]

@briannoyes

http://briannoyes.net

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

http://www.solliance.net/

<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


Embracing the Modern Web

Browser Capabilities Standardization Rendering and JS execution speed Standard more sophisticated


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


Transpiling

Transpilers CompilersHigh Level Language

“Machine” Language

ES2015

ES5


Polyfills

Browser API

Polyfill Library

Application Code


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


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


Package Management

JSPM

NuGet

NPM

Bower? ??


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


Aurelia

Client AppFramework

Any editor or IDEAny serverbackend

Any client platform/

Current browsers


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


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


Browser Compatibility

Chrome Internet Explorer 11

Microsoft EdgeFirefoxSafari 8+

Evergreen


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


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


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


MVVM Approaches in Aurelia

composeElement

Routing &Navigation

CustomElements

Hierarchical MVVM / Navigation

Page

Root View

ListView

ListViewModel

ItemView

ItemView

ItemViewModel

DetailsView

DetailsViewModel

ItemViewModel

Root ViewModel


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


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


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

}}


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

}}


Please use Event Board to fill out a session evaluation.

Questions?

Thank you!

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

Documents

Transcript of Getting Started with Aurelia Brian Noyes CTO & Co-founder, Solliance Inc ()...