February 2013 - Posts - Jon Galloway

February 2013 - Posts

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.

Announcing the ASP.NET and Web Tools 2012.2 Release!

We're excited to announce the official release of ASP.NET and Web Tools 2012.2!

The most important thing to know about this release is that it doesn't affect the ASP.NET runtime or your existing projects and doesn't require any changes on your server. You can think of this as more of a Visual Studio web update that includes some new ASP.NET project templates. It works on my machine, is well behaved, and gentle around children and small pets.

I made a 25 minute video that overviews the features and shows a lot of code samples: Introduction to the ASP.NET and Web Tools 2012.2 Release:

Here's a summary (complete with some pretty pictures) and info on where to learn more.

What's in a name?

This release is named ASP.NET and Web Tools 2012.2, which is a bit of a mouthful. It's a tasty mouthful, though. Here's what it means:

ASP.NET - This release has new templates and tooling for the whole ASP.NET family: ASP.NET Web Forms, ASP.NET MVC, ASP.NET Web API, and more.

Web Tools - Historically, you had to wait for a big Visual Studio release to get updated features. That doesn't cut it these days, when a new language, JavaScript framework or SPA system goes up on Hacker News every week. In addition to the Web Essentials extension (which has nightly builds available if that's your style), the Visual Studio Web Tools team has worked hard to make it possible to officially ship new web features quickly. We just shipped Visual Studio 2012 last August, here's a bunch of new web tools for ya.

2012.2 - Naming is hard. The idea here is that this is a semantic name (or more semantic than Spring CTP Refresh Preview etc. etc.) that says this is an incremental release for the tools and templates that shipped with Visual Studio 2012.

What's in the box?

I made a handy diagram to explain the release. They tell me that software no longer ships in boxes, but if it did I think this should go on the cover:

What's new in Web Forms?

I really like ASP.NET 4.5 model binding and data control model updates. It brings a lot of the patterns I like in ASP.NET MVC to ASP.NET Web Forms, just scoped to the control level. Your data aware controls get and update data via methods which are control agnostic, the updates are model bound and validated, etc. It's quite nice.

The FriendlyURLs package helps you take advantage of that and push it further by bringing URLs inline with this model. It does two things for you:

  • It automatically maps URLs to ASPX pages
  • It automatically passes route values to controls with a nice bindable syntax

That means that you can have a URL like /Album/Edit/1 which maps to /Album/Edit.aspx, passing the 1 ID value so that controls can bind to it like this:

public Album EditAlbum_GetItem([FriendlyUrlSegments] int? id)
{
    return _db.Albums.Find(id);
}

 

What's new in SignalR?

Well, the main thing is that it's now ASP.NET SignalR. That means that, while it's still an open source project, it's officially shipped by and supported by Microsoft.

What's new in ASP.NET Web API?

Three big things:

Automatic Help Page generation - see a live sample here.

Tracing - Everything in the pipeline is output to the System.Diagnostics.Trace, so you can read it in the Visual Studio output window as well as any registered Trace Listener.

OData - Lots of new stuff here, including routing and query validation

ASP.NET MVC

ASP.NET MVC gets a few new templates, plus a big new bonus.

First, the Facebook template makes it easy to create full Facebook apps. Your users log in on Facebook, approve your requests to access their Facebook content, and then your app can interact with their social graph.

Secondly, there's a lightweight Single Page Application template based on Knockout.js and ASP.NET Web API.

And, thirdly, the big new bonus - we've made it possible to create new ASP.NET MVC templates using a Visual Studio extension (VSIX). Expect to see a lot more templates from us and others in the community!

What's new in Web Tools?

The web tools features are of course really visual, so I encourage you to watch the video above. Some highlights:

Page Inspector now has live sync, so when you update CSS you'll see it update immediately.

There's IntelliSense support for Knockout bindings, CoffeeScript, and more.

The integrated publishing includes single file publish and compare. That means that you can edit a single file and push it out, or even compare your local changes against the live production version.

Where do I get it?

As always, you can find the new release at http://asp.net/vnext

Where can I learn more?

Over the next two months we will have a series of new Web Camp events occurring around the world. We're finalizing several of them over the next few days.  Register today to attend one of these free one day events and learn how to build awesome web apps.

Building Web Apps with ASP.NET Jump Start with Jon Galloway and Scott Hanselman - Full Day Live (and recorded) Event on Feb 22

Update: the videos from this event are now available.

The ASP.NET and Web Tools teams have been cranking out some amazing stuff lately! But it can be a little tough to keep up with it all...

Lucky for you, we've got a great online event coming up on on February 22 which explains it all. Scott Hanselman and I are working with the Microsoft Learning / Virtual Academy team to run a full day Jump Start event. This will be live stream (register now!) and available on-demand later.

We'll be be spending a full eight hours digging into the following topics (and probably some more - who knows what will happen when you give Scott a microphone...):

  • New and advanced features in ASP.NET Web Forms
  • ASP.NET MVC 4 and ASP.NET Web API
  • jQuery
  • SignalR
  • Entity Framework
  • Visual Studio 2012
  • Internet Explorer 10 and HTML5
  • Building apps for Office with HTML5
  • Windows Azure Web Sites for ASP.NET developers

This is a great way to get up to speed with our latest releases, including everything you need to know about the ASP.NET and Web Tools 2012.2 release!

This is an online event, so everyone gets a front row seat. We'll be taking your live questions via chat, and we've got some top-notch chat proctors lined up including Brady Gaster and some ASP.NET MVP's. If you're familiar with our current Web Camps tour, this will follow the same general outline and content, but updated with the newest bits Scott and I can get our hands on!

Register now to reserve your spot.

And if you'd like a preview of some of the fun I fear we may all be in for, check out the talk Scott and I did at //build/, Bleeding edge ASP.NET: See what is next for MVC, Web API, SignalR and more…

Now imagine eight hours of this! What have I gotten myself into?

More Posts