Aurelia is a next generation JavaScript framework which leverages the power of ES2015+ and JSPM to make the development process for building single page applications simple and intuitive. This talk will give you all the information that you need to hit the ground running developing Aurelia applications with Visual Studio 2015 on http://ASP.NET Core.

1. Aurelia
( + .NET CORE)
@MR_SEAN_HUNTER (PCA PREDICT)

2. Agenda
What is Aurelia?
Why Aurelia?
Up and Running with Aurelia &
.NET Core

3. What is Aurelia
Next Generation SPA Framework

4. Next Generation Web Framework
Component based development
Modern JavaScript
Modern web standards

5. What is Aurelia
MVVM (Model View View Model)
Architecture

6. MVVM
view-model.html
view-model.js

7. What is Aurelia
Based on Simple and easy to
change conventions

8. Why Aurelia?

9. Why Aurelia – Developer Happiness!
 A consistent binding syntax

10. Why Aurelia – Rob Eisenberg
Created:
• Caliburn (WPF & Silverlight MVVM Framework)
• Caliburn Micro (WPF & Silverlight MVVM
Framework)
• Durandal (1st Generation SPA Framework)
• Aurelia (2nd Generation SPA Framework)

11. Getting Started - JSPM
npm install jspm –g
jspm init

12. Getting Started – Aurelia
jspm install aurelia-framework
jspm install aurelia-bootstrapper

13. Modify the Babel Options
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system",
"es7.decorators",
"es7.classProperties"
]
},

14. Aurelia Todo

15. Aurelia Component Lifecycle
activate()
bind()
attach()
deactivate()
unbind()
detach()

16. Singletons
Every injected non-view model
class is treated as a singleton.
* Can be overridden with transient
decorator

17. Aurelia Demo - Routing

18. Aurelia Demo – Ajax

19. Aurelia Demo – Value Converters
view.html
date-format.js

20. Aurelia Demo - Deployment
 Because we don’t have HTTP2 yet, we need to
bundle.
gulp bundle
http://blog.durandal.io/2015/09/11/bundling-aurelia-apps/

21. SPA Data Flow
Two way data-binding or
Unidirectional dataflow?
-- Why not both?

22. Aurelia & Unidirectional Data-flow
contact-list.js
contact-details.js

23. Web Components?
 Now: Aurelia supports web components. This
means polymer components can be used with
Aurelia today.
 Future: Ability to export Aurelia component for
use as a web component (standalone).

24. Performance
Current benchmarks show
rendering speed of 2x Angular and
React

25. Performance
Micro-task Queue rather than
Virtual DOM

26. Is it solid?
 Backed by Durandal Inc.
 Commercial Support Available.
 15 developer team distributed around the world.

27. Browser Support
Evergreen browsers
IE9 & IE10

28. 4 months in, any shortcomings?
Very new stuff.
Documentation a work in progress.
Lack of 3rd Party Tools

29. Conclusion
 Easiest way to get started?
npm install –g yo
yo aurelia

30. Contact Details
 Sean Hunter, Software Developer @ PCA Predict
 Twitter: @mr_sean_hunter
 Email: sean.hunter.aus@gmail.com
 Blog: http://sean-hunter.io/