getting started with aurelia - smart devs usergroup
TRANSCRIPT
AureliaWHY, WHAT, HOW?
@MR_SEAN_HUNTER
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, 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.
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.
Is it solid?
Backed by Durandal Inc.
Commercial Support Available.
15 developer team distributed around the world.
MVVM
view-model.html
view-model.js
Aurelia Demo – Basic Application
https://github.com/aurelia/app-contacts
Aurelia Demo – Data Binding
A consistent binding syntax
Aurelia and the Microsoft Stack
+
Aurelia Demo - Validation
http://aurelia.io/validation
this.validation = validation.on(this) .ensure('firstName').isNotEmpty() .hasLengthBetween(3,10) .ensure('lastName') .hasLengthBetween(3,30);
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/
Aurela Demo – Event Aggregator
contact-list.js
contact-details.js
Angular 2.0 and Aurelia
Angular 2.0 and Aurelia
Web Components?
Now: Aurelia supports web components. This means polymer components can be used with Aurelia today.
Future: Ability to attribute an Aurelia Component to be treated as a Polymer component.
Browser Support
Evergreen browsers
IE9 & IE10
1 month 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/