SlideShare a Scribd company logo
Single Page
Applications
for desktop, mobile, and tablet
with ASP. NET MVC 4
Single Page Applications


                           *
               * and nothing fancy
Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4
Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4
Great user   Runs on
experience   any device

             (Advanced)

Can work     App-store
offline      deployable
Visible UI
     Web UI
                               HTML/CSS
   HTML/CSS/JS

   Data services
    JSON/XML                Application layer   Navigation
                               JavaScript         APIs



                            Data access layer
                               JavaScript



                             Local storage
Server             Client
Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4
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      HTML5
Server                        Client
1                 2

Data              UI
WebAPI + Upshot   Knockout + Upshot

3                 4
Mobile &
Navigation        Offline
History.js        Crazy magic
1                 2

Data              UI
WebAPI + Upshot   Knockout + Upshot

3                 4
Mobile &
Navigation        Offline
History.js        Crazy magic
WebAPI   DbDataController    DataSource   Upshot
                                              Your app
                                                code
    ASP.NET MVC               JavaScript




WebAPI + Upshot
1                 2

Data              UI
WebAPI + Upshot   Knockout + Upshot

3                 4
Mobile &
Navigation        Offline
History.js        Crazy magic
View        HTML

              ViewModel

 Upshot       Model


Knockout + Upshot
myViewModel.searchText = ko.observable("Chickens");


     <input data-bind="value: searchText" />




Knockout + Upshot
1                 2

Data              UI
WebAPI + Upshot   Knockout + Upshot

3                 4
Mobile &
Navigation        Offline
History.js        Crazy magic
1                 2

Data              UI
WebAPI + Upshot   Knockout + Upshot

3                 4
Mobile &
Navigation        Offline
History.js        Crazy magic
Your client-side code    Cache
                                        HTML/JS/CSS/Images      Manifest




  Data services             Offline-aware
                              Provider        DataSources
   JSON/XML                   Provider

                                                  Upshot

                              Local storage
                                 HTML5

Server            Client


HTML5 Application Cache and Local Data Store
Single Page Applications

                        and nothing fancy

1                  2

Data               UI
WebAPI + Upshot    Knockout + Upshot

3                  4
Mobile &
Navigation         Offline
History.js         Crazy magic
1
Explore the samples
DeliveryTracker, Upshot Scenarios - follow @StevenSanderson for a download link coming
soon

2
Try the new MVC 4 Beta – this week!
… including the Single Page Application scaffolder template


3
Enjoy http://learn.knockoutjs.com/
Interactive in-browser tutorials for Knockout.js and MVVM
Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4

More Related Content

PPTX
Single Page Applications on JavaScript and ASP.NET MVC4
PDF
jQuery and Rails: Best Friends Forever
PDF
[2015/2016] Backbone JS
PDF
Backbone.js
PPTX
Share point saturday presentation 9 29-2012-2
PDF
PPT
Mvc architecture
PDF
Single Page Applications on JavaScript and ASP.NET MVC4
jQuery and Rails: Best Friends Forever
[2015/2016] Backbone JS
Backbone.js
Share point saturday presentation 9 29-2012-2
Mvc architecture

What's hot (19)

PPTX
ASP.NET MVC and ajax
PPTX
Spring MVC
PDF
Web Components Everywhere
PDF
PLAT-8 Spring Web Scripts and Spring Surf
PDF
Building RESTful applications using Spring MVC
PPTX
Jqueryppt (1)
PPTX
CQ Provisionning & Authoring
PDF
Webservices: connecting Joomla! with other programs.
PPTX
New Features of ASP.NET 4.0
PDF
PDF
jQuery - Chapter 1 - Introduction
PPT
Jasig Rubyon Rails
PPTX
SPSNH 2014 - The SharePoint & jQueryGuide
PPTX
J query resh
PDF
Introduction to angular js july 6th 2014
PPTX
ASP .NET MVC - best practices
PDF
Web components - An Introduction
PDF
Dynamic content generation
PPTX
SharePoint 2013 Client Side Rendering
ASP.NET MVC and ajax
Spring MVC
Web Components Everywhere
PLAT-8 Spring Web Scripts and Spring Surf
Building RESTful applications using Spring MVC
Jqueryppt (1)
CQ Provisionning & Authoring
Webservices: connecting Joomla! with other programs.
New Features of ASP.NET 4.0
jQuery - Chapter 1 - Introduction
Jasig Rubyon Rails
SPSNH 2014 - The SharePoint & jQueryGuide
J query resh
Introduction to angular js july 6th 2014
ASP .NET MVC - best practices
Web components - An Introduction
Dynamic content generation
SharePoint 2013 Client Side Rendering
Ad

Viewers also liked (13)

PPTX
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
PPTX
Development Trends - What's New in the World of Web Development
PPTX
ASP.Net MVC 4 [Part - 2]
PPTX
Deep dive into new ASP.NET MVC 4 Features
PPTX
Entity Framework Overview
PDF
Asp.Net MVC Framework Design Pattern
PDF
ASP.NET MVC 3
PPTX
ASP.NET Mvc 4 web api
PPTX
Learning ASP.NET 5 and MVC 6
PPTX
Asp.Net MVC Intro
PDF
Latest Trends in Web Technologies
PDF
Mobile First: How To Approach Mobile Testing!
PPTX
Web API or WCF - An Architectural Comparison
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
Development Trends - What's New in the World of Web Development
ASP.Net MVC 4 [Part - 2]
Deep dive into new ASP.NET MVC 4 Features
Entity Framework Overview
Asp.Net MVC Framework Design Pattern
ASP.NET MVC 3
ASP.NET Mvc 4 web api
Learning ASP.NET 5 and MVC 6
Asp.Net MVC Intro
Latest Trends in Web Technologies
Mobile First: How To Approach Mobile Testing!
Web API or WCF - An Architectural Comparison
Ad

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

PDF
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
PDF
Cross platform mobile web apps
PDF
HTML5 and the dawn of rich mobile web applications pt 1
PDF
HTML5がIE10/Windows 8にもたらすもの
PDF
Shreeraj - Hacking Web 2 0 - ClubHack2007
PDF
Mike Taulty MIX10 Silverlight 4 Patterns Frameworks
PPTX
The web as it should be
PDF
A Snapshot of the Mobile HTML5 Revolution
PDF
An Intro to Mobile HTML5
PDF
Rishabh Technology and Tools Overview (1)
PPTX
Single page applications mit asp.net mvc und der asp.net web api
PDF
Building Cross Platform Mobile Web Apps
PDF
HTML5 and the dawn of rich mobile web applications
PDF
Web app and more
PDF
Web Apps and more
PDF
Evaluation and prototyping of an HTML5 Client for iOS devices
PPTX
Social Photos - My presentation at Microsoft Tech Day
PPTX
HTML5: An Overview
PPTX
HTML5 for Rich User Experience
ODP
Evaluation and prototyping of an HTML5 Client for iOS devices
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Cross platform mobile web apps
HTML5 and the dawn of rich mobile web applications pt 1
HTML5がIE10/Windows 8にもたらすもの
Shreeraj - Hacking Web 2 0 - ClubHack2007
Mike Taulty MIX10 Silverlight 4 Patterns Frameworks
The web as it should be
A Snapshot of the Mobile HTML5 Revolution
An Intro to Mobile HTML5
Rishabh Technology and Tools Overview (1)
Single page applications mit asp.net mvc und der asp.net web api
Building Cross Platform Mobile Web Apps
HTML5 and the dawn of rich mobile web applications
Web app and more
Web Apps and more
Evaluation and prototyping of an HTML5 Client for iOS devices
Social Photos - My presentation at Microsoft Tech Day
HTML5: An Overview
HTML5 for Rich User Experience
Evaluation and prototyping of an HTML5 Client for iOS devices

More from Microsoft Developer Network (MSDN) - Belgium and Luxembourg (20)

PPTX
Code in the Cloud - Ghent - 20 February 2015
PPTX
Executive Summit for ISV & Application builders - January 2015
PDF
Executive Summit for ISV & Application builders - Internet of Things
PPTX
Executive Summit for ISV & Application builders - January 2015
PPTX
PPTX
cloud value for application development
PPTX
PPTX
Inside the Microsoft TechDays Belgium Apps
PPTX
PPTX
PPTX
Applied MVVM in Windows 8 apps: not your typical MVVM session!
PPTX
Building SPA’s (Single Page App) with Backbone.js
PPTX
Deep Dive and Best Practices for Windows Azure Storage Services
PPTX
Building data centric applications for web, desktop and mobile with Entity Fr...
Code in the Cloud - Ghent - 20 February 2015
Executive Summit for ISV & Application builders - January 2015
Executive Summit for ISV & Application builders - Internet of Things
Executive Summit for ISV & Application builders - January 2015
cloud value for application development
Inside the Microsoft TechDays Belgium Apps
Applied MVVM in Windows 8 apps: not your typical MVVM session!
Building SPA’s (Single Page App) with Backbone.js
Deep Dive and Best Practices for Windows Azure Storage Services
Building data centric applications for web, desktop and mobile with Entity Fr...

Recently uploaded (20)

PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PPTX
Tartificialntelligence_presentation.pptx
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
gpt5_lecture_notes_comprehensive_20250812015547.pdf
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Assigned Numbers - 2025 - Bluetooth® Document
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
A comparative analysis of optical character recognition models for extracting...
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PDF
Approach and Philosophy of On baking technology
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Accuracy of neural networks in brain wave diagnosis of schizophrenia
PPT
Teaching material agriculture food technology
PPTX
SOPHOS-XG Firewall Administrator PPT.pptx
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
Encapsulation theory and applications.pdf
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
“AI and Expert System Decision Support & Business Intelligence Systems”
Per capita expenditure prediction using model stacking based on satellite ima...
Tartificialntelligence_presentation.pptx
Unlocking AI with Model Context Protocol (MCP)
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Advanced methodologies resolving dimensionality complications for autism neur...
Assigned Numbers - 2025 - Bluetooth® Document
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
A comparative analysis of optical character recognition models for extracting...
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Approach and Philosophy of On baking technology
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Accuracy of neural networks in brain wave diagnosis of schizophrenia
Teaching material agriculture food technology
SOPHOS-XG Firewall Administrator PPT.pptx
Spectral efficient network and resource selection model in 5G networks
Encapsulation theory and applications.pdf
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...

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

  • 1. Single Page Applications for desktop, mobile, and tablet with ASP. NET MVC 4
  • 2. Single Page Applications * * and nothing fancy
  • 5. Great user Runs on experience any device (Advanced) Can work App-store offline deployable
  • 6. Visible UI Web UI HTML/CSS HTML/CSS/JS Data services JSON/XML Application layer Navigation JavaScript APIs Data access layer JavaScript Local storage Server Client
  • 8. 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 HTML5 Server Client
  • 9. 1 2 Data UI WebAPI + Upshot Knockout + Upshot 3 4 Mobile & Navigation Offline History.js Crazy magic
  • 10. 1 2 Data UI WebAPI + Upshot Knockout + Upshot 3 4 Mobile & Navigation Offline History.js Crazy magic
  • 11. WebAPI DbDataController DataSource Upshot Your app code ASP.NET MVC JavaScript WebAPI + Upshot
  • 12. 1 2 Data UI WebAPI + Upshot Knockout + Upshot 3 4 Mobile & Navigation Offline History.js Crazy magic
  • 13. View HTML ViewModel Upshot Model Knockout + Upshot
  • 14. myViewModel.searchText = ko.observable("Chickens"); <input data-bind="value: searchText" /> Knockout + Upshot
  • 15. 1 2 Data UI WebAPI + Upshot Knockout + Upshot 3 4 Mobile & Navigation Offline History.js Crazy magic
  • 16. 1 2 Data UI WebAPI + Upshot Knockout + Upshot 3 4 Mobile & Navigation Offline History.js Crazy magic
  • 17. Your client-side code Cache HTML/JS/CSS/Images Manifest Data services Offline-aware Provider DataSources JSON/XML Provider Upshot Local storage HTML5 Server Client HTML5 Application Cache and Local Data Store
  • 18. Single Page Applications and nothing fancy 1 2 Data UI WebAPI + Upshot Knockout + Upshot 3 4 Mobile & Navigation Offline History.js Crazy magic
  • 19. 1 Explore the samples DeliveryTracker, Upshot Scenarios - follow @StevenSanderson for a download link coming soon 2 Try the new MVC 4 Beta – this week! … including the Single Page Application scaffolder template 3 Enjoy http://learn.knockoutjs.com/ Interactive in-browser tutorials for Knockout.js and MVVM

Editor's Notes

  • #3: 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.
  • #19: 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.