aurelia and .net

Aurelia( + .NET CORE)

@MR_SEAN_HUNTER (PCA PREDICT)

Agenda

What is Aurelia?Why Aurelia?Up and Running with Aurelia

& .NET Core

What is Aurelia

Next Generation SPA Framework

Next Generation Web Framework

Component based developmentModern JavaScriptModern web standards

What is Aurelia

MVVM (Model View View Model) Architecture

MVVM

view-model.htmlview-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)

Getting Started - JSPM

npm install jspm –gjspm init

Getting Started – Aurelia

jspm install aurelia-frameworkjspm install aurelia-bootstrapper

Modify the Babel Options

babelOptions: { "optional": [ "runtime",

"optimisation.modules.system", "es7.decorators", "es7.classProperties"

] },

Aurelia Todo

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?

-- 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 browsersIE9 & IE10

4 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 yoyo aurelia

Contact Details

Sean Hunter, Software Developer @ PCA PredictTwitter: @mr_sean_hunterEmail: sean.hunter.aus@gmail.comBlog: http://sean-hunter.io/