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

Sign in to queue

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

Download

Download this episode

For more information, check out these courses on Microsoft Virtual Academy:

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!

Add Your 2 Cents