Migrating a Legacy Web Forms Application to Web Forms MVP

Since I put “Legacy” in the post title to begin with, I would like to share some quotes from the often quoted Michael Feathers author of Working Effectively with Legacy Code. If you haven’t read it, you should – it comes highly recommended by many developers including Scott Hanselman on this Hanselminutes episode. But full disclosure I myself have only read a few random sections of it here and there.

Working Effectively with Legacy Code

What do you think about when you hear the term legacy code? If you are at all like me, you think of tangled, unintelligible structure, code that you have to change but don’t really understand. You think of sleepless nights trying to add in features that should be easy to add, and you think of demoralization, the sense that everyone on the team is so sick of a code base that it seems beyond care, the sort of code that you just wish would die.
–Feathers

This I strongly agree with, not to say that legacy code is always “unintelligible” or you want the code “to die”, but very often it requires a much larger unit of time to change when compared to more desirable (maintainable) code, which leads to this quote:

In the industry, legacy code is often used as a slang term for difficult-to-change code that we don’t understand.
–Feathers

This can be remedied in part by unit-tests…

Code without tests is bad code. It doesn’t matter how well written it is; it doesn’t matter how pretty or object-oriented or well-encapsulated it is. With tests, we can change the behavior of our code quickly and verifiably. Without them, we really don’t know if our code is getting better or worse.
–Feathers

That last quote from Feathers helps to outline my motives…

At my current place of employment we have a flagship application that was originally built using ASP.NET 1.1. Then slowly migrated to .NET framework 2.0 and then immediately converted for .NET framework 3.5. That task itself was not trivial, and now there is a new challenge to make the code more maintainable.

The legacy system was written in … but it worked, and it worked great … It was legacy because it wasn’t done with new and shiny…
–Hanselman

Hanselman makes a good point even though I paraphrased so it’s a more general statement. This applies to the application I’m working on improving. The application was in fact working “fine” in its .NET 1.1 form, but making changes/improvements was difficult. When I say difficult in this case I, in particular mean for new developers not familiar with the code base and application. Being the newest developer to work on this, I wanted the code base to improve so we could all make changes and improvements with confidence going forward.

This is the first in yet another series of posts from me. This series will focus on how we’ve gone about undertaking this migration. I’ll attempt to make each post stand reasonably alone to demonstrate migrating a specific application component from Web Forms to the Model-View-Presenter (MVP) pattern and in particular the Web Forms MVP framework.

Some of the objectives that we’re trying to achieve from this framework migration include:

blog.fossmo.net MVP diagram

This also leads down the path of improved development practices for the team:

silverbullet

So then what…

Web Forms by design does not lend itself to achieving all the objectives listed above and it is hoped that the use of the Web Forms MVP framework will take us down a better path. I say this with full understanding that there is no such thing as a Silver Bullet in software development, and that the adoption of a pattern and a supporting framework are just steps we are taking.

We’ve come this far in the post and I haven’t exactly outlined what Web Forms MVP is and why it’s our choice. So first, how about the obligatory pasting of the front page quote from the official project site:

The ASP.NET Web Forms MVP project is about bringing the love back to Web Forms through a renewed approach to using it – an approach that facilitates separation of concerns and testability whilst maintaining the rapid development that Web Forms was built to deliver.
WebFormsMVP.com

The choice to use Web Forms MVP as the framework to help us achieve the MVP pattern in our application, comes from the knowledge of successful implementations by Readify on large scale sites such as Grays Online. Along with an active community of developers working on the framework and its acceptance into the CodePlex Foundation.

Examples coming up…

Now that we’ve got the background and I’ve publicly committed to “better code” and “testable code”, the next post in this series will be about moving your OnLoad & Page_Load methods out of your code-behind files and some of the challenges.

Advertisements

What is Pivot – from Microsoft Live Labs?

Pivot a research product currently available from GetPivot.com from Microsoft Live Labs. It uses technology from Seadragon – Deep Zoom technology also of MS Live Labs.

logo-pivot

A quote from the Pivot team:

“We tried to step back and design an interaction model that accommodates the complexity and scale of information rather than the traditional structure of the Web.”

Which translates into the ability to aggregate and interpolate large data sets.

If I’m losing you, this is a must see 5 minute TED 2010 video presented by Gary Flake.

Pivot User Interface

Pivot itself is an advanced type of web browser that facilitates this, but…

It is many things:

  • “The ability to slice and dice data.”
  • “Allows for the whole to be greater than the sum of the parts.”
  • “Lets you move from the tiniest detail, to the full scope of the entire set of the information.”
  • “Build a connection to the data, and be immersed.”
  • “Making large sets of data more approachable.”
  • “Empowering people to create new types of collections, and new types of experience from the interaction.”

That last point struck a chord with me, and I will attempt to create a simple collection. A collection in this case is a set of items with common attributes, ranging from hundreds to thousands to millions of items.

Collection Types

Pivot Collection Types

Pivot Collection Types

Steps to building a collection:

  1. Select your content; determine your linking level (diagram above).
  2. Expose your data in a way you can build the collection. OData service is an option.
  3. Build the cXML (Collection XML file).
  4. Navigate to the CXML file.
  5. Or navigate to the hosted version of the data set. (See Pivot API for .NET)

Navigate:
Pivot Navigation Bar

Resources and sources of quotes/images:

REMIX Melbourne 2010 Day 2

Kicking off Day 2. See the Day 1 post here.

Session 1
Web development with Visual Studio 2010 & ASP.NET 4
Alex Mackey

alex multi targetting

My day 2 began with Alex running through a cavalcade of improvements in Visual Studio 2010 and ASP.NET 4. These have been covered in great detail all over the place, but it is still nice to have them presented and demonstrated live allowing for feedback and questions.

Alex focussed on JavaScript and deployment general tips, along with touching on other areas.

I won’t cover off all the tips and tricks that Alex covered here, I’ll just link off to a good resource which is Scott Gu’s series on this.

Session 2
Riding the Geolocation Wave
Tatham Oddie

Tatham Geolocation

This was a great session, I hadn’t thought about the possibilities of geolocation to improve application experience. Tatham introduced the concepts and then demonstrated a simple pizza delivery application that tapped into the users current location (with their consent) to pre-seed a location aware list of options. The good news is that Windows 7 has geolocation support built in. We’ve already been using services on devices such as iPhone that use the assisted-gps (A-GPS) to tag things such as tweets with your location, drop a marker on Google maps with your current location and offer directions.

For resources and more information see Tatham’s blog post here.

Session 3
The future of exposing, visualising and interacting with data on the web.
Graham Elliot

Graham throwing punches

In this session OData was introduced in more detail to the REMIX audience. I’m covering off the basics of OData in a series myself so go check that out here.

The most audience pleasing concept demonstrated was the use of the awesome Microsoft Labs – Pivot available at GetPivot.com. It is a visual data interaction tool. To save me from failing to do it justice in a few lines of text, check out this 5 minute TED 2010 video presented by Gary Flake on Pivot.

Lunch & Live Frankly Speaking
Taping of Frankly Speaking
Michael Kordahi, Andrew Coates and guests.

Frankly Speaking

The REMIX audience during lunch got to be the live studio audience for a taping of Frankly Speaking. I’ll post a link to the episode here when it’s up.

Note the donkey is a reference to “taking the donkey work out of installation” – promoting the Web Platform Installer for Windows. It’s very handy check it out.

Labs
I didn’t end up going to any of the session in the slots 4 & 5. I joined a few colleagues in the labs.

remix labs

The first lab I attended was the XNA development introduction for Windows Phone 7. The lab was run by Luke Drumm (@lzcd) and Glenn Wilson (@myker). Glenn runs a blog focussed on this kind of development – virtualrealm.com.au

The second lab I attended was run by Steven Nagy, and was intended to get us configuring Azure AppFabric but some major hiccups like not having the lab PCs setup with internet access and some other mis-configured components prevented us from following along. None-the-less the lab ended up just being a discussion extension from Day 1s presentation on Azure. Several people had a lot of questions about actual deployment, from SLAs to locations to security.

Session 6
Pimp My App
Shane Morris

shanemo design tips

With the event coming to a close, it was nice to sit back and listen to the talented Shane Morris of Automatic Studio (former MS UX Guy) giving some basic design tips for developers to follow to ensure apps don’t suffer due to lack of professional designer input. There were 2 cool links to colour scheme assisting sites; kuler and Colour Lovers

There was a fair bit of discussion, analysis and reasoning provided by Shane, so I’ll just list out the conclusion slides.

Layout Steps:

  1. Map out the workflow.
  2. List your contents.
  3. Layout elements.
  4. Check grouping.

Presentation Steps:

  1. Remove unnecessary items.
  2. Minimise variation.
  3. Line stuff up.
  4. Space and size components evenly.
  5. Indicate grouping.
  6. Adjust visual weight.

Final Summary
All-in-all REMIX was a great 2 day event, and for the early bird price of < $200 was a bargain, when you factored in all you can drink coffee, buffet lunches and after party. Having already published my brief summary, all I can say here is that if you have the opportunity to attend REMIX, take it.

REMIX Melbourne 2010 Day 1

Keynote
Michael Kordahi, Foxtel (Patrick Delany), Shane Morris & Others

remix keynote

The keynote began with a presentation from Foxtel about improving the “dumb box” that’s plugged into your TV. Foxtel through a partnership with XBOX Live (and Microsoft) is attempting improve the user experience in the home when it comes to pay-television. They are following the “three screen and the cloud” strategy that Microsoft is currently engaged in.

This lead into a demo of using the Microsoft Surface to interact with various Foxtel services. The objective being that the Microsoft Surface can be one of the three screens. A more social experience to support discussion and digital interaction between people (once the Surface less financially inhibitive). The demo consisted of an application that allowed for interaction between a Windows Phone 7 device, the Surface and a slate like device, where-as the device would detect proximity/engagement in another digital activity (in this case watching Foxtel). Then subsequent devices (the slate) would offer to assist in the interaction, by offering supporting information, show/character information, maps of locations and other rich interactions.

The second half of the keynote was a few short introductory sessions on;

  • IE9 – Features/demos and road-map.
  • Expression Blend – Some new features in 4.
  • User eXperience – Sneak peak at Shane’s session.
  • Microsoft Live Labs Pivot – Introducing OData.
  • Windows Phone 7 – The developer experience.

Summary line: The objective is to create an ongoing journey on the web (and not be focussed simply on destinations).

Session 1
“The Microsoft & jQuery story & the new templating plugin”
James Senior

James Senior First Date

James started talking about the focus shift of Microsoft towards open source projects and how they are contributing to jQuery (this was announced at Mix in March 2010). This came about from the ASP.NET Ajax library that MS was working was a prime candidate for integration with jQuery (through contribution). James had a great story about John Resig “assisting him” with some code, John achieved this by first doing a select all followed by hitting the delete key then refactoring from memory, James was amazed.

From this there were some tips for “good relationships” in terms of contributing to software:

  1. Clear contribution model.
  2. Open, transparent, collaboration.
  3. Community spirit.
  4. Specification and proposal.
  5. Prototypes.

The rest of the session was focussed on using Visual Studio 2010 to assist with JavaScript. James outlined how VS2010 compiles the JavaScript dynamically on the fly to offer intellisense. This was done through (the very popular for demos approach) of implement a Twitter search application. In relation to this James suggested we check out; Hootsuite – a based twitter client. Also to stay away from global trending topics on twitter 😉

The use of the twitter search demo application was focussed in particular to demonstrate the initial contribution Microsoft is undertaking for jQuery – Templating. Which is a feature to assist with displaying/rendering data from a source, via a new render() method.

James had a plug for Microsoft Web Camps, and from what he had to say about it, if there’s one near you attend if you can, it’s free. After the US summer there’s plans for more around the world…

Session 2
DotNetNuke: From opensource to VC funded corporation
Philip Beadle

phil and the pie

This was a very different session that the usual one (and in a good way). Phil gave some insights into the history and how it relates to his adventure with DotNetNuke. It started as early as 2001,2002 as an open source CMS. A few years ago had grown a company paying 7 employees offering support and other services in relation to DNN. It has in the present day reached around 40 paid employees after a few rounds of venture capital funding and is a fully fledged company. Phil had some advice for “getting paid in open source”, this was a general topic and in response to a direction question. Phil’s discussion was along the lines of; ensure the “pie” is large enough so that your piece is as good as having a whole pie… The rationale behind this was, if it’s a large pie with lots of contributors the burden on the individual is less when compared to being responsible alone for an entire pie.

Phil shed some insights from his extensive experience; these are the key takeaways for a successful open source product:

  • Need a good dedicated thick skinned leader.
  • Protection of code and community is essential.
  • Communication is key.
  • Recognition for those that help and further engage/promote (give kudos).
  • Documentation is necessary.
  • Always offer an upgrade path for users of your product.

Session 3
Architecting for the Cloud
Steven Nagy

snagy

Steve after introducing Windows Azure, focussed on some real world case studies of companies making use of the cloud, in particular the Azure platform to grow and improve their business.

Case studies:

  • Company: Connect2Filed. Service: job/customer/billing management internal Software as a Service.
  • Company: CaterExpress. Service: foodstorm. Software as a Service customer and food management application.
  • Company: Buzz number (BizSpark start-up). Product: blogosaur.us – sophisticated blogging search engine / aggregator

Scaling considerations, typically 4 types

  • On/off (typical business hours, localised to only a few timezones).
  • Grow fast (startup).
  • Unpredictable (slashdotted).
  • Predictable (peak times of year).

Takeaways about Azure as a hosting platform

  • Potentially cheaper.
  • Easier (helpful for a start-up).
  • Less risk (redundancy taken care of for you – 3 factor redundancy).
  • Scalable.

Session 4
ASP.NET MVC 2
Malcolm Sheridan

malcolm head down

Malcolm ran through an MVC 2 demo application, focussing on:

  • Strongly typed helpers.
  • Templated helpers.
  • Metadata classes (and validation).
  • Areas (areas in different projects is available in the ASP.NET MVC futures).
  • Security (via auto html encoding – “&lt%:” and MvcHtmlString as the return type for helpers).
  • Improved RESTful approach (via HttpMethodOverride eg [HttpDelete]).
  • DefaultValueAttribute.
  • Shortened HTTP verbs.
  • ChildActionOnly actions.

I’ve scattered some links throughout the list above, check out those references.

Also checkout this white paper on what’s new in ASP.NET MVC 2.