So you’re ready to start that new and ambitious ASP.NET MVC project. Maybe you’re kicking off a new startup or just finally moving that old-and-crusty webforms project into modern development world. Either way, here are a few very simple things you can do immediately after creating that new MVC project that you will thank yourself for as your project grows in complexity.

1. First of all, even MVC 3 has old-and-crusty aspects lurking in its projects. There are old MicrosoftMvc*.js AJAX and validation libraries that have be replaced with new jQuery hotness. These *.js files aren’t used so just delete them.

2. Many of the dependencies of your MVC project are out-of-date as soon as you create your project. You have an old version of jQuery, Entity Framework, etc. Luckily Phil Haack and crew had the brilliant insight to link these to NuGet. So the next thing you do is just run NuGet and choose the Updates tab.

What’s that, you don’t have NuGet? Oh, you need to fix that right now!

Here’s what you can expect under the NuGet updates page:

3. Speaking of NuGet, by default all the external, NuGet-based JavaScript files get mixed in with your few JS files you always need to go back to for editing. So this is what you do:

Create a separate folder called js and put your JavaScript files in there.

Don’t forget to import site.js into your _Layout.cshtml file.

4. You like intellisense, yes? You also like fast-loading pages yes? So on one hand, you want to use jquery-1.7.1-vsdoc.js for intellisense, but you want jquery-1.7.1.min.js for performance. Here’s what you do. Import the minified version into your layout page (see later in the article) but add a “reference” to the vsdoc version in your site.js file. See the /// <reference> at the top? See intellisense? Good!

BTW, you are using namespaces or the prototype pattern or something besides just importing junk into the global namespace aren’t you? I thought so.

5. Next, unless you are planning on using jQueryUI you should remove it via NuGet. It has so many files under the content folder that unless you plan on using it. They are just mental weight. Everything in your project should earn its keep. You can always add jQuery UI back via NuGet if you want it.

6. Web programming is awesome, except when it’s not. That usual happens when you find your page looks different in IE vs Chrome vs Safari. You can avoid some of these issues just by referencing Eric Meyer’s reset.css. Be sure to put reset.css as the *very* first CSS file.

7. In ASP.NET MVC, there are models, then there are models. In MVC, there are domain models that are usually UI independent. Then there are models specifically meant to be tied to views. These view-oriented models are called View Models. I recommend you put view models in their own folder to make this dead-obvious.

Stephen Walther has more on View Models if this is the first you’re hearing of them.

8. You said you like fast pages before right? Well MVC is “doing it wrong” in order to allow you to inline JS which you should not do. Put the JS imports at the bottom of the page.

Be careful though, modernizr.js needs to stay at the top to work.

9. There are times you need to conditionally import JavaScript files from pages. The technique above in #8 makes this adhoc importing difficult. We can easily fix this by adding a layout section called AdditionalJsImports and make it optional (see above). This lets pages add more JS *after* jQuery.js and site.js.

Conclusion

If you do these 9 things at the start of your project, you’ll be on a good path to a well-architected system with some key advantages: It doesn’t have files in the wrong places, it doesn’t have unused or outdated files, and it is built for performance.

Hope you find these tips useful! If you have your own, please add them to the comments below.

Cheers!
@mkennedy