Jesse Liberty - Silverlight Geek

By, For and About Silverlight Developers

Writing typed, object-oriented javascript, with the JavaScript Intellisense project

Slightly hidden among the Silverlight videos is a gem with implications I didn't notice at first. If you navigate to the video page of our site, and scroll down within the 1.0 videos to video #26 and click on the link, you will find the landing page for "Add Javascript Intellisense to Visual Studio 2008 Beta 2" by Justin-Josef Angel.

Good video. Well worth watching. You can also click on the first link in the description, to go right to Codeplex where you will find 3 more links:

Note: if you download the complete source code, you still get a directory (named RelaseJS) that has the 2 files you need: intellisense.js and intellisense.compressed.js

 Here, are Justin's directions on the setup procedures:

 1. Go to http://www.Codeplex.com/intellisense and download the latest "Javascript Silverlight Intellisense" release.
 2. Unzip and find these two files:

image_thumb6

3. Drag a copy of these two files into your project
4. Add a script reference at the top of each .js file:

/// <reference path="intellisense.js" />

5. Add a script include to each html file:

<script type="text/javascript" src="intellisense.js"></script>

That's it. You're done.

 

Now, Justin's blog focuses on having Intellisense in Javascript, and I admit that is terrific, but my focus here is on something else. Suddenly, you now have code that is a lot more typed, and a lot more object oriented, and therefore a lot easier to maintain and (when 1.1 is ready) a lot easier to port to managed code.

 For example, in a video about to be released, I have the following xaml excerpt:

<Storyboard x:Name="mouseDown">
    <
ColorAnimation Duration="00:00:00.2" To="#22000000" Storyboard.TargetName="highlightEllipse"
          
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
</
Storyboard>

My original .js file had this handler:

var mouseDownAnimation = sender.findName("mouseDown");
mouseDownAnimation.begin();

After adding Justin's intellisense for Javascript, I rewrote the handler...

var myButton = Convert.ToCanvas(sender);
var mouseDownAnimation = Convert.ToStoryboard(myButton.findName("mouseDown"));
mouseDownAnimation.begin();

That is darn close to strongly typed code. And it is self-documenting code, telling me quite clearly the type of the sender and the type of mouseDownAnimation - information that was not available previously.

Having Intellisense to help you is great....

 

But to tell you the truth, what I find more exciting, is the ability to convert the objects from typeless variables to (almost) strongly typed variables, (which, of course, is why Intellisense works!) and then to see Intellisense respond based on the true type of the object: creating code that is far more self-documenting and far more object-oriented.

 

Oh, yah, I now have 3 lines, not two, but it is 3 self-documenting lines; and for those who insist on brevity, the old Unix hacker in me is tempted to write it as

Convert.ToStoryboard((Convert.ToCanvas(sender).findName("mouseDown"))).begin();

...but that would be bad.

 

-jesse

 

 

 

 

Comments

Writing typed, object-oriented javascript, with the JavaScript Intellisense project - Jesse Liberty - Silverlight Geek said:

Pingback from  Writing typed, object-oriented javascript, with the JavaScript Intellisense project - Jesse Liberty - Silverlight Geek

# August 25, 2007 6:38 PM

Test said:

Slightly hidden among the Silverlight videos is a gem with implications I didn&#39;t notice at first.

# August 25, 2007 7:38 PM

swildermuth said:

Isn't saying "Typed" a but of a misnomer?  It seems to me that its still a late-bound language.  Sure OO and intellisense is cool, but it still weakly typed.

# August 25, 2007 8:32 PM

jesseliberty said:

Shawn,

I think I was pretty careful in my wording. When you call Convert.ToCanvas(sender) and that allows Intellisense to then (and only then) get the members of the canvas class, I would argue that it is reasonable to say that at that point you have something very much like a typed object.

The code that you end up with, in any case, is a lot closer to typed than my JavaScript normally is, and that was my point:  you know, by inspection, the actual run-time type of the objects, and I find that valuable.  

Yes, of course it is still a late bound language; I'm not suggesting that Justin's library turns JavaScript into something it isn't; merely that an additional advantage (in addition, that is, to having Intellisense) is a much improved (in my opinion) type-indicitative code that will make the transition to a strongly typed language (such as C#) all that much easier (and will make for more maintainable code, in any case).

This is why I don't have language lawyer discussions; I end up with sentences like the one I just wrote. :-)

-j

# August 25, 2007 10:59 PM

Justin-Josef Angel [MVP] said:

Jesse,

I full-heartedly agree that one of the biggest things in the Silverlight 1.0 Javascript intellisense project is having a fully functional type system.

The Silverlight code written with javascript intellisense can literally be cut & pasted into C# 3.0 code.

Shawn,

This addition makes Javascript silverlight programming a strongly typed experience.

Here's the list of conditions for a strongly-typed language experience:

en.wikipedia.org/.../Strongly-typed_programming_language

"Static typing as opposed to dynamic typing. In a static type system, types are associated with variable names (usually when they are declared) rather than values (usually when they are created). The types may be inferred by the compiler and/or provided as annotations. "

* Check, All Silverlight types are defined up-front. They can change at runtime, but that would be a mistake. BTW, You can also changes C# classes at runtime by adding a strategy design pattern on all methods and using Reflection.Emit for extensions methods. That doesn't mean you actually do that, but this library is as strongly typed as any C# library.

- "Type safety; that is, at compile or run time, the rejection of operations or function calls which attempt to disregard data types."

* Check, We've got complete type safety between types in the library including polymorphism in the type hierarchy.

-  "Disallowing type conversion. Values of one type cannot be converted to another type, explicitly or implicitly. "

* Check, A dependency object of type Storyboard still doesn't have a "begin" method. All Conversion are explicit through the "Convert.ToXXX" methods.

-  "Fixed and invariable typing of data objects. The type of a given data object does not vary over that object's lifetime."

* Check, A Silverlight Javascript object does not change it's type over it's lifetime. It my have different type references according to it's type hierarchy or a general "var" object, but nothing more.

The only thing that's currently missing is a non run-time type safety check. Which, BTW, is possible and I'm waiting until VS2008 is RTM before adding that feature.

# August 26, 2007 8:14 AM