Friday, February 6, 2009

Some Guidelines For Developing Silverlight Applications

Hi,
Here are some basic guidelines for building Silverlight applications. They are based on the problems I have faced and seen. Keep in mind none of them are rules, and you can (you should actually) follow only some of them as it suits.

1. Use source control :

Use source control even if you are solo developer.

2. Plan all user controls as early as possible:

Plan your modules early. This will help you plan how to do interaction between them early and you don't have to do some ad-hock fix later. Create them and have some basic methods like Initialize and Deinitialize inside them.(see point 5)

3. Separate each part into a user control:

a. It will help many people working in the same application without much side effect on another control.
b. It helps isolate any problem to a small region so that it would become easy to rectify it.
c. It helps reuse the same control in different places.

Add some classes for basic functionality like checking for URL format or parsing an xml. You can make separate library if they are big enough.

4. Loaded event is harmful:

Do not rely on the loaded events. Why? In one application I was adding and removing an user control when needed, dynamically from code. Each time I was not creating a new object. Instead I was reusing the same one. Now I have attached the MouseLeftButtonDown event inside the loaded event of that user control. What was happening is this. Each time I was adding the user control the loaded event was getting fired and the event was been attached again. So the event handlers are fired multiple times. So adding and removing the user control a few times was making the application run very slow. It took me a hell lot of time to find out why.

So where to put the event handlers? See below.

5. Initialize and Deinitialize :
Put one Initialize and one Deinitialize public method in every user control you make. It is useful in many ways.

a. You can add the event handlers and other code that must run only once inside Initialize
method.

b. You can pass parameters to Initialize method without disturbing the constructor signature
or adding a new constructor. So new YourUserControl ( ) will always work.

c. You can use Deinitialize method to clean up the control. This is specifically required when
you are showing some customized content to the user and need to change it when user
signs out or another user signs in.

Now while creating the user control for the first time you should call the Initialize method with proper parameters.

One disadvantage of this approach is it has the feeling of evil destructors in c++. You need to be careful while calling these two methods.

6. Don't put your event handlers from xaml:

While is perfectly legal to add event handlers from xaml it is better to do it from code. Reason is...

a. Xaml belongs to designers. Event handling belongs to programmers. So its easy to attach
or detach event handlers from code without disturbing the xaml.

b. Suppose you have attached event handler to a control from code. Now if the name of the
control is changed or the control is been removed from xaml you will get an compilation
error with clear meaning. Now if you have written the event handler from xaml and
removed the appropriate method from code you will get an exception with less clear
message.

7. Select your layout carefully:
Take time to select proper layout. I can assure you it will save a lot of your time debugging later. Take your design mock up and think about how you can make the layout. Understand advantages and limitations of Grid, StackPanel, Canvas, Border, Popup, ScrollViewer etc. Some tips for choosing layout.

a. Most of the time you will find Grid is suitable for the top level container (root). This is specially true if your Silverlight application is occupied total page. You will find it containing header, footer and sometimes left and right module. These can be easily done with dividing main root grid with columns and rows.

b. For very complex structures inside the application you will find Canvas is best fitted. Specially if its height width is specified and has overlapped controls inside it.

c. While you are dividing your grid with rows and columns sometimes you will find you need only columns or only rows. Its time for choosing a StackPanel with proper orientation specified. StackPanel also adjust its children while new child is added or removed.

Though its personal preference I prefer to do the top level layout from Visual Studio or at least check the xaml structure in visual studio after making it in blend. It helps prevent some properties getting set automatically without your knowledge and to remove redundant code.

8. Avoid specifying height and width explicitly:

Make your application layout such a way you don't have to specify height and width for each control. Grid has many flexible features like Horizontal and Vertical Alignments, Row and Column properties. Use them wisely. If you make your layout structure carefully you will find most of the time you can avoid using height, width and margin. Also try to avoid negative values in margin. Most of the time it means you have chosen wrong horizontal alignment or vertical alignment property.

9. Don't put any secret inside your code:

Silverlight is a client side technology. Keep in mind all your code goes into users machine and can be easily decompiled to view the code. So never put any sensitive data inside code. Security is the most critical part in today's internet. Security is invisible as long it protects you but it is needed most. Think carefully and from the design phase of your application about security. Don't rely on security through obscurity.

10. Test individual user control:

After creating a user control run it directly from app.xaml.cs by setting the root visual to the control. Call initialize method with proper arguments and check if it works as expected. Test the application thoroughly and fix the slightest defect you found.

11. Don't use image as a button:

In Silverlight 1.0 we did not have any button control so we used some xaml or image for button.
In Silverlight 2 use a button and style it appropriately. It helps in the following way...

a. Maintaining states like mouse over or pressed.
b. Basic functionality like click. (No, click is not same as MouseLeftButtonDown event)
c. Use the same style without copying whole xaml.

This is also valid for all other controls.


12. Don't put redundant code:


Your code should look beautiful. Remove redundant code and simplify the logic as fer as possible. Auto generated codes sometimes generates lot of extra code if you use them in a wrong way. Clean them up.

13. Performance:

a. Reduce your xap size.
b. Reduce the loading time for total or different parts of your application.
c. Avoid windowless=true.
d. Crate vector graphics for simple images.

14. Use web services for server communication:

Silverlight runs on users machine so can not interect with server or database directly. There are many ways of doing it but the best and easiest way is using web services.
Use WCF services if possible.

15. Use Isolated Storage, but carefully:

Use Isolated storage. But DO NOT put any sensitive data there.

4 comments:

steve said...

We are living in an unprecedented social experiment.

Never so much technology has been available to everyone.
From a very young age, children start with a computer connected to the Internet then graduate very quickly in the name of parent security with mobile phones, they are the new generation of connected kids.
For these kids social interactivity is happening through emails, SMS and of course what it is called “Social” sites with the likes of Facebook and others.

Libu said...

Wonderful read. One of the best posts that I have read on your blog.Keep up!!

Tanmoy Rajguru (Code name MRGNI) said...

Thanks Libu. :)

Anonymous said...

it's really helpfull