Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

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

Download

Right click “Save as…”

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:

Follow the Discussion

  • erikerik_ Whooops!

    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?

  • 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)

  • Great session, this is a must-see. 

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

  • Michael A. VolzFlynn0r Passionate about code

    Very awesome presentation.

  • Steve SandersonSteve 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 :)

  • Thanks Steve, awesome presentation at techdays!

    Waiting for the code sample Smiley

  • Johan DorssersJohan 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

  • JanABJanAB

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

  • Knut MariusKnut Marius

    Awesome presentation!

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

  • EugeneEugene

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

  • 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!

  • This was a great session.

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

     

  • EugeneEugene

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

  • Egbert NieropEgbert 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.

  • WdKWdK

    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!

  • StuartStuart

    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 ;-)

  • Brian JimdarBrianJimdar Seattle Area developer

    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 

  • VinVin

    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

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

  • Irfan ShaikhIrfan 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

  • Shashi PenumarthySpace_Cow I like cows

    Wow incredible presentation. So much stuff packed into such little time.

    Maintainability is going to be an issue with this I think, especially if you have a few inexperienced devs on the team. Keeping all that js clean without intellisense (in knockout, for example) is going to be a challenge.

  • ArthurArthur

    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

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

  • thanks steve great presentation

  • 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!

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

  • box101box101

    @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.

  • Jaikishan JalanJaikishan Jalan

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

  • @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.

  • Steve SandersonSteve 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

  • @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.

     

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

  • Dilish VelayudhanDilish 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..!!

  • 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 !

     

     

  • Adam DownsAdam Downs

    Hello Steve,

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

    Also is there any documentation available for Upshot?

  • AWESOME! Thanks Steve for this great session. 

  • Patrick MAPatrick MA

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

  • CarlosCarlos

    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!

  • mrrdrmrrdr

    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.

  • StephenStephen

    Thanks for making the source code available.

  • StephenStephen

    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.

  • John BillingslyJohn 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,

  • John BillinglslyJohn Billinglsly

    Sorry, meant Steve above...

  • excellent presentation.... 

    Thanks

  • Paulo OrtinsPaulo Ortins

    Awesome Steve, i will start a project now !

  • Brilliant technology, excellently presented. Nice work.

  • AleksandarAleksandar

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

  • Good to see Microsoft working in this direction.

  • DL123DL123

    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

  • 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

  • mj0624mj0624

    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.

  • HakanHakan

    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?

  • @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. 

  • statichtmlandstoredprocsstatichtmla​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.

  • 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

  • @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?

  • 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

  • OranOran

    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

  • PreillyPreilly

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

  • 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

     

     

     

  • Ravindar ReddyRavindar Reddy

    awesome presentation.

  • SriniSrini

    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.

  • valval

    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!

  • 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!!!

  • Greg Duncangduncan411 It's amazing what a professional photographer can do...

    @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)

  • @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!

Remove this comment

Remove this thread

close

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.