introduction to aurelia by stephen lautier

Aurelia

About me

Stephen Lautier

~9 years experience – mainly web + game development

Full Stack Developer – C#, TypeScript and Web <3

Microsoft Stack – ASP.NET, WPF

SPA Frameworks – Durandal, Angular and Aurelia

Unity3D

Currently working in Central Teams “Team Atomic” – Sportsbook as a Senior Frontend / Team Lead

Agenda

Overview

What is Aurelia?

Community

Consulting + Training

Features

Demos

Walkthrough app + explain

Live samples

Before we start…

Touching other Technologies

NodeJS/NPM (tooling)

Gulp – Task Runner

JSPM – Package Manage frontend (ala Bower)

SystemJS – Module Loader (ES6 Modules)

TypeScript 1.8.x (latest)

Machine Setup

Node v4 or higher

npm install –g typings gulp jspm

Using Visual Studio Code as my editor

What is Aurelia?

MV* framework

Build on modern web - ES6/ES7

Similar framework as Angular

Formerly known as DuranalJS

Knockout as templating

Author - Rob Eisenberg

Caliburn/Caliburn Micro – WPF/Silverlight MVVM framework

Durandal

Worked on Angular2

Modular libraries

Http-client/http-fetch, dependency injection, animation, validation, i18n

UI Toolkits – kendo, bootstrap, materialize etc…

Can be used with other frameworks or even NodeJS

Project Status: Beta1 (RC soon!)

Benefits

Clean and unobtrusive

Convention over Configuration

Integrates well with others

TypeScript Support

Community

Gitter

Aurelia - 3178 people + 233.3k msgs

Angular1 - 3672 people + 15.3k msgs

Angular2 - 3842 people + 106.3k msgs

Contributors

Aurelia 300 unique contributors

Angular 2 over 100 contributors

*As of March 2016 - According to Rob Eisenberg

Good Documentation

Doc - http://aurelia.io/docs.html

Skeleton projects to help you get started

Open Source

Commercial Support

Enterprise support

Durandal Inc.

Consulting

Expert Hiring

Training

FeaturesSOME OF AURELIA FEATURES

Templating / BindingsAurelia VS Aurelia

Aurelia

Angular

Custom Attributes

Custom Attribute with Behavior e.g. route-href

Lifecycle hooks

valueChanged(newValue, oldValue) - callback

Component Lifecycle hooks

constructor created bind attached detached unbind

Simple Attribute Declaration + Use

Usage

Declaration

Custom Elements

Custom Element e.g. checkbox

Lifecycle hooks - similar to Custom Attribute

Element Declaration + Use

Declaration - ViewDeclaration – View-Model

Usage

Value Converters

Value manipulation for formatting + converting back

Similar to “Filters” in Angular1 or “Pipes” in Angular2 e.g. date format

Similar to Value Converters within WPF :)

Declaration Usage

Screen Activation Lifecycle

canActivate activate canDeactivate deactivate

Demo Time

Demos Recap

Dependency Injection

Templating/Bindings

Custom Element

Value Converter

Bootstrapping

Resources

Demos - https://github.com/sketch7/ssv-au-dojo

Aurelia Docs - http://aurelia.io/docs.html

Cheat Sheet -http://aurelia.io/docs.html#/aurelia/framework/doc/article/cheat-sheet

QA

End.