This document provides an overview of Aurelia, a JavaScript framework for building web applications. It discusses the speaker's background and experience, introduces key Aurelia concepts like templating and bindings. It also covers Aurelia features such as custom elements and attributes, value converters, and component lifecycles. The document demonstrates these features through code examples and concludes with information on resources for learning more about Aurelia.

1. Aurelia

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

3. Agenda
 Overview
 What is Aurelia?
 Community
 Consulting + Training
 Features
 Demos
 Walkthrough app + explain
 Live samples

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

5. 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!)

6. Benefits
 Clean and unobtrusive
 Convention over Configuration
 Integrates well with others
 TypeScript Support

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

8. Commercial Support
 Enterprise support
 Durandal Inc.
 Consulting
 Expert Hiring
 Training

9. Features
SOME OF AURELIA FEATURES

10. Templating / Bindings
Aurelia VS Aurelia
Aurelia
Angular

11. Custom Attributes
 Custom Attribute with Behavior e.g. route-href
 Lifecycle hooks
 valueChanged(newValue, oldValue) - callback

12. Component Lifecycle hooks
constructor created bind attached detached unbind

13. Simple Attribute Declaration + Use
Usage
Declaration

14. Custom Elements
 Custom Element e.g. checkbox
 Lifecycle hooks - similar to Custom Attribute

15. Element Declaration + Use
Declaration - ViewDeclaration – View-Model
Usage

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

17. Screen Activation Lifecycle
canActivate activate canDeactivate deactivate

18. Demo Time

19. Demos Recap
 Dependency Injection
 Templating/Bindings
 Custom Element
 Value Converter
 Bootstrapping

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

21. QA

22. End.