Building Web Apps with ASP.NET Jump Start - Over 6 hours of free ASP.NET video training

Last Friday Microsoft Learning hosted Scott Hansleman, Damian Edwards and me for a full day live video Jump Start event titled Building Web Apps with ASP.NET. We had a nice crowd of about 2,300 attendees joining us during the event - but we were really excited about ending up with a full day of top quality training on ASP.NET 4.5, ASP.NET MVC 4, ASP.NET Web API, SignalR, and Visual Studio - all updated for the ASP.NET and Web Tools 2012.2 release. The Microsoft Learning team has a great studio, event platform, and team, and I think the videos turned out great.

Thanks

This wouldn't have been possible without the heroic efforts of both Scott Hanselman and Damian Edwards. Scott hadn't been feeling well earlier that week, but presented an entire day of training immediately after a full week at the MVP Summit. Damian wasn't originally scheduled for this, but he was free that day and jumped right in - originally Scott and I invited him just to do the SignalR talk, but when we found he was available the whole day we asked him to help on a bunch of other sessions.

Thanks also to the whole Microsoft Learning team, especially Frank Gartland for setting this up. The Microsoft Virtual Academy puts out a lot of great content, including full courses which help you keep up with new releases (and prepare for certification exams if you're interested).

Content and Sample Code

This content was based on the courseware I just helped update for our current Web Camps tour. A lot of the demos are available in the Web Camps Training Kit, available here. We've got a bunch of free, one day Web Camp events going on over the next few months - with several more being added as we finalize dates and locations.

Videos

All nine sessions (over six hours) are up on Channel 9 - you can watch them online (HTML5 video or Silverlight) or download them in a bunch of MP4 or WMV formats. I've got them embedded below, too.

(01) What's New in ASP.NET 4.5

Sections:

[02:51] - Web development overview

This session starts by overviewing what we're going to cover in the series. The only way I can keep up with all the new releases the ASP.NET and Web Tools teams keep cranking out is to work out a mental map of how it all fits together. For the purpose of this day, we broke things into foundations and scenarios. The foundations include One ASP.NET (including ASP.NET Web Forms, ASP.NET MVC, ASP.NET Web API, and SignalR), Visual Studio, NuGet, and Azure - specifically Windows Azure Web Sites). After covering those tools, we look at using using them in some modern web development scenarios, such as social web applications, mobile web development, etc.

[10:48] - ASP.NET Web Forms model binding

ASP.NET 4.5 includes what I consider the biggest, most fundamental and transformative change to Web Forms since it was first released - model binding. I would have loved to have this years ago, and if you're doing ASP.NET Web Forms and not taking advantage of the new data control features, I really think you're both working too hard and writing lower quality code than you should be. The ASP.NET and Web Tools 2012.2 release includes Friendly URLs support, which gives you the full benefits of URL routing - both cleaner URLs and binding of URL values to control data access methods. My demo shows using the models from the MVC Music Store tutorial in an ASP.NET Web Forms application; it's available in the Web Camps Training Kit.

[20:27] - Bundling and Optimization

Bundling and Optimization is built in to ASP.NET 4.5, so it works across the platform. Scott shows a great example demonstrating bundling and optimization extensibility with both CoffeeScript and LESS minification.

[39:53] - Page inspector

The Visual Studio 2012 Page Inspector lets you interact with the output of your web pages inside of Visual Studio. It's conceptually similar to browser dev tools, but since it's integrated to your source it can give you a lot better information and feedback, answering questions like "Which view / partial view / user control / etc. is actually generating this HTML?" I demo'd the basic features, then showed the new live update feature in the ASP.NET and Web Tools 2012.2 release.

[43:58] - Async

ASP.NET 4.5 includes support for Async just about everywhere, including ASP.NET Web Forms, ASP.NET MVC controllers, etc. Scott shows a nice, simple example in which he changes three synchronous operations to run in parallel in an ASP.NET Web Form.

(02) Building and Deploying Websites with ASP.NET MVC 4

Okay, this one was fun up until my demo fail cliff hanger right at the end. I started with File / New Project, built out a simple ASP.NET MVC site, and deployed it to Windows Azure Web Sites.

[01:26] - Intro to ASP.NET MVC

No ASP.NET MVC talk is compete without a few diagrams, so I start with a review of the how ASP.NET MVC works, complete with some fancy animated diagrams.

[03:58] - Creating a new ASP.NET MVC site

In this part of the talk, I show the different ASP.NET MVC project template, tour through the folder structure, show how routing works, explain the standard conventions used in ASP.NET MVC, and show how the controllers and views work together.

[15:19] - Adding a model, controller, view

This part of the presentation shows how to work with data in an ASP.NET MVC application using models and scaffolding, with data backed by Entity Framework Code First. I set up Entity Framework Code First Migrations to keep changes to my data model synchronized with my database over time.

[34:57] - Deploying to Windows Azure Web Sites

With a complete, working application, it's time to deploy. To the cloud! Well, kind of. I was aware that if people are accessing your URL during a first deployment it can cause problems, but I'd never seen it in practice. Someone F5 bombed me and the deploy failed, which, was corrected by redeploying an unchanged web.config file to refresh the site. But, the cool part is that we built and deployed a site - complete with database and migrations - in under an hour. One of our attendees was so inspired that he created another site to encourage Scott to survive the day: http://scottwillpullthrough.azurewebsites.net/

(03) Creating HTML5 Applications with jQuery

[02:31] - Introduction to HTML5

Scott and Damian explain what HTML5 is, and what it means to you as a web developer, including an overview of modern web development features like responsive design.

[13:13] - HTML5 markup

Scott and Damian show how HTML5 semantic tags are included in ASP.NET MVC 4 and ASP.NET Web Forms 4.5 templates and explain why they're useful. They explain why feature detection is preferable to useragent sniffing and show how Modernizr makes doing the right thing easy.

[27:06] - jQuery overview

Scott and Damian show why everyone's using jQuery and overview the basics. Damian showed off a simple demo I put together that's up on jsbin: http://jsbin.com/ijucaq/2/edit (play along at home!)

[48:04] - Visual Studio web tools

Scott shows off a bunch of great new web development features in Visual Studio 2012 (including the 2012.2 updates and the Web Essentials extension) with some cool examples like HTML5 form elements and the new Single Page Application templates.

(04) Building a Service Layer with ASP.NET Web API

This is a whirlwind tour of ASP.NET Web API, including some new features in 2012.2 (Help Pages, Tracing, and OData).

[01:32] - Introduction to Web API

We start by looking at the File / New Project experience for the Web API template, covering Help Pages and Tracing.

[14:40] - Consuming Web API from jQuery

This sample showed using jQuery and the OData query syntax to page through server-side data.

[20:44] - Consuming Web API from Windows 8

One of the key reasons for using ASP.NET Web API is that you're able to work with any client type that can "speak HTTP" - including mobile and desktop applications. In this sample, I demonstrated a Windows Store application that was calling back into an ASP.NET Web API service.

(05) Leveraging Your ASP.NET Development Skills to Build Office Apps

You might not have heard that you can write Apps for Office using web technologies like HTML5, jQuery, and ASP.NET. It's really pretty slick. I thought it was so cool, I squeezed in a quick 15 minute talk to show it off.

[01:25] - HTML5 and jQuery for Office 2013

I start by showing a simple Hello World example, using jQuery to read and write Excel data into a task pane. Note: my demos require the Microsoft Office Developer Tools for Visual Studio 2012.

[07:53] - Adding ASP.NET Web API

This demo goes a bit further by showing an Excel Task Pane app that posts data back to a backing ASP.NET Web API service, then displays the result. Brady Gaster wrote this demo; it's available in the Web Camps Training Kit.

[12:24] - What is an App for Office

After having explained the model, I showed how you can get and sell Apps for Office in the store, then showed where you can find more information.

(06) Building and Leveraging Social Services in ASP.NET

Several people told me this was their favorite session. The scripted part is good - it shows how to let your users log into your ASP.NET applications using OAuth and OpenID, then explains the new Facebook app template in the 2012.2 release.

But our live viewers really liked watching the unscripted part, when Scott and Damian troubleshot a problem with Twitter app setup because Twitter wouldn't allow an authentication callback to Scott's laptop. Hilarity - but also some pretty slick, on the fly troubleshooting - ensued.

03:02] - OAuth flow

Scott and Damian explain how OAuth works, and how you can use it to enable users to log into your ASP.NET sites without a password.

[06:34] - Demo - OAuth and OpenID

Scott and Damian set up Twitter and Google authentication for an ASP.NET application.

[27:47] - Facebook applications

Scott and Damian explain how Facebook Aps work, then show how the new Facebook app template makes it a lot easier to develop Facebook applications and interact with the Facebook "social graph".

(07) Building for the Mobile Web

Scott shows three options for how to deal with the the ever-growing percentage of mobile browsers: do nothing, change the client (adaptive rendering), or change the server (display modes or using jQuery Mobile)

08:24] - Adaptive rendering - change the client

Scott shows you can use CSS @media queries to adapt the HTML for different display dimensions.

[11:24] - Display modes and jQuery Mobile - change the server

Scott shows how you can use ASP.NET MVC 4 display modes to create generic mobile views or custom, device specific views. He demonstrates how to use mobile browser emulators to test how the display modes will work on the target device. You can find out more about mobile device simulators here: http://www.asp.net/mobile/device-simulators

Scott's walkthrough on working with jQuery Mobile in ASP.NET is really worth watching - he demonstrates how to take advantage of some more advanced jQuery mobile features using the ASP.NET MVC 4 Mobile template. You can find out more about using the some of the techniques Scott demonstrates in this tutorial: ASP.NET MVC 4 Mobile Features.

(08) Real-time Communication with SignalR

SignalR makes it easy to do real-time web applications in ASP.NET. If you want to learn about SignalR - and I'd suggest that you do - Damian is the guy. He and David Fowler started developing SignalrR as an open source library two years ago, and he gives a really clear explanation that's both deeply technical and understandable.

[08:00] - Demo - Move shape

Damian shows a nice visual example with two browsers communicating via a SignalR backend; moving a shape in one browser instantly moves it in the other browser. You can find the code for this demo in the SignalR ASP.NET samples, titled ShapeShare.

[29:18] - Connecting to SignalR with C# and JavaScript clients

Damian demonstrates concurrent connections to the same hub from a WPF client and several different browsers.

[36:56] - Real-time gaming: ShootlR

Damian shows off the ShootR multiplayer HTML5 game, with over 260 live players. He explains the mechanics, including the different game loops and how they optimize for realtime multiplayer games. The code for ShootR is available here.

[44:20] - Chat application: JabbR

Damian shows off the JabbR chat system and talks about scaling with backplanes, then shows off some new features they're working on.

(09) Taking Advantage of Windows Azure Services

[01:20] - Azure signup

I explain the Azure signup process and talk about what you can get for free. Scott and I talked about how little it costs, and talked about how caching can make that even lower.

[05:00] - DevCamps.ms

I talk about how we've been using Windows Azure Web Sites for the DevCamps.ms site, and Scott and I talk about the ability to scale up and down. I also explain how we use separate Windows Azure Web Sites instances for QA and Staging on DevCamps.ms, using Git deploy. Scott and I discuss the ability to be able to roll back to previous Git deployments if needed.

[08:45] - Single serving sites

I show off a quick example of a "single serving" site for quick code demos.

[09:40] - Windows Azure Store

Scott and I talk about services - many free - which are available in the Windows Azure Store. I show off a demo what you get in the free version of New Relic.

[15:36] - Azure command line

Scott shows off all the sites he's running in Windows Azure and demonstrates how he can use the Azure command line to manage his sites. He explains that they're written in JavaScript and run cross-platform; for more information on that, see this tutorial: How to use the Windows Azure Command-Line Tools for Mac and Linux

[20:06] - Wrap-up

Scott, Damian and I wrap up the day with an overview of what we've covered and where you can go for more information.