Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4

5,053 views

Published on

More info on http://www.techdays.be

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,053
On SlideShare
0
From Embeds
0
Number of Embeds
85
Actions
Shares
0
Downloads
169
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Web apps are great because there’s no installation, you can link to them, and use familiar back/forwards navigationDesktop apps are great because they’re available offline, and you can move around in them without waiting for server requestsWhat if we could combine these?Nothing fancy = no special futuristic browser enhancements, no plugins. Works on IE6+, built with traditional web technologies only.
  • Web apps are great because there’s no installation, you can link to them, and use familiar back/forwards navigationDesktop apps are great because they’re available offline, and you can move around in them without waiting for server requestsWhat if we could combine these?Nothing fancy = no special futuristic browser enhancements, no plugins. Works on IE6+, built with traditional web technologies only.
  • Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4

    1. 1. Single PageApplicationsfor desktop, mobile, and tabletwith ASP. NET MVC 4
    2. 2. Single Page Applications * * and nothing fancy
    3. 3. Great user Runs onexperience any device (Advanced)Can work App-storeoffline deployable
    4. 4. Visible UI Web UI HTML/CSS HTML/CSS/JS Data services JSON/XML Application layer Navigation JavaScript APIs Data access layer JavaScript Local storageServer Client
    5. 5. MVC / Web Forms / WebMatrix Visible UI Web UI HTML/CSS HTML/CSS/JS knockout.js Data services JSON/XML Application layer Navigation JavaScript APIs WebAPI history.js Data access layer upshot.js JavaScript Local storage HTML5Server Client
    6. 6. 1 2Data UIWebAPI + Upshot Knockout + Upshot3 4Mobile &Navigation OfflineHistory.js Crazy magic
    7. 7. 1 2Data UIWebAPI + Upshot Knockout + Upshot3 4Mobile &Navigation OfflineHistory.js Crazy magic
    8. 8. WebAPI DbDataController DataSource Upshot Your app code ASP.NET MVC JavaScriptWebAPI + Upshot
    9. 9. 1 2Data UIWebAPI + Upshot Knockout + Upshot3 4Mobile &Navigation OfflineHistory.js Crazy magic
    10. 10. View HTML ViewModel Upshot ModelKnockout + Upshot
    11. 11. myViewModel.searchText = ko.observable("Chickens"); <input data-bind="value: searchText" />Knockout + Upshot
    12. 12. 1 2Data UIWebAPI + Upshot Knockout + Upshot3 4Mobile &Navigation OfflineHistory.js Crazy magic
    13. 13. 1 2Data UIWebAPI + Upshot Knockout + Upshot3 4Mobile &Navigation OfflineHistory.js Crazy magic
    14. 14. Your client-side code Cache HTML/JS/CSS/Images Manifest Data services Offline-aware Provider DataSources JSON/XML Provider Upshot Local storage HTML5Server ClientHTML5 Application Cache and Local Data Store
    15. 15. Single Page Applications and nothing fancy1 2Data UIWebAPI + Upshot Knockout + Upshot3 4Mobile &Navigation OfflineHistory.js Crazy magic
    16. 16. 1Explore the samplesDeliveryTracker, Upshot Scenarios - follow @StevenSanderson for a download link comingsoon2Try the new MVC 4 Beta – this week!… including the Single Page Application scaffolder template3Enjoy http://learn.knockoutjs.com/Interactive in-browser tutorials for Knockout.js and MVVM

    ×