Webpage Source Code Layout

Summary

In this blog post I’m going to talk about the wrong and right way to layout your front side assets. By this, I mean the html, js, images and css files.

Legacy Code

In the “good ole’ days” of legacy code such as ASP, and .Net using front-side and code-behind, many programmers would mix Javascript with HTML and CSS code. Along came JQuery and the need to embed event handlers inside of HTML came to an end. Yet, somehow the entire developer community didn’t get the memo on how much easier it is to provide full separation of Javascript and CSS from HTML.

Another method used in legacy applications is to print the HTML, Javascript and CSS from the code-behind. Don’t do this! Avoid this technique like the plague. Visual Studio can keep track of JQuery functions and printing some functions and calling them from front-side code will cause warnings and errors (because Visual Studio can’t find the function that will only appear when the program is running).

What’s the Big Deal?

There are several reasons for separating Javascript from HTML and your code-behind code (i.e. C# or VB.Net).

  1. It reduces confusion between languages. The JQuery or Javascript is in the js file while the html is in the cshtml or aspx file.
  2. Assets can be bundled. MVC and the newer .Net websites can perform automatic bundling of js and css files.
  3. Assets can be minified. MVC and the newer .Net websites can perform automatic minification. This will cause web pages to load faster.
  4. You can upload your js and css files to a CDN for faster distribution, reducing the load on your web servers.

How to Convert Your Code

Many programmers prefer to generate their javascript because they can print code-behind variables in the output. This can be handled using hidden input html tags.

Front-side HTML code:

<input type='hidden' id='myVariable' value='<%=variabledata %>' />

Js file:

var myVariable = $('#myVariable').val;

Or, if you’re using Razor, you can use the viewbag instead of the ugly “<% %>” tags.

Another method is to use a javascript section in your front-side code to set the variables in one block. This will be done before you include your js files (inside the page header):

<script>
var myVariable = '<%=variabledata %>'; 
var MyOtherVar = '<%=variabledata %>';
</script>

This will not be minimized or bundled, but it is usually a small amount of javascript code.

Your next step is to remove all event handlers from HTML. Make sure there are no “onclick” events or any other javascript in-line code. Use JQuery handlers instead:

$('#idName').click(function(){
   // jquery function code here 
});

This will eliminate a lot of clutter inside your HTML code. You’ll need to make sure that your HTML has the proper id tags so you can attach event handlers to your code.

Remove all your in-line style codes. Move these to a style sheet. One of the benefits of containing all of your css in style sheets, is that you can use a css pre-processor like “less”. Less is a language that can extend the power of css, making it more dynamic. For more information about less go here.

You can also change your website theme by switching css files. If you created a lot of in-line css, you’re stuck. This code is embedded with your HTML and would need to be altered using variables (like color and background-color for example). The css pages for each theme can be stored along with the images that match the theme. Then the path names provided at the top of a web page can be setup as variables controlled by the code-behind or controller.

Content Delivery Networks

If your Javascript and css code is contained in their own files, you can upload these as static files into a CDN. This will provide the end user with a lower latency time when they visit your website. If you are dynamically generating your Javascript, then it will need to be transmitted from your web servers directly. This puts a load on your web servers and it prevents you from using a CDN for this content. To reduce the load on your web servers you would want to load all static files such as images, Javascript and css files onto the CDN (as well as any static HTML files).

When you use CDN’s you’ll need to pre-minify your JS and CSS files, instead of doing this automatically. There are a lot of programs available that will minify these types of files and you can include this in your deployment process.

Leave a Reply