By Guillermo Cedillo
Create new Project
The master page contains concepts from boilerplate. Boilerplate is an excellent template which groups the best recommendations for webpage performance (it helps you a lot to obtain an A-grade with Yslow or Google PageSpeed).
For our project I just add some features from boilerplate. I like to keep it simple but feel free to review it and implement the best concepts for your project.
Those basic concepts are:
• Add styles on the top and scripts on the bottom.
• Add ie6/ie7/ie8... class in the html tag to allow ie fixes for css.
• Add metatags for compatibility and descriptions.
• Add modernizr for adding html5 tags and other html5 capabilities and validations.
• Add a remedial script to add missing functionality in javascript.
Also add render sections for styles and scripts. This helps you add custom css and js in specific views.
Views configuration
You can add custom styles for the view.
Install Combres
Combres is a .NET library which enables minification, compression, combination, and caching of JavaScript and CSS resources for ASP.NET and ASP.NET MVC web applications.
The best way to install it is from nuget. Just search for it and let it do the hard work for you.
Combres helps you handle all the js and css generated from this proposed project strucuture.
As a bonus, you can implement the less.css compiler that extend the css concepts to the way css should be.
Installing Combres from NuGet
Resources Bundles
Scripts
The scripts folder contains this structure:
· Scripts
o Project.js
o Frameworks
§ jquery
§ jquery ui
§ jquery validation
§ ms-ajax
§ remedial.js
§ namespace.js
§ date.js
§ etc...
o Plugins
§ jquery.plugin.js
o Shared
§ Common.js
§ Configuration.js
§ Resources.js
o Controller
§ Action.js
o Controller
§ Action.js
o OtherControllers
Script structure
The scripts follows the module pattern.
namespace("Sieena.Home");
//Sieena.Home.Index
Sieena.Home.Index = (function ($, undefined) {
//Internal variables
var _internal, _id, _context,
_message = 'Hello Sieena!';
//Private Methods
function myPrivateMethod(param) {
}
function showMessage() {
Sieena.Common.DisplayNotification('info', 'Message', _message);
}
//On Page Load
$(function () {
showMessage();
});
//Expose Public Methods
return {
MyPublicMethod: showMessage
};
})(jQuery);
Using combres for scripts
When you have a group of related scripts is called bundle, you can create bundles for your base scripts, plugins, and the project custom scripts.
Also is a good practice to create separate bundles for heavy scripts that are only used in some sections of the web project, like jqgrid which can add >500kb to your scripts.
Content structure
· Images. All images that are referenced directly from the <img /> tag, like the logo or a product photo.
· Styles
o images. All images referenced from the css rules.
o plugins
o themes
· Docs
A word about Styling
You can use some tips for a better structure and teamwork in css creation. But you should really give an opportunity to less.css now that is easy to "compile" them.
EOF
I really hope this proposed configuration helps you follows the best concepts in web creation and let you have a better organized project.
Resources
HTML5
· http://diveintohtml5.org/
· http://html5boilerplate.com/
· http://www.modernizr.com/
Combres/Nuget
· http://combres.codeplex.com/
· http://nuget.org/
CSS Styling
· http://www.alistapart.com/articles/progressiveenhancementwithcss/
· http://msdn.microsoft.com/en-us/scriptjunkie/ff679957.aspx
· http://lesscss.org/
· http://960.gs/
Scripts Structure
· http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
· http://elegantcode.com/2011/02/15/basic-javascript-part-10-the-module-pattern/
Performance Analyzers
· http://developer.yahoo.com/yslow/
· http://code.google.com/speed/page-speed/