Aurelia is a next generation JavaScript framework using the latest versions and features of the language. It embraces the latest standards in web development and favors convention over configuration so that time spent on writing boilerplate code is reduced to a minimum. In this session I will demonstrate how to build a Single Page Application with Aurelia using ECMAScript 2015 in Visual Studio 2015 having the backend in ASP.NET MVC 6.

1. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
BuildingYour First SPA with Aurelia and
MVC 6
Infiniswiss
@MihaiCoros
Mihai Coroș

2. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Many thanks to our sponsors & partners!
GOLD
SILVER
PARTNERS
PLATINUM
POWERED BY

3. Agenda
What is Aurelia?
Aurelia Features
Routing, Navigation, Composition
Aurelia Modules
Data Binding
Performance
Demo
3

4. Founder & Partner
4
http://www.infiniswiss.com
@MihaiCoros
mihai.coros@infiniswiss.com
Co-Organizer
AngularJSCluj meetup - http://www.meetup.com/angularjs-cluj/

5. What is
“Aurelia is a JavaScript client framework for mobile, desktop
and web leveraging simple conventions and empowering
creativity.”
http://aurelia.io
5
?

6. Why should we care about Aurelia?
Rob Eisenberg - http://eisenbergeffect.bluespire.com
“Rob is a widely recognizedUIdevelopment expert. He is the creator ofCaliburn.Micro
and Durandal and a formerAngular 2.0 team member.”
Commercialsupport
Growing community
6

7. Features
Forward-thinking: written with ES 2016
Routing & UI Composition
Broad LanguageSupport: ES5, ES 2015, ES 2016 andTypeScript
Modern Architecture: composed of smaller, focused modules
Two-Way Databinding
Extensible HTML
MV* with Conventions
7

8. Details ViewModelDetails ViewModel
Routing, Navigation, Composition
8
Page
RootView
List View
Item
View
Item
View
Item
ViewModel
Item
ViewModel
List
ViewModel
Root
ViewModel
Details ViewDetails ViewDetails View
Details ViewModel

9. Routing, Navigation, Composition
•Define container for routing <router-view>
•Implement configureRouter() inViewModel
•Define modules for routes
9

10. 10
Routing, Navigation, Composition

11. 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

12. 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 soAurelia can intercept propertyassignments
12

13. Property Dependencies
13

14. ObserverLocator
14

15. Performance
dbmonster
• demonstrates a framework's "repaint performance"
• Smooth Scrolling
• Popup Tracking
• Repaint Rate
• Memory
• Mutations Slider
15

16. DemoAurelia 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

17. 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

18. Demo
0. Asp.NET MVC 6WebAPI
1. Hello jspm
2. Hello Aurelia
3. Load data from server side
4. Add bootstrap
5. Create speaker list component
6. Add speaker details
18

19. 19
Q & A
Pluralsight:
“Aurelia Fundamentals”by Brian Noyes
“BuildingApplicationswithAurelia” byScott Allen
Demo:
https://github.com/ktulufrozen/ITCamp2016Demo