aurelia 101

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

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