Wow, I actually couldn’t write JavaScript, what I wrote smelled…

Alright, I’m not really a JavaScript developer, but do they even exists? I think there probably are a few JavaScript developers in this world, but most of the developers that I know of are developing for the Web. Developing for the Web in it’s widest sense. Most of the time there’s a server technology like ASP.NET, ASP.NET MVC, PHP or something else. A lot of times people actually feel like they are a WHATEVER-SERVER-TECHNOLOGY developer. I felt the same.

But lately the client-side technologies become more and more important. Yes most web developers know a little bit of HTML, and if we’re lucky there’s some knowledge on CSS as well. Yeah we also write JavaScript. uh actually we write jQuery script. Yes we are lucky to have a library like jQuery, but in the end most of don’t know much about JavaScript at all. Yeah we write functions, sometimes. But that’s about it, we don’t write, maintainable, easy to read JavaScript code. Our JavaScript smells.

And if we want to make use of the full HTML5 stack either for web or for example in a Windows 8 Metro application, our code needs to be maintainable. I can assure you, it’s not going to be 10 lines of JavaScript for a JavaScript Metro application.

To == or to ===?

I know C# so I’m using the double equals to check if left and right are equal. WRONG! I really need to admit I didn’t know I was wrong until a few months ago. So chances are some of you, my readers, don’t know it either. To quote Douglas Crockford’s book on JavaScript:

JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you would expect. If the two operands are of the same type and have the same value, then === produces true and !== produces false. The evil twins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values. the rules by which they do that are complicated and unmemorable.

So from now on I will be using triple-equals instead of double-equals.

Of course there’s a lot more in The Good Parts book, I can recommend you buying it.

Object Oriented Programming uh Closures

Most of the JavaScript code I write are just functions, and functions might call other functions, some anonymous some named. The end result is either a large amount of functions, are just a couple of functions with more than 100 lines of code.

Is this maintainable? Hell no!

So why don’t I write code in JavaScript like I do in C#? Uh is that possible at all? I recall everybody telling me JavaScript is not an object oriented language. I still have to agree JavaScript doesn’t have all of the object oriented language characteristics to call  it a fully object oriented language. But still.

JavaScript objects can be created in different ways, but you’ll have to know a little bit more about some of the JavaScript language features to be able to get things working like you expect.

Some things were completely new to me like Closures: JavaScript Closures for Dummies

Take some time to get to know the above JavaScript features.

With the above concepts you can learn a little bit about JavaScript patterns, which help you when you want to write your own JavaScript library.

• Prototype Pattern
• Module Pattern
• Revealing Module Pattern
• Revealing Prototype Pattern

Really interesting articles that can help, but if you need more, you should definitely take a look at the pluralsight course for Structuring JavaScript Code.

PS. Don’t feel hurt, there are exceptions to what I write here. Actually if there weren’t good JavaScript devs out there the rest of the world, like me, couldn’t learn from their expertise.

Does Windows 8 support Gif images and Animated Gif images?

To some of us it may sound like a strange question, but developers which are used to Silverlight or Windows Phone development know why I ask this question. In both Silverlight and Windows Phone Gif images aren’t directly supported. Don’t ask me why, I don’t know why. Luckily Silverlight and Windows Phone developers are helped by an open source project called Image Tools which enables support for Gif and Animated Gif.

Windows 8 – HTML5 + JS

For a starter I just downloaded an ordinary gif-image from the internet and with no knowledge about how to add an image to a Windows 8 application I used my web-knowledge.

<img src="/images/window.gif" />

And yes it does work. What about an animated gif? So I recall an interesting animated gif on Shawn Wildermuth’s blog, his head-shot. So without do anything else than changing the source of the image tag I created it started working. A surprise? Not really I already heard that the rendering engine for Windows 8 applications that are build in HTML5 + JS is based on IE, so this is what I did expect.

Windows 8 – XAML + C#

So I used my Silverlight knowledge to do in XAML what I did in HTML5, add an image.

<Image Source="/Images/window.gif" />

A really fast surprise it started working in the design view of the xaml document even before I ran the project. And also after running the application it seems to work perfectly. And the animated gif? It appears in the designer as well, but doesn’t animate in there. Also when running the application the animation doesn’t work.

Just a quick thought: Silverlight doesn’t support gif at all, what about WPF? After some googling it seems that WPF does support gif images, but not really the animated gifs. But there are people who created solutions that should work to enable animated gifs in WPF. So let’s see how much of that is possible in Windows 8.

The solution for WPF makes use of the GifBitmapDecoder which isn’t there in Windows 8. But I found something that sounds similar the BitmapDecoder. I tried to get the a small proof-of-concept working, but failed so far. I invite you to solve this Animated Gif problem using the information I’ve given. Please share your solution with the readers of this post.

Conclusion

We all know WinRT isn’t finished, we are just looking at a developer preview. If I recall it correctly WinRT should have the same features in XAML+C# as in HTML5+JS. Will this small difference in features be tackled in the final release?