Build Single Page Apps - Part 5 - HTML 5 and ASP.NET Web Optimization

Single Page Apps (SPA) are all the rage, and while it’s exciting to talk about the JavaScript we use in the SPA, the HTML is just as important. If HTML5 tags are used, then its important to make sure that you prepare for a graceful degradation if you want older browser support. Also, the HTML shell should handle this and pull in scripts as efficiently as possible.

You can read more about this and other topics in a few weeks when Pluralsight will be releasing my new course titled “Building Single Page Apps (SPA) with HTML5, ASP.NET Web API, Knockout and jQuery”. Til then, I’ve decided to journalize the creation of the course in a few posts. You can catch up on the previous posts in this series here:

More on the Code Camper SPA

Part 1 - The Story Begins (What is the Code Camper SPA?)

Part 2 - Client Technologies

Part 3 - Server Technologies (the Data Layer)

Part 4 - Serving JSON with ASP.NET Web API

Part 5 - HTML 5 and ASP.NET Web Optimization

Part 6 - JavaScript Modules

Part 7 - MVVM and KnockoutJS

Part 8 - Data Services on the Client

Part 9 - Navigation, Transitions, Storage and Messaging

Part 10 - Saving, Change Tracking, and Commanding

Part 11 - Responsive Design and Mobility

HTML Best Practices

Staring at a blank canvas can be terrifying for developers. Come on, admit it .. as exciting as it is to start a new project, sometimes its just daunting to think “how do I get started?” The good news is that when starting with an HTML app there is help to get you going. And using best practices for HTML is actually quite simple. 2 of my favorite tools to get started are HTML5 Shiv and HTML5 Boilerplate. In my course I chose HTML5 Boilerplate and it offers these (and many more) benefits:

1) Tips on where to put your scripts in the HTML page

2) Mobility and responsive design help

  <!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">

3) CSS baseline for styles (check out the style.css included in the template)

4) Helps make your app work well across multiple browser brands and versions with modernizr

<!-- All JavaScript at the bottom, except this Modernizr build.
    Modernizr enables HTML5 elements & feature detects 
    for optimal performance. Create your own custom Modernizr 
    build: www.modernizr.com/download/ -->
<script src="js/libs/modernizr-2.5.3.min.js"></script>

5) Tips for scripts using CDNs and  fallbacks

<!-- 
Grab Google CDN's jQuery, with a protocol relative URL; 
fall back to local if offline 
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script>
window.jQuery || document.write(
'<script src="js/libs/jquery-1.7.1.min.js"><\/script>')
</script>

There is so much more in HTML5 Boilerplate and I highly recommend you check it out. Its fun to download the full version of it which includes tons of comments on what the features do.

ASP.NET Web Optimization

When building an app you may end up with a lot of JavaScript and CSS files. Some you write yourself and others you include from popular libraries like jQuery or Knockout .  You want to make sure you get those scripts and CSS to your browser as quickly and efficiently as possible. That’s where bundling and minification can make a huge impact.

The good news here is that there are many options, there is one backed right into the latest version of ASP.NET called ASP.NET Web Optimization (available on NuGet). With this tool you can bundle your JavaScript (or CSS) into a few bundles. So instead of the browser making 40 requests for 40 files (if that is what you have), you could have the browser request 2 files (your bundles). Bundling is simply concatenating your files together.

The other half of this equation is minifying your files, which cuts out whitespace and does some other tricks to shorten the contents of the files. In some cases these can greatly reduce the file size and thus make the request take a lot less time to get to the browser. Once the scripts are optimized, you can bring them to the browser via a regular script tag reference or through ASP/NET’s special Styles.Render and Scripts.Render syntax as follows:

@Styles.Render("~/Content/mycss")
@Scripts.Render( "~/bundles/myjs" )

These are just a few of the feature of ASP.NET Web Optimization. You can see more about this feature in my course, as I use it to create a few key bundles for my scripts and CSS.

Next up I’ll explain some tips to kick off the SPA with JavaScript.