Web Development using latest Microsoft Technologies

In this article, focus is on web development using recent Microsoft Technologies. My goal is to provide clear practical approach that helps you use these new tools/technologies right away. To be specific I will be covering: Windows Azure, SQL Azure, Azure Queues, ASP.NET MVC2, EF 4.0, VS 2010, Ajax, JQuery/JQueryUI and Silverlight.  I will also cover few common trends in web development: Blogs, CSS, debugging tools in browser etc.

Details I am providing here are from my hands-on experience on projects and views expressed are of my own. More than a year ago, I decided to revamp my web development skills, to match modern web development trends and ever changing Microsoft technologies/tools. It was overwhelming for me and little stressful sometimes, to cover the breadth and depth. It took so much reading, experimenting and building real-world projects/websites, to fully understand and appreciate a lot of things. So I thought I could save this huge effort and time for many others, by providing cream of what I found out. 

ASP.NET MVC 2 

ASP.NET MVC2 is very flexible and powerful technology/framework. Coming from ASP.NET Web Forms background, I had lot of resistance to ASP.NET MVC, for quite some time. But after building few real-world websites using ASP.NET MVC2 and deploying them, I realized the flexibility, control and clean way to do things in ASP.NET MVC2.

ASP.NET MVC2 key features:

1. In ASP.NET Web Forms, built in to the code-behind page are also set of UI and service methods that make all the page work the way we want it. Where as in ASP.NET MVC, we start with methods/API for specific functionality and keep presentation completely separate.  Code-behind approach in ASP.NET Web Forms only achieved separating HTML/CSS and C# code. But did not achieve separating presentation and business logic layers. ASP.NET MVC does this very well by following MVC (Model, View, Controller) pattern. You don't even need to know so much about MVC pattern as ASP.NET MVC tooling support in Visual Studio, does most of the code generation for you. 
2. Building Web ASP/Functionality (Controller): With ASP.NET MVC, we write controller methods that are very similar to how we build a class with few useful public methods. These controller methods are entry point to your website. So I like to treat them like web service methods. What these methods return is completely up to the developer. We can return JSON data OR HTML or only part of the page, if it is Ajax request. 
3. Presentation means Presentation ONLY (View): View in ASP.NET MVC is .ASPX page. This is what gives a shape to a Controller method.  Only goal of View is to present data provided to it. View does not care how to get data and where is data stored? View is simply handed over final data and View does not need to look for data or get data by making any calls. By the time we hit View our data needs to be already there for it to present it.
4. Persisting and reading data (Model): Model in its simplest terms, represents an entity (Ex: Product, Customer etc). Model knows how to read/persist data. You can use any technique to save/read data but general preference is to use Entity Framework (which will cover in a min) as it gives lot of flexibility and a great ORM from Microsoft, for free.
5. A layered approach: Initial ASP.NET MVC videos did not impress me much as a lot of key benefits of ASP.NET MVC were projected as not having code-behind and increased testability. In addition to this initial code samples also made Model too fat, as it implemented everything from service logic to data access (as per MVC pattern). This made me stay away from ASP.NET MVC for a while, till I realized that there is better way to do things and code samples can only get you familiarize with new technology.
   
   Following is general structure I follow, broken down in to projects [each representing a layer]
   
   
   • Main ASP.NET MVC project
     • Controllers
     • Content 
     • Views
     • Scripts
     • Web Infrastructure
     • Models (created by ASP.NET and I still use it for UI only entities)
     • Helpers (extension methods and other web helpers)
   • Service Project
     • Service Interfaces (Public interfaces – access is only through interfaces)
     • Service Implementation (implementation classes are not public)
       • I prefer explicit implementation of interface
     • Service utilities/ Helpers 
     • Nothing about database, store, connections here
   • Data project
     • Model  (EF + custom entities)
     • Constants
     • Helpers
   
   Key benefit with this approach is service and data access projects are re-usable, in a different web/non-web project. Also it makes things more manageable than having one website project with everything in it.
   
   Controller in above implementation does not call Model directly. Instead Controller calls service interface that takes care of doing the rest of the job and return Model. Model returned by service interfaces is entity ONLY. Controller will not ask Model, to save/load data directly. Only a service interface exposes this functionality and internally makes use of ORM or other techniques to do so.
6. Towards Semantic Web: In ASP.NET MVC developer creates almost every bit of HTML tag that comes out. There is no hidden magic that adds up or generates HTML that you don't know of. Of course this sounds little annoying initially but once you get familiar with many HTML helper methods, you will be so happy to use them. Bottom line is that when you compare HTML output from an ASP.NET MVC page and ASP.NET Web Form page, you will see the difference yourself. 
7. Attribute based programming:  ASP.NET MVC2 makes it very easy to do some common tasks by adding required attributes to Controller, methods or properties. Following are few examples:
   
   [Authorize]: Adding this attribute to Controller class or specific actions/methods will make any calls require authorization and user will be automatically directed to login page
   [RequireHttps]: This attribute at Controller class or specific actions/methods will enforce that HTTPS is used to make the call. With very little coding, we can automatically direct user to HTTP vs HTTPS based on specific controller/methods used. 
   [HandleError]: This attribute on controller class will handle any exceptions even if we don't have try/catch at each action/method and will re-direct to user-friendly error page.
   Attributes supported for data validation through Data Annotations: You can add all sorts of data validation attributes on your model [even EF entities can have supporting metadata classes that support data validation]. This is very useful to validate your model data. ASP.NET MVC2 code generation takes care of generating most of error reporting mark-up for you, in the view.
8. Ajax Programming and Partial Views: ASP.NET MVC works well with Ajax. Partial Views are very useful and increases re-usability and developer productivity. In a Controller action/method you can check if request is Ajax request and return Partial View vs. Full View. There is support to return data in JSON format too.

There are many other good features of ASP.NET MVC: Generating unit tests, Excellent tooling support through Visual Studio to generate most of the infrastructure code for Controllers/Views and few others.  I left these features as they are commonly covered in many ASP.NET MVC articles.

JQuery and JQueryUI:

JQuery and JQueryUI are not Microsoft technologies and they are Javascript libraries. They are not new languages or require huge learning curve. But they are very efficient and easy to learn. Microsoft supports JQuery and ships JQuery with ASP.NET.

JQuery is most important javascript library that you don't want to miss. There are many other javascript libraries that are similar to JQuery and I am not suggesting one is better over the. JQuery makes everything very simple and easy, including Ajax programming. In short JQuery is just a javascript library that makes it easy for developers to do many common tasks. Browsing through documentation and samples on JQuery website helps to learn JQuery quickly. 

JQuery UI is has many useful UI gadgets [Tabs, Pop-up windows, Accordions etc] built with JQuery and CSS. They can make your website pretty in no time and save you from lot of coding. 

A word about Ajax and JQuery:

JQuery makes it very easy to do Ajax programming. My preference is not to go for easy out of box options like Microsoft AJAX Update panel etc. Using JQuery Ajax is simple and straightforward approach with no hassles.  

A word about Website layouts and CSS:

In the past website layout and branding used to be very important and needs to be decided first. Rest of the development continues based on website layout and design.  It used to be difficult to change branding or layout easily once developed [to some extent].

In modern web development, we no longer need to wait for layout/design and many tasks can run in parallel. It is more productive approach. Of course what needs to be decided is key set of features, functionality, scope and goal of the website. It is very important to understand usage of website, security requirements and additional deployment factors first. If things are developed right way, layout and branding can be changed in not more than an hour (assuming we have layout design implemented through CSS, Master pages and supporting scripts/images).

Developers can focus on functionality and web designers can come up with any design/layout that can be imported in hardly few mins. If you used any of the ASP.NET MVC designs on your website or looked at csszengarden website it is easy to understand this.

CSS along with master pages and some JQuery magic, gets you most of what you need. Few people might think we need to have nice images to make a good website. Sometimes images can actually put a dent on performance of your websites adding up to page download size. Most of the magic these days can be done even with a tiny strip of image and mostly with CSS. So I cannot stress how important it is to learn CSS techniques and little bit of JQuery to build good layout for website.

Silverlight 4.0

I just love Silverlight for its power, ease of use and excellent design/implementation. People constantly blame Microsoft for one good reason. Microsoft makes many development tasks, very easy and you don't need to know a lot of details, to use it. Mainly technology that are coming out of Microsoft in past few years is clearly way beyond what used to be simple improvements to existing technology. Few examples for this are: WPF, WCF, Silverlight, ASP.NET MVC2.  

Key features of Silverlight:

1. Silverlight applications can be developed in C# (or other .NET languages) and developer can do end-to-end debugging right from client applications to a stored procedure, using single IDE - Visual Studio.  
2. Silverlight is XAML based. It is important to understand concepts of XAML and put more focus on declarative approach when dealing with Silverlight or WPF. Major benefit for WPF developers is that, they already know Silverlight [at least most of it]. This is another key benefit. Only thing a WPF developer needs to understand [assuming they already mastered XAML and declarative approaches] is what are key differences between WPF and Silverlight are and how Silverlight integrates with Browser.
3. Excellent browser integration: Another very useful feature is Silverlight integration with browser. Silverlight plug-in can call javascripts methods on your webpage OR javascript on your web page can call Silverlight methods. This is really very useful and important feature when migrating existing websites to a Silverlight based website or when developing Silverlight plug-ins for website.
4. Silverlight based stand-alone applications: In the past WPF based smart client used to be the best option, if your application has to run outside browser. If requirement is just to run an application outside browser and you don't need additional bells and whistles of using machine resources, most of this can be achieved through Silverlight stand-alone applications. WPF based smart clients are still good if you need to do heavy lifting.
5. Animation and drag-drop made easy: With Silverlight projections and Expression blend behaviors, many key tasks can be done just through XAML and sometimes even without any additional C# code.
6. Good tooling support: Using Expression studio is great. But even without Expression web you can do a lot just with Visual Studio and hand-writing XAML. If you are new to Silverlight and/or XAML, my suggestion is to write XAML by hand. It is not something we all are used to, as we like designer and drag controls over it. But once you push yourself a bit to write XAML, you will like it so much.  Visual Studio has everything you need and new VS 2010 also has designer [although I have not used it]. 
7. Siverlight Toolkit is very useful and has many useful controls. From my experience, I felt like Tool kits controls worked lot better than some 3rd part Silverlight controls. [No offense to anyone using 3rd part controls].
8. Navigation support and complete Silverlight based website: You can build a website completely with Silverlight. Although this is not my recommendation or preference but there are times this is useful. Also Silverlight has good navigation framework that allows designing multiple Silverlight pages and navigate between pages. 
9. Object oriented design: Just like any other desktop application development, Silverlight development can be more object oriented. Developers can create multiple user controls for re-usability or to keep things cleaner and build pages that use these controls. You can also build service layer integration code and presentation code separately. Please look at PRISM and MVVM pattern for more details. I have not used them but you can still keep things separate and re-usable, irrespective of whether you use specific pattern/framework or not.
10. Will Silverlight replace HTML/CSS? Just because Silverlight allows building entire website, does not mean we should build websites that are nothing but Silverlight applications. In some cases where client-side cache is important and there are other benefits, it might make sense to do so. But majority cases I see Silverlight as powerful player in website development but don't see as any threat to HTML/CSS or I don't believe that it will ever replace HTML/CSS. But it is my personal opinion.
11. Silverlight RIA services: I did not use this on real project. But I tried few samples. I felt like this is targeted for developers who do not want to spend too much time learning WCF. Also if you need to make use of ASP.NET key features, RIA services might be useful. RIA is not my choice because, I felt like writing a service code specially targeting Silverlight Client defeats the purpose of lose-coupling and SOA tenets. I like my service layer to be stand-alone that can be integrated into any other service and/or applications. 

Bottom line is if you are in web development, Silverlight is very powerful and useful technology that cannot be ignored. ASP.NET MVC and Silverlight also go hand-in-hand. 

Cloud Computing and Windows Azure:

Recently I developed a fully secured ASP.NET MVC2 ecommerce website that uses SQL Azure and deployed it on Windows Azure platform. I also used Windows Azure Queue Storage to support some long running processes. Thanks to useful blogs and wealth of information available in this area that made it very easy for me to do all this. Following are few details I wanted to share from this experience. 

Windows Azure supports .NET Framework 3.5 currently. Windows Azure is yet to support .NET 4.0 but the support might come very soon [in coming months].

Windows Azure is a Cloud services operating system from Microsoft. So what makes it useful for web development? Following are few details:

1. ASP.NET web application and a database that goes with it, you can host them using many ASP.NET hosting providers and some of them are not expensive. This is still useful option for most common personal and blog websites. Windows Azure can host this type of websites but it might be more expensive [at least based on current price structure], to go for Windows Azure vs. going with ASP.NET hosting providers.
2. There are certain websites that require more infrastructure and/or scalability/performance requirements as they are business critical web applications. Another important point is about data security. Ecommerce websites and other business websites might fall in this area. So Windows Azure based deployment gives you the benefits of deploying your application in your own virtual environment, similar to using a virtual server for your hosting.
3. Can we deploy existing websites on Windows Azure?
   It is not like once you start using Windows Azure, you have to change everything. In simple terms, you can treat Windows Azure as some virtual machine on the internet, where you deploy your application. For all practical terms it is very similar to using a virtual machine but you cannot see or access the machine directly. You need to use Windows Azure website to do everything. There are also few useful tools that will allow you to look at Windows Azure storage.
4. SQL Azure and Windows Azure Storage:
   
   
   1.    SQL Azure is Microsoft SQL database server in the cloud. It is not exactly same as SQL Server 2005 or 2008 but it is compatible and you can do most of what you do on SQL 2005 or 2008. So this is very useful, if you are migrating existing web applications or even building new ones. You can use Microsoft SQL Management Studio to manage your SQL Azure databases. So for most part it is just like SQL Server.
   2. Windows Azure Storage:  In addition to SQL Azure, Windows Azure supports additional storage: Table storage, Queue storage and Blob storage. Table and Blob storage can be treated like some data storage for our understanding. But Queue storage is similar to MSMQ but not so similar. In short you can send messages to Queue and other applications can receive them and/or reply to them. This is very useful and Azure Queues can be accessed from anywhere and not necessarily from Cloud applications only. 
   3. When to use SQL Server storage vs. Azure storage:  Using SQL Azure store is little bit more protected as you cannot access Windows SQL Azure database from any machine on internet. You first need to add FIREWALL settings to allow any machine on internet to connect to SQL Azure database. This is very useful feature. So storing things in SQL Azure is good for your cloud applications. But Windows Azure storage can be accessed from any machine on the internet, as long as you have the credentials to access it. So data that needs to be shared across cloud applications and other enterprise applications might fit better on SQL Azure. It is still secured as you need account credentials to access it. 
5. Support for application services: You can deploy WCF and/or application worker processes (similar to windows services) on Windows Azure. This is where I see many benefits of using Windows Azure vs. going with regular ASP.NET hosting providers.
6. If you are a developer, you will love working with Windows Azure as it gives you more power over your deployment platform and what you can do. Fortunately it is not like you have to learn a whole new technology. With just few changes, existing websites and applications can work in Windows Azure environment. There is great deal of development support where you can try all this in a simulated Windows Azure environment on your machine, before you deploy it.

Microsoft Entity Framework 4.0:

Microsoft Entity Framework 4.0 is fully matured and powerful ORM. It makes many common tasks around ORM a lot easier to do. Separating Database design, application entities and data-access code – all this is achieved through EF. With user-friendly EF designer support in Visual Studio 2010, it takes only a few seconds to build data access code.

Few common areas to be careful:

1. It is tempting to use EF directly and without any stored procedures. I personally like exposing database only through stored procedures through applications and not allow any permission –including SELECT on tables directly. Of course there are exceptions. Side effect of using stored procedure is that it makes it difficult to be database agnostic. So as long as developers know pros and cons of each approach it is ok.
2. Performance: I don't notice any visible performance issues. But I am comfortable with code that directly uses ADO.NET interfaces and calls a stored procedure to get exactly I want vs. using EF to do this job. So there are still some areas in the application you may prefer the approach of using ADO.NET directly, if you see the performance benefits. But as long as you keep your code ADO.NET provider agnostic and using ADO.NET Interfaces, that should help.
3. I think EF is ready for production use and is great ORM from Microsoft. It is also targeting to simplify writing data access code. Developers need to be very careful about simplicity vs performance and understand few implementation details. This will help them to avoid few common mistakes. One common area I see is, using LINQ queries repeatedly in a loop. LINQ uses deferred execution by default. So just defining LINQ query will not execute it unless use it. So executing LINQ query in a loop might impact your application performance and we cannot blame EF or LINQ to SQL for this. In this case you may need to force non-differed execution by using one of many useful extension methods on the query up front.

Visual Studio 2010: 

New version of Microsoft popular IDE got even better with 2010. There are many things I like in VS 2010. Performance profiler now can show CPU curve and other key DEBUG helpers make things lot easier and productive to use IDE. Fact that VS 2010 supports multi-targeting, there is no reason for developers to wait till they migrate to .NET 4.0. Developers can get the best of VS 2010 right away and use it for their existing .NET 3.5 projects, by setting target to .NET 3.5.

About Blogs 

Lot of times I hear from developers and others saying, I am not a blogger and don't need a blog site. But I clearly see the advantage of blog site. I am sure there are many developers out there who solve many interesting problems in a work day or work week. It makes a lot of sense for developers to share this experience even in a short note on a blog. This helps in many ways: 

• Many people who face similar problem get the answer right away
• It might be good reference for your worn experience 
• This is good way to build your blog site. 
• Don't think you have to write something every day or keep your blog up to date. But update it with useful info as and with details of specific issue and how you solved it. 

I am impressed with Wordpress blogging engine. There are many out there and you can give it a try when you are ready to blog.

Debugging tools in Browser:

Fiddler and Firebug tools can help you to debug code on client side, in the browser. They show all request responses from your browser. This makes it easy to test some of hard-to-find Ajax/javacript bugs. They also allow you to re-send specific request. You can also use response details, to find performance issues.  

Don't limit yourself to IE browser and have at least one other browser (Ex: Firefox) also installed on your machine.  Yahoo website has useful tips on performance of website and what are common things to watch out. Please read through Yahoo website for details.

Conclusion: 

I am impressed with community contribution to help developers on recent technologies and tools. I learned a lot reading through many books, articles and blogs. This is my attempt from me to give back to the community. Goal of the article is to clear any confusion in developers mind and encourage them to learn new technology/tools. All opinions and recommendations in this article are my own. You are free to agree or disagree. I do like any constructive feedback and it helps me to improve. So your feedback is always welcome.