AureliaGETTING STARTED

@MR_SEAN_HUNTER (PCA PREDICT)

Agenda

Background

What is Aurelia?

Why Aurelia?

Getting Started

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.

Angular 1.0

Routing

Directives (first introduction of the module concept)

Simple, two way data-binding

What is Aurelia?

Easiest SPA Framework you will every use!

Moving from **old style.js ** to Aurelia

What is Aurelia?

Next Generation SPA Framework

Next Generation Web Framework

Component based development

Modern JavaScript

Modern web standards

What is Aurelia

MVVM (Model View View Model) Architecture

MVVM

view-model.html

view-model.js

What is Aurelia

Based on Simple and easy to change conventions

Why Aurelia?

Why Aurelia – Developer Happiness!

A consistent binding syntax

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)

The Feature Gap

Getting Started - JSPM

npm install jspm –g

jspm init

Getting Started – Aurelia

jspm install aurelia-framework

jspm install aurelia-bootstrapper

Modify the Babel Options

babelOptions: { "optional": [ "runtime", "optimisation.modules.system", "es7.decorators", "es7.classProperties" ]

},

Aurelia Todo

Development Flow

Create View Model (JS)

Create View (HTML)

Repeat

Composition

Dynamic Composition or Custom Elements

<compose view="my-panel-heading.html"></compose>

<my-panel-heading></my-panel-heading>

Aurelia Component Lifecycle

activate()

bind()

attach()

deactivate()

unbind()

detach()

Singletons

Every injected non-view model class is treated as a singleton.

* Can be overridden with transient

decorator

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?

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

4 months in, any shortcomings?

Very new stuff.

Documentation a work in progressfantastic.

Lack of 3rd Party Tools

Video Resources

In depth look at the data binding system with one of the core team members http://hangouts.readthesource.io/hangouts/aureliaio-data-binding/

Pluralsight (Scott Allan) https://app.pluralsight.com/library/courses/building-applications-aurelia/table-of-contents

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/