Due to a recent success story I've had with a very large Silverlight project I'm compelled to speak up about a topic that I consider exceedingly important to software development and in particular Silverlight and Windows Phone Development. I normally focus on design and interaction specific topics regarding Microsoft's UI and User Experience technology advancements but today I want to bring to light another topic, Design Patterns. I'm not talking about UI Patterns or specific User Experience Patterns that impacts Usability, accessibility and the overall success on your interactive application. I'm talking more specifically about Software Design Patterns. That subject you remember hearing about in College or University way back and forgot or think that it's something only engineers have to deal with. To recap, a design pattern is a general reusable solution to a commonly occurring problem in software design. This might sound a little juvenile but you'd be surprised how many developers I meet who just don't follow them and are totally oblivious to their importance. What is under the hood in Silverlight is packed with several design patterns, some old and a lot are new, but its these new ones that are important and really gives Silverlight it`s power. The result of these patterns is an unmatched level of productivity and robustness for both programmers and interaction designers when creating applications with Silverlight for the Web or Windows Phone. All of that Microsoft ingenuity goes to waste if there is ignorance of these patterns and how to use and implement them. I won't go into the details of these advantages because there is just too much here for a single article, but I will cover this soon.

In this specific example I was brought mid-way into the development of fairly large project using Silverlight as the Interactive Client for customers to use. After a few minutes I realized there was no resemblance of any standard Silverlight specific structural patterns being used and information was being directly referenced in Silverlight's UI controls without the use of the widely used Binding pattern. Every task was resolved with aggressive spaghetti code inside the code-behind files of the Silverlight application. And this had been going on for roughly a year, no joke. Oddly enough, this wasn't the only time I've experienced this. Three of the major projects I have been involved with have completely fumbled their projects in this manner. I suspect this is due to assumptions made about Silverlight that are based on previous experiences with other RIA technologies like Flash or web pages. What ended up happening was un-manageable code, a loss in a separation of concerns imposing development bureaucracy, code that wasn't compatible with Interaction Design tools like Expression Blend resulting in the Designers sitting on their hands while they wait for developers to implement their ideas, and a whole mess of other problems. Trust me, just reading the standards articles on Microsoft`s Patterns and Practices website will save you a whole lot of trouble and ensures all parties involved on the project can work in isolation. So do everyone a favour, go there right now!!

There is a happy ending to this story however. After roughly 4 months of intense work we implemented a very basic version of the MVVM software pattern and stripped out all direct references and code behind with Binding expressions. Once that was done the interaction designers were able to use Blend to implement their interactions without needing permission, Programmers were able to implement their business logic without interruptions, and managers became much less stressed with managing individual tasks to meet deadlines. And everyone has come out of the experience with a renewed appreciation of Silverlight and the experience needed to develop truly interactive applications. So in a sense, simply following the appropriate Silverlight Design Patterns had saved their application and quite possibly their business.

Here is a simple must know check list to set you on the right track with Silverlight and Windows Phone Development.

1. Learn about the Parts and States Model.
http://msdn.microsoft.com/en-us/library/cc278064%28v=vs.95%29.aspx
http://www.vsj.co.uk/articles/display.asp?id=814

2. Learn about the Dependency Property Model as it relates to Data Binding.
http://msdn.microsoft.com/en-us/library/cc221408%28v=vs.95%29.aspx
http://dotnetslackers.com/articles/silverlight/Dependency-properties-in-Silverlight.aspx#s1-1

3. Inform yourself on the various Structural Patterns recommended by Microsoft.
http://msdn.microsoft.com/en-us/practices/cc305074

4. Get up to date with MVVM and Prism Development Patterns.
http://www.galasoft.ch/mvvm/
http://mvvmlight.codeplex.com/
http://compositewpf.codeplex.com/

5. Practice with tutorials and labs.
http://www.silverlight.net/learn/

If you've ever built a lot of Silverlight or WPF applications like I have you'll often encounter UI problems which requires you to understand what is actually being drawn to the screen and inspect the visual tree to get anywhere when trouble shooting your UI. Unfortunately, out of the box visual studios doesn't offer any tools to aid you with inspecting your UI but I have come across a few very useful ones that have quite literally saved my butt on many occasions. The two that has served me the most is Silverlight Spy from First Floor Software and UISpy. Silverlight Spy would be my first choice because it enables you to explore the UI element tree, monitor events, extract XAML, interactively execute DLR code, view statistics, do profiling, and whole bunch of other features you'll find useful. The only downside is it only works with Silverlight and on rare occasions, depending on how your application is built, it doesn't always work. When that happens I fall-back to UISpy, which has a fraction of the features of Silverlight Spy but always works and lets you inspect any application on your desktop that's running .Net. Simply run UISpy.exe then Control+Hover anything on your desktop and UISpy will move down the visual tree and find it.

If you've ever tried looking for UISpy on the internet you'll most likely have a hard time finding it due to it being a part of a large Microsoft Windows SDK. So I’ve saved you the trouble and added it to this post. Enjoy

uispy.zip (124.08 kb)

Here is a list of some other usefull tools I've come across.

• WPF Inspector - visual debugging for WPF
• XAML Power Toys
• Mole for Visual Studio
• Snoop - A collection of visual debugging helpers
• StyleSnooper - View styles of controls
• Show me the template
• ProtoXAML - A stencil UI skin for WPF paper prototypes
• Crack.NET - A runtime debugging and scripting tool to access internals of .NET applications
• Pistachio - Resource Visualizer
• XAML Type explorer

It's been a while since I posted anything due to some mission critical projects and Silverlight training which has been keeping me pretty busy but I feel compelled to speak up about online claims that HTML5 will replace Silverlight and other completely unfounded claims about the future of both. The problem is partly due to superficial feature comparisons and emphasis on reach of either technology. But if you look at each other’s history and purpose you’ll realize that in actual fact, they exist for different reasons and are meant to co-exist.

Not too long ago I posted an article titled "The new Iteration" giving a relatively brief explanation of various Developer Designer workflow paradigms and how Microsoft has addressed them with the XAML Language and the tools that help bridge the gap between Development and Design. If you haven't read it here it is again. Because XAML is such a close XML-like representation of code and easily generated by Microsoft tools like Expression Blend, the barriers between designer and developer are blurred and drastically changes the development dynamic by shifting the ownership of the presentation code to the Designers. But what's so great about that you might ask? As the intensity for better user interfaces in computing devices in various form factors ramps up, more aggressive research and iterative practices are put in place with the introduction of almost mandatory UX Design principles. Putting even more demands on Design and Development, and the traditional "Waterfall-esc" development methodologies just doesn't cut it in today technology climate. To sum this up, development teams need to be able to change interactive features and application specifications on the fly and do it fast in order to adapt to whatever the UX Researchers discover in the minds of the consumer or in the tech space as a whole. To adapt to this increasing demand, UI technologies need a highly matured level of UI abstractions so designers and developers can work out complex interactive designs seamlessly and collaboratively. And with the guidance of Microsoft's Lead Interactive Researcher Bill Buxton, and various big wigs at Microsoft, Silverlight handles this beautifully.

HTML5 has an altogether different purpose, in which it is also a XML based mark-up language but has a evolved to be purely about semantics and less about extensibility and programmability. Therefor resistant to fit into more complex programming models needed to realize more elaborate interactive technologies. HTML by design is meant to describe information and transmitted in plain text so it can be consumed and easily discerned by online content readers and brought to the screen using web browsers. This is what gives HTML an advantage over RIA technologies and what make HTML and the web so powerful. Plus it is an open technology that fit right into the ideals of free exchange of information over the web. HTML has become such a ubiquitous part of the web there is no doubt there will be any replacements for many decades to come.

To get to my point, in a sense I find it confusing to why the online community regards the advent of HTML5 such a massive step in innovation when in fact it isn't at all. The only thing HTML5 brings is features that have already been full realized in other well established Rich UI technologies, including Silverlight, which absolutely dwarfs HTML's individual feature set. HTML5 merely brings these way overdue watered down features into the semantic web. The richness engine behind HTML5 is still JavaScript and the combination of the two leads to immature application structures that are resistant to change and is still a UX and design integration nightmare. The result is a level of interactivity innovation that will never compare to what technologies like Silverlight can offer. But as I mentioned above, it doesn't really matter. HTML5 will be present to provide consumable web content while offering more flexibility to do more with the browser while Rich Plug-ins like Silverlight compliments HTML making it more interesting and beautiful to experience.

Here are a few supporting articles:
Top 10 Reasons why HTML 5 is not ready to replace Silverlight
http://silverlighthack.com/post/2010/02/08/Top-Reasons-why-HTML-5-is-not-ready-to-replace-Silverlight.aspx

HTML5, XAML and Declarative User Interfaces
http://wildermuth.com/2010/08/31/HTML5_XAML_and_Declarative_User_Interfaces

Semantics and HTML - Conjoined twins of the Future Web!
http://www.1stwebdesigner.com/design/html-and-semantics-conjoined-twins-of-the-future-web/

Microsoft and User Experience
http://wpftutorial.net/Workflow.html

I came across this insightful article posted by Forbes Magazine during my late night read-athon. A long time IPhone user was given the new Windows Phone 7 and asked to comment on it and contains a rebuttal from Microsoft on each point. Turns out the comments are largely subjective to what a long time IPhone user is accustomed to. This confirms that Familiarity is a more dominate physiological factor then the perception of better Functionality explained in the Effective UI book, which is a required read in my opinion for anyone in or trying to get in the UX/UI space. For the most part Familiarity is the main reason why UI patterns exist and is part of the decision making all of us Interactive designers and developers. And is the main reason why IPhone users are so hard to shake. It's also interesting to point out that the individual returned back to the IPhone after using the Windows Phone but by no means unexpected. I would be intrigued to read a study where first time Smart Phone buyers, not tainted by Familiarity, had to choose between different smart phones and what the result would be. I’ve used both and personally prefer a more Information Aggregator (WP7) approach as opposed to and App Launcher (IPhone) as a mobile platform. To new prospective Smart Phone buyers out there, try not to gravitate towards Familiarity and embrace new innovations in interactivity. You might miss out on a unique mobile experience that you might have not known existed.

http://blogs.forbes.com/elizabethwoyke/2010/12/13/commenters-say-dont-knock-windows-phone-7-prematurely/?partner=yahootix

First a foremost I would like to welcome everyone to my new blog. I've been meaning to do this for some time now in my 10 years of designing and developing Rich Experiences on web and now more recently with Microsoft Silverlight and Windows Mobile. Plus a lot of my colleagues have been pressuring me to start one. I will begin with posting one of my favourite articles which discusses one of my favourite topics in my professional carrier as a RIA developer. The promise for better experiences and interactivity in software applications presents various paradoxes and the road between artistic vision and sound/robust development isn't always an obvious or bright one. The article explains various important points and how Microsoft has addressed these with the invention of XAML/WPF and Silverlight and the tools that brings it all together. The article is primarily geared towards Designers, Integrators and organizers and does not cover the finer points concerning Developers but is a great primer to understand the concerns Designers and Developers face in the world of developing interactive software. I will provide my insight on the development in my next post.

http://windowsclient.net/wpf/white-papers/thenewiteration.aspx