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

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
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
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
 
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 Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
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
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
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
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 

Kürzlich hochgeladen (20)

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
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
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
 
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 Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
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
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 

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.