Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Introduction to Aurelia by Stephen Lautier
Similar to Introduction to Aurelia by Stephen Lautier (20)
Recently uploaded
Recently uploaded (20)
Introduction to Aurelia by Stephen Lautier
- 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.