Post on 14-Nov-2014
description
www.dotnet-developer-conference.de ddc_conference | #ddc12
Alexander ZeitlerPDMLab
http://pdmlab.com
Single Page Applications mit ASP.NET MVC und der ASP.NET Web API
www.dotnet-developer-conference.de ddc_conference | #ddc12
Single Page Applications
• „Rich Client“ im Browser• Responsive• Best of both worlds• HTML 5 / JavaScript
www.dotnet-developer-conference.de ddc_conference | #ddc12
DEMO
DEMO: Single Page Application in Aktion
www.dotnet-developer-conference.de ddc_conference | #ddc12
Single Page Applications
• Angenehme User Experience• Auf allen Geräten verfügbar• Offline arbeiten möglich• via App Stores deployable
www.dotnet-developer-conference.de ddc_conference | #ddc12
SPA: Schema
Server Client
UIHTML/CSS/JS
UIHTML/CSS
ApplicationJavaScript
DataJSON/XML
Data accessJavaScript
Navigation
Local Storage
www.dotnet-developer-conference.de ddc_conference | #ddc12
SPA: Schema
Server Client
UIHTML/CSS/JS
UIHTML/CSS
ApplicationJavaScript
DataJSON/XML
Data accessJavaScript
Navigation
Local Storage
www.dotnet-developer-conference.de ddc_conference | #ddc12
DEMO
DEMO: SPA Entwicklung
www.dotnet-developer-conference.de ddc_conference | #ddc12
KnockoutJS
var Viewmodel = function() {
this.title = ko.observable(‚Single Page Applications‘);
this.tags = ko.observableArray([‚webapi‘, ‚knockoutjs‘, ‚spa‘]);
}
ko.applyBindings(new Viewmodel())
<h1 data-bind=„text: title“></h1>
<ul data-bind=„foreach: tags“>
<li data-bind=„text: $data“>
</ul>
www.dotnet-developer-conference.de ddc_conference | #ddc12
HTML5 LocalStorage
localStorage.setItem("key", “value");
localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();
navigator.onLine
www.dotnet-developer-conference.de ddc_conference | #ddc12
AMPLIFYJS
amplify.store(„key“,“value“);
amplify.store(„key“);
LocalStorage
SessionStorage
GlobalStorage (FF2)
UserData (IE)
memory
www.dotnet-developer-conference.de ddc_conference | #ddc12
HTML5 CacheManifest
<html manifest=“myapp.appcache">
...
</html>
text/cache-manifest
CACHE MANIFEST
CACHE:
NETWORK:
FALLBACK:
www.dotnet-developer-conference.de ddc_conference | #ddc12
http://www.flickr.com/photos/crystaljingsr/3914729343/
www.dotnet-developer-conference.de ddc_conference | #ddc12http://www.flickr.com/photos/nateone/3768979925
www.dotnet-developer-conference.de ddc_conference | #ddc12
Alexander ZeitlerPDMLab
alexander.zeitler@pdmlab.com
http://blog.alexonasp.net@AlexZeitler