Jose Fajardo

Thursday March 06, 2008

Live Messenger done with Silverlight 2.0 - the beginning

In this series of post's I will rebuild the Windows Live Messenger as a Silverlight 2.0 application. This is going to be a great project to build using the Silverlight 2.0 stack as most of the components required for this application can be found in the new features of Silverlight 2.0 beta.

So why am I choosing to build Live Messenger in Silverlight 2.0 beta? And why messenger?

Messenger despite the simplicity of what it does is an extremely complex application. It has this social aspect to it that in its current state just does not take advantage of. The current Live Messenger can be so much more, and my goal is to build out messenger to realize it's full potential. Using some new features in Silverlight 2.0 beta I feel like I can truly elevate Messenger above what it currently is to something truly amazing.

In this project I plan on showcasing some of the coolest and most power features that Silverlight has to offer, these are

1. Control Framework

2. Standard controls and 100% skinning these controls

3. Databinding

4. WebServices

5. IsolatedStorage

6. DeepZoom (Seadragon)

7. Ports and Networking

8. Splash pages

9. Dll & Module downloading model

10. Rich graphics & Animation

11. Video and Audio enhancements

12. Customized Install process for Silverlight Plugin

13. Blinding performance improvements

I also plan on showing off features of other technologies such as

1. Expression Blend - powerful designer / developer interaction

2. Tweener for Silverlight

Also this project will take into account the new worlds available for Silverlight

1. Desktop Browser - cross platform / cross browser

2. Mobile devices

3. Tablets

4. etc.. whatever can run Silverlight ...

Sorry for not going into too much details regarding these Silverlight 2.0 features, there will be plenty of time for that later. Each feature will be expanded on in future blog postings and trust me by the time were done with this application you will be experts in the above features.

This project is going to be huge, and I decided to make it huge because I really wanted to show people the power bottled up in Silverlight. What better way to show this off then in a real world application that people are already familiar with.

Screen concepts (straight from live messenger)

Let's imagine that a user experience (UX) person or graphic artist (GA) gave you the following mockups. What would you do with these mockups?

figure 1 : above images show the "Login" and the "Home" pages respectively.

figure 2 : resized home page that shows which bits get resized

figure 3 : above page is the "user profile" page

figure 4 : above page is a "chat window"

These screen shots are straight from my current version of Live Messenger. They do not show any of the changes that I am wanting to do to really take advantage of the new features of Silverlight 2.0

The new Live Messenger on Silverlight will be completely different, it will still be based on the above screen shots but it will have so many more features around a social aspect and make use of Silverlight 2.0 beta new features.

The next couple of blog post's will build out the basic screens, we will take the above mockups and see how to create Silverlight layouts (mainly grid and stackpanels) with them. After we've created the bare layouts will start building out the common functions already in Live Messenger and once that is done we will build in new features :)

This is going to be a long journey and I hope that you join me for the duration of this adventure. Bare in mind that I too am coming to grips with these new features and this new world revolving around Silverlight.

Stay tuned and remember to to keep on sharing!