SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Single Page
Applications
for desktop, mobile, and tablet
with ASP. NET MVC 4
Single Page Applications


                           *
               * and nothing fancy
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
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

Weitere ähnliche Inhalte

Was ist angesagt?

ASP.NET MVC and ajax
ASP.NET MVC and ajax ASP.NET MVC and ajax
ASP.NET MVC and ajax Brij Mishra
 
Web Components Everywhere
Web Components EverywhereWeb Components Everywhere
Web Components EverywhereIlia Idakiev
 
PLAT-8 Spring Web Scripts and Spring Surf
PLAT-8 Spring Web Scripts and Spring SurfPLAT-8 Spring Web Scripts and Spring Surf
PLAT-8 Spring Web Scripts and Spring SurfAlfresco Software
 
Building RESTful applications using Spring MVC
Building RESTful applications using Spring MVCBuilding RESTful applications using Spring MVC
Building RESTful applications using Spring MVCIndicThreads
 
CQ Provisionning & Authoring
CQ Provisionning & AuthoringCQ Provisionning & Authoring
CQ Provisionning & AuthoringGabriel Walt
 
Webservices: connecting Joomla! with other programs.
Webservices: connecting Joomla! with other programs.Webservices: connecting Joomla! with other programs.
Webservices: connecting Joomla! with other programs.Herman Peeren
 
New Features of ASP.NET 4.0
New Features of ASP.NET 4.0New Features of ASP.NET 4.0
New Features of ASP.NET 4.0Buu Nguyen
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - IntroductionWebStackAcademy
 
Jasig Rubyon Rails
Jasig Rubyon RailsJasig Rubyon Rails
Jasig Rubyon RailsPaul Pajo
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideMark Rackley
 
Introduction to angular js july 6th 2014
Introduction to angular js   july 6th 2014Introduction to angular js   july 6th 2014
Introduction to angular js july 6th 2014Simona Clapan
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introductioncherukumilli2
 
Dynamic content generation
Dynamic content generationDynamic content generation
Dynamic content generationEleonora Ciceri
 
SharePoint 2013 Client Side Rendering
SharePoint 2013 Client Side RenderingSharePoint 2013 Client Side Rendering
SharePoint 2013 Client Side RenderingBill Wolff
 

Was ist angesagt? (20)

jQuery
jQueryjQuery
jQuery
 
ASP.NET MVC and ajax
ASP.NET MVC and ajax ASP.NET MVC and ajax
ASP.NET MVC and ajax
 
Spring MVC
Spring MVCSpring MVC
Spring MVC
 
Web Components Everywhere
Web Components EverywhereWeb Components Everywhere
Web Components Everywhere
 
PLAT-8 Spring Web Scripts and Spring Surf
PLAT-8 Spring Web Scripts and Spring SurfPLAT-8 Spring Web Scripts and Spring Surf
PLAT-8 Spring Web Scripts and Spring Surf
 
Building RESTful applications using Spring MVC
Building RESTful applications using Spring MVCBuilding RESTful applications using Spring MVC
Building RESTful applications using Spring MVC
 
Jqueryppt (1)
Jqueryppt (1)Jqueryppt (1)
Jqueryppt (1)
 
CQ Provisionning & Authoring
CQ Provisionning & AuthoringCQ Provisionning & Authoring
CQ Provisionning & Authoring
 
Webservices: connecting Joomla! with other programs.
Webservices: connecting Joomla! with other programs.Webservices: connecting Joomla! with other programs.
Webservices: connecting Joomla! with other programs.
 
New Features of ASP.NET 4.0
New Features of ASP.NET 4.0New Features of ASP.NET 4.0
New Features of ASP.NET 4.0
 
Mvc3 crash
Mvc3 crashMvc3 crash
Mvc3 crash
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
 
Jasig Rubyon Rails
Jasig Rubyon RailsJasig Rubyon Rails
Jasig Rubyon Rails
 
SPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuideSPSNH 2014 - The SharePoint & jQueryGuide
SPSNH 2014 - The SharePoint & jQueryGuide
 
J query resh
J query reshJ query resh
J query resh
 
Introduction to angular js july 6th 2014
Introduction to angular js   july 6th 2014Introduction to angular js   july 6th 2014
Introduction to angular js july 6th 2014
 
ASP .NET MVC - best practices
ASP .NET MVC - best practicesASP .NET MVC - best practices
ASP .NET MVC - best practices
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introduction
 
Dynamic content generation
Dynamic content generationDynamic content generation
Dynamic content generation
 
SharePoint 2013 Client Side Rendering
SharePoint 2013 Client Side RenderingSharePoint 2013 Client Side Rendering
SharePoint 2013 Client Side Rendering
 

Andere mochten auch

Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...Dan Wahlin
 
Development Trends - What's New in the World of Web Development
Development Trends - What's New in the World of Web DevelopmentDevelopment Trends - What's New in the World of Web Development
Development Trends - What's New in the World of Web DevelopmentDan Wahlin
 
ASP.Net MVC 4 [Part - 2]
ASP.Net MVC 4 [Part - 2]ASP.Net MVC 4 [Part - 2]
ASP.Net MVC 4 [Part - 2]Mohamed Abdeen
 
Entity Framework Overview
Entity Framework OverviewEntity Framework Overview
Entity Framework OverviewEric Nelson
 
Asp.Net MVC Framework Design Pattern
Asp.Net MVC Framework Design PatternAsp.Net MVC Framework Design Pattern
Asp.Net MVC Framework Design Patternmaddinapudi
 
ASP.NET Mvc 4 web api
ASP.NET Mvc 4 web apiASP.NET Mvc 4 web api
ASP.NET Mvc 4 web apiTiago Knoch
 
Learning ASP.NET 5 and MVC 6
Learning ASP.NET 5 and MVC 6Learning ASP.NET 5 and MVC 6
Learning ASP.NET 5 and MVC 6Ido Flatow
 
Latest Trends in Web Technologies
Latest Trends in Web TechnologiesLatest Trends in Web Technologies
Latest Trends in Web Technologiesbryanbibat
 
Mobile First: How To Approach Mobile Testing!
Mobile First: How To Approach Mobile Testing!Mobile First: How To Approach Mobile Testing!
Mobile First: How To Approach Mobile Testing!Usersnap
 
Web API or WCF - An Architectural Comparison
Web API or WCF - An Architectural ComparisonWeb API or WCF - An Architectural Comparison
Web API or WCF - An Architectural ComparisonAdnan Masood
 

Andere mochten auch (13)

Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
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
Development Trends - What's New in the World of Web DevelopmentDevelopment Trends - What's New in the World of Web Development
Development Trends - What's New in the World of Web Development
 
ASP.Net MVC 4 [Part - 2]
ASP.Net MVC 4 [Part - 2]ASP.Net MVC 4 [Part - 2]
ASP.Net MVC 4 [Part - 2]
 
Deep dive into new ASP.NET MVC 4 Features
Deep dive into new ASP.NET MVC 4 Features Deep dive into new ASP.NET MVC 4 Features
Deep dive into new ASP.NET MVC 4 Features
 
Entity Framework Overview
Entity Framework OverviewEntity Framework Overview
Entity Framework Overview
 
Asp.Net MVC Framework Design Pattern
Asp.Net MVC Framework Design PatternAsp.Net MVC Framework Design Pattern
Asp.Net MVC Framework Design Pattern
 
ASP.NET MVC 3
ASP.NET MVC 3ASP.NET MVC 3
ASP.NET MVC 3
 
ASP.NET Mvc 4 web api
ASP.NET Mvc 4 web apiASP.NET Mvc 4 web api
ASP.NET Mvc 4 web api
 
Learning ASP.NET 5 and MVC 6
Learning ASP.NET 5 and MVC 6Learning ASP.NET 5 and MVC 6
Learning ASP.NET 5 and MVC 6
 
Asp.Net MVC Intro
Asp.Net MVC IntroAsp.Net MVC Intro
Asp.Net MVC Intro
 
Latest Trends in Web Technologies
Latest Trends in Web TechnologiesLatest Trends in Web Technologies
Latest Trends in Web Technologies
 
Mobile First: How To Approach Mobile Testing!
Mobile First: How To Approach Mobile Testing!Mobile First: How To Approach Mobile Testing!
Mobile First: How To Approach Mobile Testing!
 
Web API or WCF - An Architectural Comparison
Web API or WCF - An Architectural ComparisonWeb API or WCF - An Architectural Comparison
Web API or WCF - An Architectural Comparison
 

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

Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)
Next Generation Web Attacks – HTML 5, DOM(L3) and XHR(L2)Shreeraj Shah
 
Cross platform mobile web apps
Cross platform mobile web appsCross platform mobile web apps
Cross platform mobile web appsJames Pearce
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1James Pearce
 
HTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものHTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものMicrosoft
 
Shreeraj - Hacking Web 2 0 - ClubHack2007
Shreeraj - Hacking Web 2 0 - ClubHack2007Shreeraj - Hacking Web 2 0 - ClubHack2007
Shreeraj - Hacking Web 2 0 - ClubHack2007ClubHack
 
Mike Taulty MIX10 Silverlight 4 Patterns Frameworks
Mike Taulty MIX10 Silverlight 4 Patterns FrameworksMike Taulty MIX10 Silverlight 4 Patterns Frameworks
Mike Taulty MIX10 Silverlight 4 Patterns Frameworksukdpe
 
The web as it should be
The web as it should beThe web as it should be
The web as it should bethebeebs
 
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionJames Pearce
 
An Intro to Mobile HTML5
An Intro to Mobile HTML5An Intro to Mobile HTML5
An Intro to Mobile HTML5James Pearce
 
Rishabh Technology and Tools Overview (1)
Rishabh Technology and Tools Overview (1)Rishabh Technology and Tools Overview (1)
Rishabh Technology and Tools Overview (1)D Trivedi
 
Single page applications mit asp.net mvc und der asp.net web api
Single page applications mit asp.net mvc und der asp.net web apiSingle page applications mit asp.net mvc und der asp.net web api
Single page applications mit asp.net mvc und der asp.net web apiAlexander Zeitler
 
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsBuilding Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsJames Pearce
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsJames Pearce
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 
Evaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devicesEvaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devicesMario Gonzalez
 
Social Photos - My presentation at Microsoft Tech Day
Social Photos - My presentation at Microsoft Tech DaySocial Photos - My presentation at Microsoft Tech Day
Social Photos - My presentation at Microsoft Tech DayTechMaster Vietnam
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An OverviewNagendra Um
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User ExperienceMahbubur Rahman
 
Evaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devicesEvaluation and prototyping of an HTML5 Client for iOS devices
Evaluation and prototyping of an HTML5 Client for iOS devicesMario Gonzalez
 

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

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

Mehr von Microsoft Developer Network (MSDN) - Belgium and Luxembourg

Mehr von Microsoft Developer Network (MSDN) - Belgium and Luxembourg (20)

Code in the Cloud - Ghent - 20 February 2015
Code in the Cloud - Ghent - 20 February 2015Code in the Cloud - Ghent - 20 February 2015
Code in the Cloud - Ghent - 20 February 2015
 
Executive Summit for ISV & Application builders - January 2015
Executive Summit for ISV & Application builders - January 2015Executive Summit for ISV & Application builders - January 2015
Executive Summit for ISV & Application builders - January 2015
 
Executive Summit for ISV & Application builders - Internet of Things
Executive Summit for ISV & Application builders - Internet of ThingsExecutive Summit for ISV & Application builders - Internet of Things
Executive Summit for ISV & Application builders - Internet of Things
 
Executive Summit for ISV & Application builders - January 2015
Executive Summit for ISV & Application builders - January 2015Executive Summit for ISV & Application builders - January 2015
Executive Summit for ISV & Application builders - January 2015
 
Code in the Cloud - December 8th 2014
Code in the Cloud - December 8th 2014Code in the Cloud - December 8th 2014
Code in the Cloud - December 8th 2014
 
Adam azure presentation
Adam   azure presentationAdam   azure presentation
Adam azure presentation
 
release management
release managementrelease management
release management
 
cloud value for application development
cloud value for application developmentcloud value for application development
cloud value for application development
 
Modern lifecycle management practices
Modern lifecycle management practicesModern lifecycle management practices
Modern lifecycle management practices
 
Belgian visual studio launch 2013
Belgian visual studio launch 2013Belgian visual studio launch 2013
Belgian visual studio launch 2013
 
Windows Azure Virtually Speaking
Windows Azure Virtually SpeakingWindows Azure Virtually Speaking
Windows Azure Virtually Speaking
 
Inside the Microsoft TechDays Belgium Apps
Inside the Microsoft TechDays Belgium AppsInside the Microsoft TechDays Belgium Apps
Inside the Microsoft TechDays Belgium Apps
 
TechDays 2013 Developer Keynote
TechDays 2013 Developer KeynoteTechDays 2013 Developer Keynote
TechDays 2013 Developer Keynote
 
Windows Phone 8 Security Deep Dive
Windows Phone 8 Security Deep DiveWindows Phone 8 Security Deep Dive
Windows Phone 8 Security Deep Dive
 
Deep Dive into Entity Framework 6.0
Deep Dive into Entity Framework 6.0Deep Dive into Entity Framework 6.0
Deep Dive into Entity Framework 6.0
 
Applied MVVM in Windows 8 apps: not your typical MVVM session!
Applied MVVM in Windows 8 apps: not your typical MVVM session!Applied MVVM in Windows 8 apps: not your typical MVVM session!
Applied MVVM in Windows 8 apps: not your typical MVVM session!
 
Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js
 
Deep Dive and Best Practices for Windows Azure Storage Services
Deep Dive and Best Practices for Windows Azure Storage ServicesDeep Dive and Best Practices for Windows Azure Storage Services
Deep Dive and Best Practices for Windows Azure Storage Services
 
Building data centric applications for web, desktop and mobile with Entity Fr...
Building data centric applications for web, desktop and mobile with Entity Fr...Building data centric applications for web, desktop and mobile with Entity Fr...
Building data centric applications for web, desktop and mobile with Entity Fr...
 
Bart De Smet Unplugged
Bart De Smet UnpluggedBart De Smet Unplugged
Bart De Smet Unplugged
 

Kürzlich hochgeladen

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGSujit Pal
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 

Kürzlich hochgeladen (20)

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAG
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 

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
  • 3.
  • 4.
  • 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
  • 7.
  • 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

Hinweis der Redaktion

  1. 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.
  2. 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.