aurelia 101
TRANSCRIPT
AureliaWHY, WHAT, HOW?
@MR_SEAN_HUNTER (PCA PREDICT)
Agenda
The back-story
Aurelia 101
Our experience in Production
Aurelia – Themes
THE FOUR THEMES
Composability
Forward thinking
Simplicity
Flexibility
Composability
Compose the UI from a set of independent views.
Forward thinking
ES6 and ES7 are coming, Aurelia leans into this.
Simplicity
Don’t make me think too hard.
Flexibility
Simple conventions, easy to change
Brief history of front end development
26th August 200613th October 2010 - BackboneJS
5th July 2010 - KnockoutJS
2009, but really exploded in around 2013
jQuery – Cross Browser Development!
jQuery, starting to struggle…
How do we structure all of this JavaScript code?
Enter Backbone and Knockout
We can now split our code into views which are independently rendered.
Code easier to manage.
BackboneJS Eventing
Leads to debugging problems
Angular 1.0
Routing
Directives (first introduction of the module concept)
Simple, two way data-binding
What is next?
ES2015 and Beyond
ES6 Modules
ES7 Decorators
More..
Aurelia’s Toolbox - JSPM
Frictionless browser package management
Built on top of the SystemJS ES6 Dynamic Module Loader
Based on ES6 Module Loader Polyfill
Why modules?
“With ES2015 we should think about script modules instead of Script Files.
- Scott Allen
Modules the Old Way
Modules the New Way
Demo - JSPM
npm install jspm –g
jspm init
JSPM Module
Aurelia’s Toolbox – Modern JavaScript and BabelJS
Transform ES2015, and ES7 to ES5.
We can use the new cool stuff in JavaScript!
Some of the cool stuff
Arrow functions
Decorators
Modules
Properties
Arrow Functions
Decorators & Properties
Aurelia .. Finally!
Aurelia leverages the power of modern JavaScript to make building applications simple
MVVM
view-model.html
view-model.js
Aurelia Demo – Basic Application
https://github.com/aurelia/app-contacts
Singletons
Every injected non-view model class is treated as a singleton.
* Can be overridden with transient
decorator
Aurelia Demo – Data Binding
A consistent binding syntax
Aurelia Component Lifecycle
activate()
bind()
attach()
deactivate()
unbind()
detach()
Aurelia and the Microsoft Stack
+
Aurelia Demo - Routing
Aurelia Demo – Ajax
Aurelia Demo – Value Converters
view.html
date-format.js
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/
SPA Data Flow
Two way data-binding or Unidirectional dataflow?
-- Why not both?
Aurelia & Unidirectional Data-flow
contact-list.js
contact-details.js
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).
Performance
Current benchmarks show rendering speed of 2x Angular and React
Performance
Micro-task Queue rather than Virtual DOM
Is it solid?
Backed by Durandal Inc.
Commercial Support Available.
15 developer team distributed around the world.
Browser Support
Evergreen browsers
IE9 & IE10
2 months in, any shortcomings?
Very new stuff.
Documentation a work in progress.
Lack of 3rd Party Tools
Conclusion
Easiest way to get started?
npm install –g yo
yo aurelia
Contact Details
Sean Hunter, Software Developer @ PCA Predict
Twitter: @mr_sean_hunter
Email: [email protected]
Blog: http://sean-hunter.io/