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

 

 

 

 

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in z Silverlight Archives. Bookmark the permalink.

Leave a Reply

Your email address will not be published.