getting started with aurelia - smart devs usergroup

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: sean.hunter.aus@gmail.com

Blog: http://sean-hunter.io/