CompletIT – the company behind SilverlightShow – has recently launched its new corporate website, done entirely in Silverlight. In this case study, CompletIT CTO Emil Stoychev and Development Lead Miroslav Miroslavov reveal the challenges faced during the management and development of this Silverlight project.
Company Profile
Company name: CompletIT
Website: http://www.completit.com/
Industry: Software Development, Consultations, Trainings
Brief intro to company: CompletIT is a privately owned company specialized in Silverlight software development, Silverlight training and consulting services. Founded in 2006, the company has successfully delivered more than 30 customer projects, ranging from small business applications to large enterprise solutions. CompletIT was selected as Microsoft Featured Silverlight Partner for March 2010, and is a Microsoft Certified Gold Partner.
Project Overview
Project goals and key functionalities
The main goal of the project was to show what CompletIT can do with Silverlight without saying a word. We wanted to demonstrate to our website visitors (who are our current or potential customers) what can be achieved with Silverlight, what a powerful technology it is, what level of interactivity may be achieved with it, how the user experience may be improved by using Silverlight. Among the key functionalities in the project are flying 3D objects, interactive navigation with some object flying in the clouds, animated page flipping, animated 360˚ navigation flip, 3D world in which you can move.
Project limitations - technologies to be used, time, resources, etc.
We are focused on Silverlight so that technology was a must. It was hard to estimate the project duration as the application was too futuristic and nothing like what we've been working on before. We decided on a fairly optimistic timeframe for completion of the project, and only because of the commitment and experience of the whole team we managed to meet it.
Silverlight features used in this project
- Animations:
- Build-in animations API based on Storyboards
- Custom animations based on CompositionTarget.Rendering
- Custom animations based on DispatcherTimer
- Sprite animations
- WriteableBitmap API for performance optimizations
- 3D Projection API
- Render Transforms API
- ScaleTransform
- TranslateTransform
- RotateTransform
- SkewTransform
- Math formulas
- Mouse events API
- Custom controls and templates
- WCF - Silverlight enabled services
- Third-party Silverlight control
Other technologies used
WCF services, Sitefinity CMS
Project snapshots - before / after
Problems Faced and Solutions
One of the hardest problems was "How to make smoke effect?"
We've tried a lot of ideas and read almost everything on the net about "how to simulate smoke", but all of them had problems and they weren't exactly what we needed. But finally we came up with the solution on our own. We've created a Sprite-like animation with preset frames, some custom control logic and finally - we had a great smoking main menu!
Another huge problem was "How to make the whole application deep-linkable, navigateable and fully integrated with browsers?"
We needed to be integrated with the browser, but also the pages had to navigate to each other using animation. We thought about using TransitioningContentControl from the Silverlight Toolkit, but instead of control we needed to transition between pages. And that's how we came up with solution. Now we have nice transitions and animations while navigating back and forward.
The whole look and feel of the site is amazing. But how can all of this work in the browser, and perform well enough?
Performance was the hardest thing to deal with. We read a lot of blogs and articles, watched a lot of videos from the biggest conferences. Finally, we summarized all performance tips and tricks and implemented most of them. We also created some custom animation logic to achieve better performance. We ended up with a very well-performing website (considering all these nice animations).
Of course all the features like 3D world and the animations in it, flying and floating things were also interesting problems. But with the very powerful Silverlight APIs, we've been able to implement them with ease.
Conclusions
We think we managed to achieve the initial goals of the project, because we received a lot of positive feedback, a lot of compliments for our work. There aren't many Silverlight based application on the web that incorporate so many animations and interactivity. The final performance that we achieved is more than pleasant - we got around 30% CPU usage which talks both for the platform and for the quality of our applications. For comparison, most of the DeepZoom based applications use more than 70% of CPU.
People like interactivity, animations, weird design ideas and we think Silverlight is more than appropriate to build that kind of stuff. For future projects we would definitely bet on great user experience and interactivity.
Related Articles: