MIX 10K Entry Techniques for reducing Silverlight code and XAML size February 10, 2010

Preface…

As commented here are the full techniques I have applied for reducing the size of my MIX 10K entry, the “Silverlight Magic Lantern”, which can be found at the url http://mix10k.visitmix.com/Entry/Details/261.

The main basis of my entry was “to surprise” and that’s not easy being this the MIX Conference & MIX Online assistants a mix of Designers and Developers, some 100% developers, others 100% Designers and some rare cases 50% each – or even more rare cases 60 to 70% each…

As for my entry to comment that it has tried to combine both wow factors, having coded in less than 10kb the following techniques:

- Bing search engine integration through REST.

- Usercontrol creation (for the knob) in very very small piece of code..

- Inverse kinematics programming – which btw I had never done before J. I’d like to thank Jeff Paries for his great book which covers some techniques on the matter… Btw, I bought the Flash Book as I did not know that there was a Silverlight one J. Now I have both.. you can get it here http://www.amazon.com/Foundation-Silverlight-Animation-Jeff-Paries/dp/143022407X – with no commission

- Magnifier effect – which was done initially with a shader (way cooler) and next with a writable bitmap in order to weigh less bytes L.

- Position the magnifier exactly where the inverse kinematics extreme was – that is no easy, believe me..

- Parallax effect with inverse-moving shadows, to provide a depth effect from the main front panel to the results at the back – At the end I had to take out the shadows in order to get more space available… L

Also I wanted to surprise graphically so I had the idea of enabling “skin interchange” but, sadly I had to take it out and let only one skin in place.. the nicest one of course… anyway it was way simple as it required only changing the source of the 6 images my entry uses… and it was implemented through a knob too .

Both of that got me the edge (I hope so at least) of being able to surprise both Designers and Developers.. and hopefully the Judges too – Anyway there are pretty good entries this year so, the best one will win!!! Good Luck to you all!!

Aaand… I will release the code (the one that is not fully compressed) in short so keep tuned…

The Techniques…

As, for the main topic of this post, the techniques used to reduce code size have been, in order of precedence:

1. Common sense à Taking out code not used, comments, blank lines, etc.

2. Use of Var if the type name declaration is bigger…

3. In some cases use global variables so they haven’t got to be declared over and over. I had to do some metrics to see how much I was using an int variable to see how much space it was taking and declare it globally. Not the thing you do in your everyday code..

4. Use Inline if’s instead of normal if’s.

5. If you apply a compare rule more than once, package it in a Boolean :

If you have:

If ((a ==b) &&( c!=z))&….

And

If ((a ==b) &&( c!=z))&….

You can do

G = ((a ==b) &&( c!=z))

And make

If (G & … everywhere else..

6. Change constants defined by its direct value that is depending on the length of its value and its use, obviously.

7. Reduce functions using anonymous functions. For example:

nextSegment.MouseLeftButtonUp += new MouseButtonEventHandler(nextSegment_MouseLeftButtonUp);

void nextSegment_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { zoomActivated = false; }

Can be converted into:

nextSegment.MouseLeftButtonUp += delegate(object s, MouseButtonEventArgs e){ zoomActivated = false; };

8. Use Object & Collection Initializers, like:

ksi.go(new List<string>() { “Small”, “Medium”, “Large” }, “Size”);

9. Reduce functions size c hanging the default parameters sender by s for example, as the previous code piece.

10. Reduce the use of the usings, that is easily done by deleting/commenting them all and resolve all the dependencies manually.

11. Use Alias on the usings, but be careful, be aware this is only necessary in the case you have to write the entire namespace path in case of conflicts with a declaration of the same name.

12. Subclass a class you are using with just the signature – I did end up not using this as it was not worth it.

13. Reduce the use of XAML files – for example, app.xaml is not really needed.

14. Reduce app.xaml.cs size -à most of its code can be greatly reduced. Mine ended looking like this:

public class App : Application

{

public App()

{

StartupEventHandler ha = null;

if (ha == null)

{

ha = delegate(object s, StartupEventArgs e)

{

base.RootVisual = new mh();

};

}

base.Startup += ha;

}

}

15. Minimize XAML Code: there is a lot of code that Blend adds and it is not necessary, there is also a lot of code pieces that are set up but also are default so taking them out does not affect the render.

16. Refactor the variable names, function names, and all the other names! I recommend that this is done first in a 3 to 6 length name so it still has some meaning – at the end you can refactor that to only 1 or 2 characters if needed… So you can touch the code with full understanding of what you have coded J.

17. Use only one – C# file – that will help reduce even more the use of the usings & also the own size of the extra files usage. This will reduce the namespace definition and usage to only one.

18. As the final step I compressed the code, I coded a simple tool that took a file and got all the whitespaces, carriage returns, etc.. it’s about 3 to 6 hours coding something like that.

Other ideas..

Other ideas I had but did not use but I think it’s cool to mention them :

1. Compressing the XAML

Compress the xaml (zip it) and uncompress it in runtime and render it over user control placeholders. As Silverlight comes with a compress/decompress utility the code needed for this is really small! I even looked up for the best way to do this (check this great post: http://www.sharpgis.net/post/2009/04/21/REALLY-small-unzip-utility-for-Silverlight.aspx) but the point is that I have to do whatever the “Initialize component does”. In my case is this:

[System.Diagnostics.DebuggerNonUserCodeAttribute()]

public void InitializeComponent() {

if (_contentLoaded) {

return;

}

_contentLoaded = true;

System.Windows.Application.LoadComponent(this, new System.Uri(“/bml;component/IKSegment.xaml”, System.UriKind.Relative));

this.LayoutRoot = ((System.Windows.Controls.Canvas)(this.FindName(“LayoutRoot”)));

this.ScaleSegment = ((System.Windows.Media.ScaleTransform)(this.FindName(“ScaleSegment”)));

this.RotateSegment = ((System.Windows.Media.RotateTransform)(this.FindName(“RotateSegment”)));

this.IKSegmentImage = ((System.Windows.Controls.Image)(this.FindName(“IKSegmentImage”)));

this.brazo = ((System.Windows.Controls.Image)(this.FindName(“brazo”)));

}

Which is not small code and it is unclear that this will end up giving me the edge…

That technique is only for xaml intensive applications… but will keep this for next year’s MIX 10K .

1. Compressing different CODE pieces and compiling/running it “on the go”

Other technique I put my eye on was to have code zipped and unzip and make it run on the client but… it just can’t be done L it needs to travel back to the server, be compiled and returned to the client, then attached and et voila! It lives! This way would make the application to atone with the rules as all the code used would be in the XAP file – it just will be transferred to the server, compiled and returned back as an assembly J. I explored this for my Magnifier Tool but ended up not using this as there was no time and still had some “basic code compression” techniques to try out.

Anyway if you are interested, this is the best reference I found on how to apply this technique: http://nokola.com/TryCSharp/ Thanks Nokola!

At the end..

Hope you enjoyed the article, if you liked it I’d like to get your feedback, maybe with a comment? J

Thanks for reading!!