Creating MyOnlineBand Version 5 using ASP.Net MVC 4
I made my first web page back in 1997 when I was still a music major in college and was planning on a career as a professional guitarist. The page was called “The First Church of Sammy Davis” and it quickly became a cult success on the web and got millions of hits.
Thanks to the Internet Archive you can still see this stuff. Check it out. It is really funny.
The Internet was so cool during those years. It was wide open. It seemed that anything could happen. It quickly became an addiction and as my skills and the technology progressed I found myself in a career that I could never have even imagined existing back when I first picked up the guitar.
Fast forward to 2007 and after over 10 years as a professional developer; I decided to change jobs and to become a Software Architect. At my new job, I no longer had to write code but rather to design systems and have others do the implementations. But now since I was not coding, I no longer had a real creative outlet. I needed to come up with a code project.
Later that summer while taking a Pluralsight ASP.Net 2.0 training course I decided to try it out by creating the first prototypes for MyOnlineBand in my hotel room. I few months later in mid-October 2007 MyOnlineBand.com Alpha was born.
Over the years more than thousands of musicians have joined the site and it has been visited by almost 500,000 people. We have 1000s of songs published to the library and 1000s song workspaces. Lots of music that could of never existed without my little side project.
Since creating the site it has had quite a few upgrades. It had been kept up to date will all the latest technologies from Microsoft but had kept with Web Forms and the primary paradigm for development. Now with ASP.Net 4.5 coming out and MVC 4 in beta, I have decided to take the plunge and migrate the application away from web forms and on to MVC.
My first attempt at this was to try and ease my way in by adding a reference to the MVC framework to my web forms project and changing my config files to include the required namespaces. While this works, it is not optimal. Here is why:
- One project with all the infrastructure and baggage of both web forms and MVC is a cluttered bloated mess. You can see the size of your web application’s process grow by 30-40%.
- The project does not have the clean structure of the MVC project. Again big bloated mess.
- Since you are in the Web Forms project, you do not get the advantages of using the tools. You will need to do everything manually. This is not a bad thing from a learning perspective but it will hurt you from a productivity perspective.
After trying this approach for a few nights, I decided to take the plunge and to do a complete rewrite the front-end using MVC and Razor. I decided to go with the MVC 4 beta as my starting point. While this is going to be allot of work, I think it will be worth it. Here is why:
- Web API – This is the best new feature of MVC 4. Makes it easy to create a beautiful RESTful API which is an absolute necessity in today’s world. This design allows you to expose the application as an API and then develop an HTML 5 front end that can easily be ported to native applications on iPhone, Android, Windows Phone and Windows 8. While it was possible to do this using WCF starting with .Net 3.5 it never felt natural. It was like how Ajax felt on top of Web Forms.
- The new project template for Internet Application is a great starting place. Day one you get adaptive rendering and a more modern login and registration experience.
- Nice clean beautiful mark up. No nasty view state or 50 linked files to some web resource… that causes your page to be slower than dog..
- This time around I have new developers who are also members of the site helping me. I am hoping that in a few months we will have a new experience on MOB that will be much more engaging and fluid.
If you are a web forms veteran and are looking at ASP.Net MVC for the first time, it is over whelming. This is a whole different world that is much different than what you are used to. There is potentially a huge learning curve for you to overcome. There are two main paths you can take:
· Master Web API and find a front-end developer who knows his stuff
o Get a firm understating of the MVC concepts. Get a few books. Watch the Pluralsight MVC 3 video. This is an entire course and it is very good. They are allowing free access to it at the following URL http://www.pluralsight-training.net/microsoft/courses/TableOfContents?courseName=aspdotnet-mvc3-intro&highlight=scott-allen_mvc3-building-intro!scott-allen_mvc3-building-controllers!scott-allen_mvc3-building-security!scott-allen_mvc3-building-ajax!scott-allen_mvc3-building-infrastructure!scott-allen_mvc3-building-deploy!scott-allen_mvc3-building-views!scott-allen_mvc3-building-data-ii!scott-allen_mvc3-building-tdd!scott-allen_mvc3-building-data-i-2#mvc3-building-intro
o Gain an understanding of HTTP. You need to know the protocol inside and out. Don’t hide behind tools. Be able to write HTTP headers in a text editor. This is required to debug your service.
· Jump into the fire and in addition to learning the things mentioned above also learn the following:
o HTML 5 - Learn the new markup techniques. (Hint- it’s much more than just the AUDIO tag.)
o CSS 3 – This is the bread and butter of the web design world. (Hint – if you are still using tables for layout you are doing it wrong.
o JQuery – Hopefully you gave up on the ASP.Net Ajax stuff a few years ago and stayed away from the evil that is the Update Panel. I started using JQuery a few years ago. It is the only sane approach to take for front end development. If you have not yet worked with it get a book and start reading. The books are only a starting point. To Really learn it you need to spend some time coding and reading the API docs. Even if you go the Web API route you still should get an understanding of JQuery since this is how must people will be consuming your services
o Client Side Templates and Data Binding – This is a bit of the server side rendering school of thought applied client side. Picking a library and gaining a deep understanding of it is essential to succeeding in this new world. The Knockout library that comes with your MVC project has an excellent templating library.
Setting up the Project
The first step was to download and install the MVC 4 Beta from http://www.asp.net/mvc/mvc4
. The download and install took around 20 minutes. Another option could have been to download the Visual Studio 11 Beta. This has MVC 4 built-in and also allows you to create ASP.Net 4.5 applications. I think both options are fine but I am waiting for the next beta before I do any real coding since there are still some stability issues.
In the new project wizard, I selected MVC 4 web application. This starts a Wizard that asks you what type of project you want to create and few other details. For the MOB project I selected the “Internet Application” template. This template starts you off with two Controllers:
· Home Controller – Basic logic for your home page
· Account Controller – Basic registration and change your password pages
It also has a favicon, some images, views to go with the controllers.
The template also gives you a vsdoc version of jquery 1.6, along with plugins for validation, unobtrusive ajax, and JQuery UI 1.8. It also has knockout 2.0 and modernizer 2.0.6.
Here is screenshot of the project after the initial creation.