Introduction to Aurelia by Stephen Lautier
-
Upload
andrei-toma -
Category
Software
-
view
198 -
download
1
Transcript of 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.