Single Page Applications mit ASP.NET
MVC und der ASP.NET Web API



   Alexander Zeitler
       PDMLab
 http://pdmlab.com




ddc_conference | #ddc12   www.dotnet-developer-conference.de
Single Page Applications

•   „Rich Client“ im Browser
•   Responsive
•   Best of both worlds
•   HTML 5 / JavaScript




ddc_conference | #ddc12   www.dotnet-developer-conference.de
DEMO




DEMO: Single Page Application in Aktion



ddc_conference | #ddc12   www.dotnet-developer-conference.de
Single Page Applications

•   Angenehme User Experience
•   Auf allen Geräten verfügbar
•   Offline arbeiten möglich
•   via App Stores deployable




ddc_conference | #ddc12   www.dotnet-developer-conference.de
SPA: Schema

       Server                            UI                          Client
                                      HTML/CSS


                                      Application
                                                               Navigation
                                      JavaScript


       UI                            Data access
                                                           Local Storage
   HTML/CSS/JS                        JavaScript

       Data
     JSON/XML


ddc_conference | #ddc12   www.dotnet-developer-conference.de
SPA: Schema

       Server                            UI                          Client
                                      HTML/CSS


                                      Application
                                                               Navigation
                                      JavaScript


       UI                            Data access
                                                           Local Storage
   HTML/CSS/JS                        JavaScript

       Data
     JSON/XML


ddc_conference | #ddc12   www.dotnet-developer-conference.de
DEMO




DEMO: SPA Entwicklung



ddc_conference | #ddc12   www.dotnet-developer-conference.de
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>

 ddc_conference | #ddc12    www.dotnet-developer-conference.de
HTML5 LocalStorage


localStorage.setItem("key", “value");
localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear();

navigator.onLine




 ddc_conference | #ddc12   www.dotnet-developer-conference.de
AMPLIFYJS


amplify.store(„key“,“value“);
amplify.store(„key“);

LocalStorage
SessionStorage
GlobalStorage (FF2)
UserData (IE)
memory



 ddc_conference | #ddc12    www.dotnet-developer-conference.de
HTML5 CacheManifest

<html manifest=“myapp.appcache">
 ...
</html>

text/cache-manifest

CACHE MANIFEST
CACHE:
NETWORK:
FALLBACK:



 ddc_conference | #ddc12   www.dotnet-developer-conference.de
http://www.flickr.com/photos/crystaljingsr/391472934
                                                                             3/




ddc_conference | #ddc12        www.dotnet-developer-conference.de
http://www.flickr.com/photos/nateone/3768979925
ddc_conference | #ddc12   www.dotnet-developer-conference.de
Alexander Zeitler
                PDMLab
      alexander.zeitler@pdmlab.com

            http://blog.alexonasp.net
                   @AlexZeitler

ddc_conference | #ddc12   www.dotnet-developer-conference.de

Single page applications mit asp.net mvc und der asp.net web api