Saturday, December 12, 2009

Using WCF to build fast and lean web applications

Recently I ran into a problem where I needed to reduce the size of a page, we had a page with a lot of drop down controls that may or my not be used. The problem with this was the size of the html was huge, every one of the controls was fully populated with over 50 items, next the view state was equally huge storing all of that content. The Solution, using WCF to load the control’s content on demand.

Starting off we need to get WCF configured, and this confused me, I had to manually register WCF in IIS, WHAT!! ok to save you the hassle of having to research how to do this, execute c:\WINDOWS\Microsoft.NET\Framework\v3.0\Windows Communication Foundation\ServiceModelReg.exe –i and your good to go.

We have two options for populating the dropdowns, you can use a 3rd party control like Telerik’s radcombobox, or roll your own, which in some ways is fairly simple but rather involved, for right now I’m going to show you how to roll your own, to see how to use radComboBox see here.

Lets start with the WCF service, create a Ajax enabled WCF service. For what ever reason I had to remove the namespace to get this to work, and the examples I found online had it removed as well, this is something I’m going to research more on later. Next we need to build a data entity to hold the data, nothing fancy just something like this

   1: public class Item
   2: {
   3:     public string Text { get; set; }
   4:     public string Value { get; set;}
   5: }
   6:  
   7: public class Items : Collection<Item>
   8: {}
next we build the service, in this case I’m just building some data.
   1: [ServiceContract(Namespace = "")]
   2: [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
   3: public class DataService
   4: {
   5:     [OperationContract]
   6:     public Items GetData()
   7:     {
   8:         Items myItems = new Items();
   9:         for (int i = 0; i < 5; i++)
  10:         {
  11:             Item newItem = new Item()
  12:                {
  13:                    Text = string.Format("value {0}", i), 
  14:                    Value = i.ToString()
  15:                };
  16:             myItems.Add(newItem);
  17:         }
  18:         return myItems;
  19:     }
  20: }
when you add the Ajax enabled WCF service some items will be added to the system.serviceModel section of the web config in this case it looks like this
   1: <system.serviceModel>
   2:   <behaviors>
   3:    <endpointBehaviors>
   4:     <behavior name="DataServiceAspNetAjaxBehavior">
   5:      <enableWebScript />
   6:     </behavior>
   7:    </endpointBehaviors>
   8:   </behaviors>
   9:   <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
  10:   <services>
  11:    <service name="DataService">
  12:     <endpoint address="" behaviorConfiguration="DataServiceAspNetAjaxBehavior"
  13:      binding="webHttpBinding" contract="DataService" />
  14:    </service>   
  15:   </services>
  16:  </system.serviceModel>
if your not able to get your service to work with the Namespace, and you remove it, make sure to also remove it from the contract attribute in the endpoint node of the service node.

Next we add the service reference to the page using the script manager tag
   1: <asp:ScriptManager ID="scriptManager" runat="server">
   2:     <Services>
   3:         <asp:ServiceReference Path="/DataService.svc" />
   4:     </Services>
   5: </asp:ScriptManager>
Now we can access the webservice with javascript. First we need to have a dropdown control to work with, for this we are going to just use a plain old html select tag and add an ID and a runat=”server”.
   1: <select 
   2:     id="dropDownList" 
   3:     runat="server" 
   4:     enableviewstate="false" 
   5:     style="width:200px;" 
   6:     onfocus="populateDropDown(this);">
   7: </select>    
something else I have done here is I set enableviewstate="false" this solution doesn't use any view state so for the “cool kids” out there using MVC, this solution works for you as well. Next add the javascript to populate our dropdown, as you can see in the select tag we have a populateDropDown function that is called with onfocus.
   1: var Control;
   2: function populateDropDown(dropdown) {
   3:     Control = dropdown;
   4:     DataService.GetData(dropDownRequest_onSuccess, onFailure);
   5: }
Accessing the service is made easy by using the script manager, all we have to do is call javascript object created by the script manager with the same name as the service contract in this case it’s “DataService” and call the function with the same name as our service method “GetData”. The function takes 2 delegate functions that act as event handlers as parameters, in this case it’s dropDownRequest_onSuccess and onFailure. At this point I would like to say I’m in no way a javascript expert, if you know of a better way to any part of the javascript code by all means do it, and let me know.
   1: var selectedOptionValue;
   2:  
   3: function dropDownRequest_onSuccess(result) {
   4:     Control.options.length = 0;
   5:     for (var x = 0; x < result.length; x++) {
   6:         var opt = document.createElement("option");
   7:         opt.text = result[x].Text;
   8:         opt.value = result[x].Value;
   9:         if (result[x].Value == selectedOptionValue) {
  10:             opt.setAttribute("selected", "true");
  11:         }
  12:         Control.options.add(opt);
  13:     }
  14: }
  15:  
  16: function onFailure(result) {
  17:     window.alert(result);
  18: }
The dropDownRequest_onSuccess function clears (if any) options from the select tag, then loops though the result from the webservice, creating option elements, setting their text and value then checking to see if the value matches the value of the selectedOptionValue var and if they do it sets that option as selected then adds it to the options collection of the select control.

The onFailure is called when the service call fails, and for this we are just doing a simple alert to say it failed.

The next part is getting the data out when the page is submitted, because we are not using any view state we can’t get the value the same way we would with a regular asp.net control, we have to pull it from Request.Form collection.
   1: string value = Request.Form[dropDownList.ID];
Finally we need to add a way to set an option as selected. The code to set the selected option is already there we just have to utilize it by setting the value of var selectedOptionValue, to do this we use the ClientScript.RegisterStartupScript like this
   1: private void setValue()
   2: {
   3:     string script = string.Format("setpopulateDropdown('{0}',{1});", dropDownList.ClientID, Request.Form[dropDownList.ID]);
   4:     ClientScript.RegisterStartupScript(typeof(Page),"setDropdownValue",script,true);
   5:     
   6: }

to call this javascript function

   1: function setpopulateDropdown(controlId, value) {
   2:     Control = document.getElementById(controlId);
   3:     selectedOptionValue = value;
   4:     populateDropDown(Control);
   5: }

This sets the control to be updated, set the selected value, then populates the the control from the webservice.

Like I said it’s kind of a long process but you can cut down your page size a lot if your doing multiple dropdowns with large amounts of data that may not be used.

As always the full source code for this project is available (here).

Friday, October 23, 2009

First look at Visual Studio 2010 Beta 2

Visual studio 2010 Beta 2 is out, so lets take a look at some of the changes:

  1. The new WPF UI is a nice clean face lift.
  2. The new extension manager makes getting, updating, and managing plug-ins, templates, and controls(Telerik has almost their entire product line available) from the web easy, my only real issue with the extension manager is I can’t find a way to load plug-ins that aren’t in the gallery, and a lot of my favorite plug-ins(Ghost doc and R#) aren’t supported yet.
  3. The removal of the Team Studio versions, the Team Studio versions where confusing and over priced. The new SKUs are VS 2010 Professional, VS 2010 Premium, and VS 2010 Ultimate. For the full product descriptions see the Visual Studio Product page.

Some of the things that didn’t change:

  1. Adding a reference is still slow and painful.
  2. The testing frame work really hasn't changed much, although the test seem to run faster.

Things that are not quite there yet:

  1. Intellisense doesn’t work very well, but this may be a configuration setting.
  2. The number of supported plug-ins is limited, but that is understandable seeing that the plug-in model has completely changed

All in all I really like Visual Studio 2010 and I’m really excited for when it’s ready for prime time.

Saturday, October 17, 2009

Taking the pain out of code documentation

I have never known a developer that liked writing document let alone writing code document, well I take that back there was one guy but he had *Issues* and we’ll just leave it at that. I have heard all of the excuses, and in the end it still comes down to, we would rather write code then write about the code.

One common statement coming from the TDD/DDD methodologies is that the unit tests document the code; while this is great if we have the unit test, but even then a little documentation would still be useful so we don’t have to dig though unit test to figure out how to use a library. Another favorite excuse is the method names document themselves, granted having intelligently named methods and variables make understanding the code a lot easier(and we’ll get into that latter) but short of having the average method name be 40+ chars long this really isn’t practical either.

Luckily the are some tools to make writing code documentation much easier. For starters the .NET compiler can be configured to generate XML documentation files by setting an xml output file in the project build configuration. The xml content is created from specially formatted XML comments that looks like this

   1: /// <summary>
   2: /// Saves the contact.
   3: /// </summary>
   4: /// <param name="contact">The contact to be saved.</param>
   5: /// <returns>
   6: /// A true or false result of the successful saving this contact
   7: /// </returns>
   8: public bool SaveContact(Contact contact)

You can write this by hand or use a tool like the GhostDoc plug-in for Visual Studio. GhostDoc will auto generate documentation based on configurable rules for the different objects, classes, method, properties, etc. One of the very nice features about being able to configure the documentation rules is you can add additional item like remarks that say when it was documented and by who.

The second nice thing about using GhostDoc is the rules used to figure out what to put into the documentation can be used to make sure your using intelligent names, it’s not always right but it can be a good indicator for how good of names your using.

So why add this? This gives you two advantages, first it adds intelligence for your code, next it allows you to create MSDN like documentation using the .NET documentation generator Sandcastle.

Sandcastle can be downloaded from http://sandcastle.codeplex.com/ and provides a command-line interface for building your documentation from the .dll and .XML file generated by the .net compiler making it easy to add documentation generation to your automated build system. For the user it’s a little clunky and painful to use, if you want to build the documentation without scripting, there is an app for that, the Sandcastle Help File Builder located at http://www.codeplex.com/SHFB.

sandcastle_builder

Basically this lets you build a configuration that can include what is documented, the layout of the documentation, adding headers, footers, errors for missing items etc. and when you’re all said and done you get documentation that looks like this

sandcastle_documentation

it’s that easy.

Wednesday, October 14, 2009

Not ready for Inversion Of Control, just use a factory for now

There has been a lot of discussion latterly in the blog world about using inversion of control or IOC, some claiming it’s to hard to understand, it complicates development, and it’s unnecessary; the other side saying quit complaining it’s not that hard, it enforces good design and makes code more maintainable. To this I’m going to take the vary controversial position that they are both right.

Inversion of control can be intimidation the first time you use it, it adds a bit of complexity and you can write quality applications with out it. On the other side once you “get it” IOC really isn't that hard it encourages separation of responsibilities, and makes it much easier to test making regression testing and refactoring much easier.

So how do we get all of the advantages with out adding all of the complexities of an IOC container, simple just use a software factory class. For those who don’t know, basically a factory class is just away to abstract and consolidate the logic for getting your code dependencies.

Let’s say you have some code for accessing data from Amazon’s simpleDB

   1: public class ContactData : IContactData
   2: {
   3:     private Proxy simpleDBProxy;
   4:     public Proxy SimpleDBProxy
   5:     {
   6:         get
   7:         {
   8:             if (simpleDBProxy==null)
   9:             {
  10:                 simpleDBProxy = new Proxy();
  11:             }
  12:             return simpleDBProxy;
  13:         }
  14:         set
  15:         {
  16:             simpleDBProxy = value;
  17:         }
  18:     }
  19:     const string DomainName = "Contacts";
  20:  
  21:     public Contacts GetContacts()
  22:     {
  23:         Contacts myContacts = new Contacts();
  24:  
  25:         SelectRequest request = new SelectRequest
  26:         {
  27:             SelectExpression = string.Format("SELECT * FROM {0} ", DomainName)
  28:         };
  29:         SelectResponse response = SimpleDBProxy.Service.Select(request);
  30:  
  31:         var contacts = from item in response.SelectResult.Item
  32:                          select new Contact()
  33:                                     {
  34:                                         Email = item.Attribute.GetValueByName("Email"),
  35:                                         Name = item.Attribute.GetValueByName("Name"),
  36:                                         Phone = item.Attribute.GetValueByName("Phone"),
  37:                                         ID =  item.Name
  38:                                     };
  39:         myContacts.AddRange(contacts);
  40:         return myContacts;
  41:     }
  42:  
  43:     public Contacts GetContactsByName(string contactName)
  44:     {
  45:         Contacts myContacts = new Contacts();
  46:  
  47:         SelectRequest request = new SelectRequest
  48:         {
  49:             SelectExpression = string.Format("SELECT * FROM {0} where Name='{1}' ", DomainName, contactName)
  50:         };
  51:         SelectResponse response = SimpleDBProxy.Service.Select(request);
  52:  
  53:         var contacts = from item in response.SelectResult.Item
  54:                        select new Contact()
  55:                        {
  56:                            Email = item.Attribute.GetValueByName("Email"),
  57:                            Name = item.Attribute.GetValueByName("Name"),
  58:                            Phone = item.Attribute.GetValueByName("Phone"),
  59:                            ID = item.Name
  60:                        };
  61:         myContacts.AddRange(contacts);
  62:         return myContacts;
  63:     }
  64:    
  65:     public bool SaveContact(Contact contact)
  66:     {
  67:         List<ReplaceableAttribute> attributeList = new List<ReplaceableAttribute>
  68:            {
  69:                new ReplaceableAttribute().WithName("Email").WithValue(contact.Email),
  70:                new ReplaceableAttribute().WithName("Name").WithValue(contact.Name),
  71:                new ReplaceableAttribute().WithName("Phone").WithValue(contact.Phone)
  72:            };
  73:         contact.ID = Guid.NewGuid().ToString();
  74:         bool success = false;
  75:         try
  76:         {
  77:             if (!SimpleDBProxy.Domains.Contains(DomainName))
  78:             {
  79:                 SimpleDBProxy.AddDomain(DomainName);
  80:             }
  81:             PutAttributesRequest action = new PutAttributesRequest
  82:               {
  83:                   ItemName = contact.ID,
  84:                   Attribute = attributeList,
  85:                   DomainName = DomainName
  86:               };
  87:             PutAttributesResponse response = SimpleDBProxy.Service.PutAttributes(action);
  88:             success = true;
  89:         }
  90:         catch (Exception requestException)
  91:         {
  92:             success = false;
  93:         }
  94:  
  95:         return success;
  96:     }
  97: }

now because this implements the IContactData interface

   1: public interface IContactData
   2: {
   3:     Contacts GetContacts();
   4:     Contacts GetContactsByName(string contactName);
   5:     bool SaveContact(Contact contact);
   6: }

we can use it anywhere we would use IContactData, for example here we have an application that uses both local and remote contacts

   1: public class ContactsRequests
   2: {
   3:     private IContactData ContactData;
   4:     public bool UseLocalContacts { get;set; }
   5:  
   6:     public Contacts SearchContactsByName(string contactName)
   7:     {
   8:         if (UseLocalContacts)
   9:         {
  10:             ContactData = new LocalContactData();
  11:         }
  12:         else
  13:         {
  14:             ContactData = new ContactData();
  15:         }
  16:         return ContactData.GetContactsByName(contactName);
  17:     }
  18:  
  19:     public Contacts GetContacts()
  20:     {
  21:         if (UseLocalContacts)
  22:         {
  23:             ContactData = new LocalContactData();
  24:         }
  25:         else
  26:         {
  27:             ContactData = new ContactData();
  28:         }
  29:         return ContactData.GetContacts();
  30:     }
  31:  
  32:     public bool AddContact(Contact newContact)
  33:     {
  34:         return ContactData.SaveContact(newContact);
  35:     }
  36: }

now this works but there are a few problems, first there is no way to test it’s functionality without testing the functionality of LocalContactData and/or ContactData with a little simple refactoring

   1: public class ContactsRequests
   2: {
   3:     private IContactData contactData;
   4:     public IContactData ContactData
   5:     {
   6:         get
   7:         {
   8:             if (contactData==null)
   9:             {
  10:                 if (UseLocalContacts)
  11:                 {
  12:                     contactData = new LocalContactData();
  13:                 }
  14:                 else
  15:                 {
  16:                     contactData = new ContactData();
  17:                 }
  18:             }
  19:             return contactData;
  20:         }
  21:         set
  22:         {
  23:             contactData = value;
  24:         }
  25:     }
  26:     public bool UseLocalContacts { get;set; }
  27:  
  28:     public Contacts SearchContactsByName(string contactName)
  29:     {          
  30:         return ContactData.GetContactsByName(contactName);
  31:     }
  32:  
  33:     public Contacts GetContacts()
  34:     {
  35:        return ContactData.GetContacts();
  36:     }
  37:  
  38:     public bool AddContact(Contact newContact)
  39:     {
  40:         return ContactData.SaveContact(newContact);
  41:     }
  42: }
we remove the instantiation logic from the method and move it to a public property this way we can set the ContactData property to a mock object and test the specific logic of the methods in this class, now the only problem with this is everywhere we want to use IContactData we have to perform the same logic, and basically reproduce the same code over and over again. This is where factories come in, if we build a factory like this
   1: public static class DataFactories
   2: {
   3:     public static IContactData GetContactInterface(bool isLocal)
   4:     {
   5:         IContactData myContactData;
   6:         if (isLocal)
   7:         {
   8:             myContactData = new LocalContactData();
   9:         }
  10:         else
  11:         {
  12:             myContactData= new ContactData();
  13:         }
  14:         return myContactData;
  15:     }
  16: }

Then we just implement it like this

   1: public IContactData ContactData
   2: {
   3:     get
   4:     {
   5:         if (contactData==null)
   6:         {
   7:             contactData = DataFactories.GetContactInterface(UseLocalContacts);
   8:         }
   9:         return contactData;
  10:     }
  11:     set
  12:     {
  13:         contactData = value;
  14:     }
  15: }

your applications don’t know or care how they got there class for getting contact all they know is they did, where this really comes in handy is if you have to change out how you handle your local contacts from let’s say an xml file to a database, the only place you have to change your code is in the factory.

Congratulations you are now 90% of the way there for using a IOC container, you have a single place for handling all of your instantiation so once you decide to use IOC you just change how the factory works from having logic that decides what class to insatiate to pulling it from the IOC container, it’s that simple.

Truth be told I always start with a factory and then later “IF” I need the functionality of an IOC I’ll add it. In the end an IOC container really isn’t nearly as scary as it seems to be, and in the same token it isn’t nearly a vital as some people would like to claim, it’s a tool that can be used to solve specific problems, but 90% of the same problems can be solved using a factory.