Getting Started with Aurelia Brian Noyes CTO & Co-founder, Solliance Inc (www.solliance.net) brian.noyes@solliance.net, @briannoyes

Visual Studio Connections About Brian Noyes CTO and Co-founder, Solliance www.solliance.net Microsoft Regional Director Microsoft MVP Pluralsight author www.pluralsight.com Web API Insider, Windows Azure Insider, Window Store App Insider, C#/VB Insider t e brian.noyes@solliance.net @briannoyes http://briannoyes.net Updates will be available at http://www.devconnections.com/updates/LasVegas_Fall08/VS

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

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

!= = Single Page Web Application Application Web Site or Web Project Customers SPA = Orders SPA Web Site or Web Project Etc SPA Site 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 Compilers Transpilers High Level Language ES2015 ES5 “Machine” Language

Polyfills Application Code Polyfill Library Browser API

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

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 NPM JSPM ? Bower ? ? NuGet

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

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

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

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

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

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 Data Binding ViewModel Model Model Object Model Object Model Object Client Services / Repositories

MVVM Approaches in Aurelia compose Element Routing & Navigation Custom Elements

Hierarchical MVVM / Navigation Page Root View Root ViewModel List View Details View Item ViewModel Item View Item ViewModel Item View List ViewModel Details 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? Please use Event Board to fill out a session evaluation. Thank you!