Building Single Page Apps for desktop, mobile and tablet with ASP.NET MVC 4

Download this episode

Download Video

Description

So you want to build a highly-responsive, native-like application that runs in a regular browser, and a mobile touch device browser, and in some cases can even be packaged and sold on a mobile app store? And you want to do it using only familiar web development technologies, including ASP.NET MVC 4 and JavaScript? In this session, Steve will demonstrate how modern Single Page Application (SPA) architecture combines the best bits of web-like and desktop-like user experience, applying libraries such as Knockout.js and Upshot.js to streamline the development process.
For more information, check out these courses on Microsoft Virtual Academy:

Tag:

Web

Day:

1

Level:

200

Code:

2159

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      erik_

      Great session!

      Would love to see the sample code, because it looks like upshot.js is kinda undocumented at the moment.

      Where do we find the html helper for mvc?

    • User profile image
      ronaldh

      For me this was the best session at techdays.

      I'd like to be able to download the sample code as well (couldn't find it at Steven's blog)

    • User profile image
      williamve

      Great session, this is a must-see. 

      I found some example code on: http://code.msdn.microsoft.com/ASPNET-Single-Page-d6d7172c

    • User profile image
      Flynn0r

      Very awesome presentation.

    • User profile image
      Steve Sanderson

      Downloadable code coming soon!

      Please bear with us for a few days as we're working furiously to get an Upshot/SPA update out via NuGet. As soon as that is done, I'll be able to post a link to the DeliveryTracker sample and it will work on your machines too :)

      We're also setting up an Upshot/SPA website where we'll put more docs and samples.

      Thanks for the positive comments BTW :)

    • User profile image
      Brianweet

      Thanks Steve, awesome presentation at techdays!

      Waiting for the code sample Smiley

    • User profile image
      Johan Dorssers

      From the first till the last word I was focussed. No minute spoiled.
      Thank you very much Steve it was realy helpfull.
      Can't decide which presentation was better tho...this one or 'C#5, ASP.NET MVC 4, and asynchronous Web applications' :)
      BTW, when does this vid come up on channel 9 Steve...
      Looking forward for the code sample

    • User profile image
      JanAB

      Awesome presentation material :-D
      Btw, what's the name of the source control system Steve is using?

    • User profile image
      Knut Marius

      Awesome presentation!

      JanAB, He was using Mercurial: http://mercurial.selenic.com/

    • User profile image
      Eugene

      Indeed an awesome presentation! I was wondering, what tool or feature did you use to copy your code snippets during your presentation?

    • User profile image
      Tugberk

      Steve,

      You and Scott Hanselman are two of the best speakers I have ever listened. Very nice session and every second of it was worth watching. Thanks!

    • User profile image
      BertVan​Kammen

      This was a great session.

      Flawless presentation and good speed discussing topics. Got me on the edge of my seat.

       

    • User profile image
      Eugene

      I just found out that you can drag code in the toolbar... :)

    • User profile image
      Egbert Nierop

      If you run Install-Package Upshot
      it delivers you knockout.js etc. but the sample that Steve runs, e.g. returns XML as a format, instead of Json. So, it looks like something seriously has changed in the current MVC runtime.

    • User profile image
      WdK

      Nice presentation! 

      When switching to Mobile, Steve hits a button in his browser that switches to iPhone. Is that a plugin in or something? 

      I also have to say, that although I really like the speed and simplicity of building a mobile App this way I'm a little bit of afraid of testing such an app when it gets bigger. There is almost no server code so things like Unit Testing will be hard. Can we use some javascript unit testing framework for this? 

      Thanks!

    • User profile image
      Stuart

      This presentation has me excited about web dev again, this is some top notch tooling to get us writing some really cool stuff. All presenters for MS should be British from now on, except ScottGu and Hanselman ;-)

    • User profile image
      BrianJimdar

      Oh man Steve! This is so beautiful. 

      Silverlight was great, but is probably over for must of *my* future projects. Html/Javascript seemed like such a mess. I feel like you just showed us the way forward. At one point in the presentation I discovered. I was weeping for joy. Windows web programming is back on the map.

      @WdK: No problem, start here: http://www.bing.com/search?q=unit+test+javascript 

    • User profile image
      Vin

      Steve,

      An incredible presentation, covering a variety of important topics, clear instructions, smooth flow and a great looking demo app at the end. After knockout, now I am digging upshot.js.

      Thanks a ton!
      Waiting for the sample code,
      Vin @vinayakkamat

    • User profile image
      benjoyce

      Does anyone know how Steve seeded his data in the demo?  It was hidden from view (at position 18m15s).

    • User profile image
      Irfan Shaikh

      Lots of Data access features shown are already in the Silverlight Rich Internet application (RIA), which I felt is very easier than SPA. If Microsoft put some efforts on releasing Silverlight plug-in for Android and iOS and some new Mobile Industry features like app store, local storage. Actually make development very easy.

      But I must say awesome presentation by Steve.

      Thanks,
      -IS

    • User profile image
      Deactivated User

      Comment removed at user's request.

    • User profile image
      Arthur

      Hi,
      Could anybody help me find which extension is for Chrome is used in this presentation to emulate other browsers at 47:57?
      This looks like a very useful feature.

      Thank you

    • User profile image
      mjepson

      When / where will the sample code used in this presentation be released?

    • User profile image
      ozhug

      thanks steve great presentation

    • User profile image
      mjepson

      After I add the TasksController, I get problems involving my connection to my SQL server. We have a development SQL server here, and I have updated the connectionstring in the web.config.

      Now how do I get it to create my database? In the demo it seems the database is magically created somehow, but when I run my solution and navigate to /tasks, I get an exception:

      A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: SQL Network Interfaces, error: 26 - Error Locating Server/Instance Specified)


      In my code I also get a debugger breaking on the javascript line:

      upshot.metadata(@(Html.Metadata<MvcApplication1.Controllers.MvcApplication1Controller>()));

      Any help is much appreciated!

    • User profile image
      delaci

      This is one of the best sessions I've watched. Was impressed by the other presentation of Steve's regarding knockout.js. Got excited when I saw ScottGu's presentation on Mvc 4. This is the icing on the cake. Very powerful stuff and very well presented.

    • User profile image
      box101

      @Steve: Any update about the used source code in the TechDays presentation?
      It was an awesome presentation with a nice demo app indeed and I just want to go through it again.

    • User profile image
      Jaikishan Jalan

      Super cool video. Feels like lot to learn with so many new libraries.

    • User profile image
      stevepresley

      @Arthur: I'm pretty sure it is "User-Agent Switcher for Chrome", it looks very similar to the one he demoed this week at the MVP Summit.

    • User profile image
      Steve Sanderson

      The source code for the DeliveryTracker app is now available - for details, see http://blog.stevensanderson.com/2012/03/06/single-page-application-packages-and-samples

    • User profile image
      Sagy

      @mjepson:If you haven't resolved it yet...

      It seems EF + CF are ignoring te connections string inside web.config and are using SQL Express by default, unless specified otherwise, so... specify otherwise:

      Inside the context class (where you would normally have all the DbSet<EntityName>) add a constructor with a line similar to this:

      this.Database.Connection.ConnectionString = "Data Source=localhost;Initial Catalog=name-of-your-db;Integrated Security=true";

      Hope it helps - it took me a couple of hours to solve it.

       

       
      Generic Comment Image
    • User profile image
      johnstaveley

      superb and inspirational! Well done, this is where I'd like to take my development in the next few years!

    • User profile image
      Dilish Velayudhan

      Awesome Steve..! Became a fan after reading your books, you showed how validation needs to be implemented by creating a validation framework (MVC 1.0) and got adapted by later MVC frameworks, then Knock out, now SPA
      Really feel proud to be a Microsoft Web Developer..
      Gr8..!!

    • User profile image
      StefH

      Hi Steve,

      It seems that the DbDataController only supports EntityFrameWork entities, this means that my model entities should be real Entities.

      It's not possible to use ViewModels anymore. So my question is : what's the design concerning ViewModels when using this new Upshot.js to access the DbDataController ?

      I've also posted a question on StackOverflow, maybe you can take a look and shed some light on this issue.

      Thanks !

       

       

    • User profile image
      Adam Downs

      Hello Steve,

      Is there a release date planned for the offline data stores?

      Also is there any documentation available for Upshot?

    • User profile image
      Qorbani

      AWESOME! Thanks Steve for this great session. 

    • User profile image
      Patrick MA

      I've been waiting for something like this , absolutely awesome. Steve Sanderson is a legend! :)

    • User profile image
      Carlos

      AMAZING session, best one I've seen in years. Incredibly accurate, well prepared and explained. I had to replay your "generic touching device" joke a few times. ;)

      Besides, the technology presented is brilliant too!

    • User profile image
      mrrdr

      Great Video. Super fast explanation of so many different items in such a short time, seems like the video is only 5 minutes long. I take it as a reference now for every project I start using the same set of techniques. Definitely a reference for client side apps even if the back end is not Microsoft based. Steve, we all Microsoft developers have to appreciate your geniality.

    • User profile image
      Stephen

      Thanks for making the source code available.

    • User profile image
      Stephen

      Thanks for this. It works great. Unfortunately, the first modification I made was to add a date field to the model. This causes the entire project to come to a crashing halt because of what appears to be a conflict between the json.net and upshot.js libraries. Any idea on when this will be fixed or when a workaround will be available? Thanks.

    • User profile image
      John Billingsly

      Hi Stephen,, how are Single Page Apps and WCF RIA Services and the support it is creating for non-Silverlight client with RIA/JS related?

      Thanks,

    • User profile image
      John Billinglsly

      Sorry, meant Steve above...

    • User profile image
      Pitts

      excellent presentation.... 

      Thanks

    • User profile image
      Paulo Ortins

      Awesome Steve, i will start a project now !

    • User profile image
      HockeyJ

      Brilliant technology, excellently presented. Nice work.

    • User profile image
      Aleksandar

      Please if anyone know which Google chrome extension is use for mobile phone emulating in this awesome video.

    • User profile image
      Tahr

      Good to see Microsoft working in this direction.

    • User profile image
      DL123

      Can someone clarify Steve mentions that you can install SPA using phonegap to a mobile phone. However, I see that SPA can be built with either static html pages or views or both. It is true that we can only install the static html pages and not the views? will phonegap acceot views? Thanks

    • User profile image
      dl123

      Can someone clarify Steve mentions that you can install SPA using phonegap to a mobile phone. However, I see that SPA can be built with either static html pages or views or both. It is true that we can only install the static html pages and not the views? will phonegap acceot views? Thanks

    • User profile image
      mj0624

      I do not see why anyone thinks this is great. It is a return to notepad development! I would never want a piece of java script acting as a view model, there was not a single bit of intellisense confirming that the object model is correctly bound, and the UI is directly bound to the implementation of the database. This isn't a return to "great web development" but a return to the horrid web development prior to WCF, XAML, and true MVVM implementations with C# classes behind the UI.

    • User profile image
      Hakan

      Awesome presentation, one of the best I've ever seen.
      Where do we set WebApi url in upshot. We set datasource here:
      @(Html.UpshotContext(bufferChanges: true).DataSource<DataServiceController>(x => x.GetDeliveriesForToday()))

      But, no idea how to set source url for different environment?

    • User profile image
      AlexSkachkov

      @dl123:

      PhoneGap use WebView/UIWebView of Android/iOS for render page. WebView in PhoneGap can work only with html pages which are packed to the app. 

    • User profile image
      statichtmla​ndstoredpro​cs

      I've been using static HTML with JQuery and stored procs for years. All you need to do is pass XML through a .ashx file to a database, get back a Dataset as a JSON object. It only takes about 100 lines of C# code, the rest is Javascript on the front and SQL on the back. You don't need EF, ORM, LINQ, or anything else in the middle if you know how to pass XML/JSON, and put business rules in stored procs...SQL developers love it, those with little or no SQL skills hate it and prefer to put all of their code in big middle tiers that won't work on mobile devices like PhoneGap. You don't need MVC once you know Javascript UI development, which you have to know in order to develop for mobile devices anyway. C#/Java/PHP UI code will soon be a thing of the past, I predict.

    • User profile image
      DangerMoose

      Warning: This video will get you very excited, you may think yes this is how will write my next online/offline mobile app.

      If you do then prepare to cry, as you will then boot up VS2012 and find that the SPA project template has been removed. Oh Microsoft you do like to torture us poor devs.

      Can anyone give me some pointers to another tutorial which shows a way to achive the same results without using the SPA template?

      Thanks

    • User profile image
      Belkin

      @DangerMoose: well SPA its not some thing what you can not use without template. 

      Go ahead install upshot.js from NUget, install knockout and start with your application.

      Also if you watch presentation he mentions that its SPA is part of Asp.net MVC 4 did you installed it?

    • User profile image
      DangerMoose

      Thanks @Belkin, I will start learning upshot & knockout and hope the SPA template returns soon.

      Yes I have MVC 4 as that came with VS2012

    • User profile image
      Oran

      Hi Steve,

      Thanks for the presentation. Really exciting stuff

      I'm currently designing a new application using EF but I have an extra abstraction layer above the EF code (to cater for more complex database scenarios other than simple CRUD) which means that the layer exposed to my web api isn't a DataController but just a normal class library.

      Is there any way to get upshot work in this case or do I have to get rid of this extra layer of abstraction?

      Thanks
      Oran

    • User profile image
      Preilly

      Hi would love to build this app but do not have sql express, will it work with sql server 2008??
      Thanks for help!!

    • User profile image
      JulioNobre

      Hi Steve!

      Just to let you know that I think this indeed a dense and, most of all, awesome presentation.

      You really did a great job. Well done. Smiley

       

       

       

    • User profile image
      Ravindar Reddy

      awesome presentation.

    • User profile image
      Srini

      In VS 2012 SPA is under Visual F# | ASPNET with the name "F# and C# Web Application (ASP.NET MVC 4)". Or click online tab and search for SPA/Single page.

    • User profile image
      val

      Great presentation! It was clear and to the point. However, I've had no success (after over a week of failed attempts) with getting this up and running. The VS2010/Nugget setup is BUGGY AS HELL! There is no greater let down than getting amazed by sweet ASP.NET/MVC4/HTML5/Offline goodness only to realize later on that IT'S NOT READY YET!

    • User profile image
      Gaja Kannan

      Such a shame!!!  Channel9 videos don't run on Windows RT/Surface RT.  I am getting an message that it requires Silverlight installed because browser doesn't support h264 mp4 html5 natively.  Come on guys really!!!

    • User profile image
      gduncan411

      @Gaja Kannan:Check your Format, you might be forcing Silverlight (aka smooth andor progressive), click on the "Format" button under the video to see.

      Set it to auto or HTML5 and try again. The videos work fine in Surface RT (and IE on Xbox, etc)

    • User profile image
      Tarabass

      @SteveThank you for pointing me this way. Love the approach to create webapplications this way. I'm always looking forward to see your sessions!

      @Sagy

      You are my hero too! Creating the constructor with the connection string solved my problems!

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.