building your first spa with aurelia and mvc 6 - mihai coros

@ITCAMPRO #ITCAMP16Community Conference for IT Professionals

Building Your First SPA with Aurelia and MVC 6

Infiniswiss@MihaiCoros

Mihai Coroș

@ITCAMPRO #ITCAMP16Community Conference for IT Professionals

Many thanks to our sponsors & partners!

GOLD

SILVER

PARTNERS

PLATINUM

POWERED BY

Agenda

What is Aurelia?

Aurelia Features

Routing, Navigation, Composition

Aurelia Modules

Data Binding

Performance

Demo

3

Founder & Partner

4

http://www.infiniswiss.com

@MihaiCoros

mihai.coros@infiniswiss.com

Co-OrganizerAngularJS Cluj meetup - http://www.meetup.com/angularjs-cluj/

What is

“Aurelia is a JavaScript client framework for mobile, desktop

and web leveraging simple conventions and empowering

creativity.”

http://aurelia.io

5

?

Why should we care about Aurelia?Rob Eisenberg - http://eisenbergeffect.bluespire.com

“Rob is a widely recognized UI development expert. He is the creator of Caliburn.Micro

and Durandal and a former Angular 2.0 team member.”

Commercial support

Growing community

6

FeaturesForward-thinking: written with ES 2016

Routing & UI Composition

Broad Language Support: ES5, ES 2015, ES 2016 and TypeScript

Modern Architecture: composed of smaller, focused modules

Two-Way Databinding

Extensible HTML

MV* with Conventions

7

Details ViewModelDetails ViewModel

Routing, Navigation, Composition

8

Page

Root View

List View

Item View

Item View

Item ViewModel

Item ViewModel

List ViewModel

RootViewModel

Details ViewDetails ViewDetails View

Details ViewModel

Routing, Navigation, Composition

• Define container for routing <router-view>

• Implement configureRouter() in ViewModel

• Define modules for routes

9

10

Routing, Navigation, Composition

Aurelia modules - https://github.com/aurelia

templating

binding

i18n

router

skeleton-navigation

validatejs

dialog

ui-virtualization

animator-css

templating-binding

dependency-injection

event-aggregator

http-client

fetch-client

history-browser

logging-console

bundler

web-components

templating-validation

cache

cli

11

Aurelia's Adaptive Binding

DOM Element?

• <select> value -> SelectValueObserver• <input> checked -> CheckedObserver• <input> value -> ValueAttributeObserver

Has getter function?

• Check for dependencies• Check for a property observation adapter• Dirty checking

Standard

Object

•Object.defineProperty so Aurelia can intercept property assignments

12

Property Dependencies

13

ObserverLocator

14

Performance

dbmonster

• demonstrates a framework's "repaint performance"

• Smooth Scrolling

• Popup Tracking

• Repaint Rate

• Memory

• Mutations Slider

15

Demo Aurelia on dbmonster

• Aurelia: http://jdanyow.github.io/aurelia-dbmonster/

• React: http://mathieuancelin.github.io/js-repaint-perfs/react/opt.html

• Angular 1: http://mathieuancelin.github.io/js-repaint-

perfs/angular/opt.html

• Angular 2: http://mathieuancelin.github.io/js-repaint-

perfs/angular2/opt.html

16

aurelia-ui-virtualization

Part of the Aurelia platform

Provides a virtualized repeater and other virtualization services

A list "virtually" has tens or hundreds of thousands of rows, but

the DOM only actually has rows for what is visible

Demo: http://aurelia.io/ui-virtualization/

17

Demo0. Asp.NET MVC 6 WebAPI1. Hello jspm2. Hello Aurelia3. Load data from server side4. Add bootstrap5. Create speaker list component6. Add speaker details

18

19

Q & A

Pluralsight:

“Aurelia Fundamentals” by Brian Noyes

“Building Applications with Aurelia” by Scott Allen

Demo:

https://github.com/ktulufrozen/ITCamp2016Demo