Building Infragistics Quince – UX Patterns Explorer

On Monday we shipped Quince. I was part of the team that build it, and we are very happy with the results. You can read the official announcement and description here.

Building Quince was a lot of fun.

We had a UX team and a Visual Design team working with us from the start so we could focus in the code without worrying what the textblocks’ captions should be or which color should we use. For me, choosing the right words for the captions is always a pain so this was relieving. Our main UX designer loves words so we had that covered.

We used the latest Microsoft technologies to build it (Entity Framework, WCF REST, WCF REST Starting Kit, Visual Studio for Database Professionals, Team Foundation Server), a set of great open source tools (AutoFac for both the Silverlight client and the backend, Log4Net in the server and CLog in the client, Moq for mocking both in Silverlight and the backend), some not-as-fun technology as Sharepoint and the Open XML toolkit (the patterns are Word documents stored in a sharepoint library that we parse, reshape, and convert to HTML).

The team did not have much Silverlight experience, so we all learned a lot during the process, and we are learning a lot about how real-world Silverlight applications behave in production. More posts about that later.

The Silverlight app was built using Model-View-ViewModel with the same approach described by Julan Dominguez here. We also used the Prism EventAggregator. We did not have Prism for Silverlight at that time so we did not evaluate using it.

The Silverlight client has a lot of cool functionality. My favorites ones are:

• Support for back/forward button and deep linking, which is tricky do to in a way that works in all browsers. It’s very browser specific. It also implies architecting the application in a way it can restore its state based on the URL values, which in our case implied encoding all the application state in the URL. We did not have a lot of state so it wasn’t a bad solution.
• The ‘Explore By Tag’ graph visualizer. I actually like the way it bounces so much that I asked the guy who did it to provide me a way to make it bounce whenever I want. Our UX designer decided that we needed to ‘shake’ it to make that happen, and that meant you need to click your mouse, shake it 3 times, and release it. I’m still not proficient in shaking but I’m getting better.

Quince generated a lot of buzz. It was fun to start monitoring Google on Monday and searching for ‘infragistics quince’ and not finding any link, and trying an hour later and start to see what people were saying. There was a lot of action happening in Twitter too. We even got to be second in delicious ‘most popular bookmarks now’, which was amazing (I have a screenshot to prove it ;) ).