building your first spa with aurelia and mvc 6 - mihai coros
TRANSCRIPT
@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
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