Jesse Liberty - Silverlight Geek

The Great Asynchronous Learning Experiment - Day 5

The following is part of a continuing "fantasy learning experience" of a .NET programmer learning Silverlight using the resources on this site. The premise is that this experience is "asynchronous" in that you may choose to join our novice at any time, reading the various day's entries as you like, adding to the experience with your own comments, exercises, etc.  

Bold print entries are from the part of my brain which is the Silverlight Geek.  Light print entries are from the fantasy novice. 

<whew!> I finally made it through all the set up, decided based on Silverlight Geek's entries, that I'll use Visual Studio 2008 Beta 2 as my development environment (see BUILD SILVERLIGHT 1.0 RC APPLICATIONS USING VISUAL STUDIO 2008 ) and, having followed the discussion on this blog, I'm going to install Justin's library to allow me to have Intellisense in Javascript.

"Yesterday" - day 4, I figured out how the various pieces of the default application (HTML, js files and xaml files) fit together, so I'm ready to get started building an application. I see there are a lot of videos, and I very much like the fact that I can dip in and watch them as stand alone lessons; rather than having to watch a bunch of lead-up videos to get to the material I want (whether this works in fact or just in theory, we'll see...)

I notice there are three choices under LEARN: Quick-Starts, White-Papers and Videos.  I'm inclined to start with the videos, but which one?  I think I'll work my way through some fundamental skills: how do I create a shape, how do I add fills and gradients, how do I animate that shape, how do I create and respond to events.

Great, here's what I need:

• Creating a shape: video 9
• Adding Fills - video 9
• Adding Gradients - ??
• Animation - Videos 18 and 30
• Events - Video 21 and 30 and 31

Oops, looks like I need to do a video on Shapes, fills and gradients, especially gradients. I'll add that to the top of my list. Stay tuned... Silverlight Geek is on vacation this week,  (taking my first born to college <yikes!>) but I'll get on that as soon as I'm back

Yes, but is it valuable?

The discussion on "is it really (strongly) typed" has degenerated into one of semantics and definition, and is losing sight of the original intent of my first post. So, once more unto the breach...  assume what I'm saying (that Justin's library provides type information that previously was not available) has some validity : is this a valuable thing in your code?

That is the key question. Your thoughts?

Does Intellisense really show that Javascript is typed (see previous post)?

A good buddy (and great (Flex [Shhhh!!] programmer) wrote to me offline (to spare me embarassment) and asked, among other questions answered by Justin in his comment at the end of the previous blog entry,  the following:

"I also didn't understand what you said about converting the typeless objects to typed variables being why intellisense works.  What I can see in your screen shot is that the editor knows that "Convert" is a (static?) object with some type, and can display its methods.  Is it also able to pop up an intellisense menu when you press "." after a variable name?  If so, that would be an illustration of your point."

Good point. Here you go...

Intellisense is now treating mouseDownStoryBoard as if it is of type StoryBoard, at design time. That is, even though it is a var, it is effectively typed by the Convert statement.

 I also want to draw your attention to Justin's explanation of why this does make Javascript (nearly) typed in the comments in the previous post. He does a nice job walking through one set of criteria for a typed language and showing that with his code, Javascript now meets those requirements.

But then I want to apologize. When I write here, I am not writing as Jesse Liberty, geek. I am writing, I'm told, as Jesse Liberty, blue badge Microsoft employee, Silverlight Geek, and I should learn to be more careful. Shawn, and my buddy above, and others were right to call me out on not qualifying what I was saying with more terms like  "nearly typed" or "type-ish" or whatever, and re-reading my answer to Shawn I was far too defensive (fortunately, he too is a friend).   I will be more careful in the future.

That said, the truth is that I also have this caveat: this is a blog, not an edited set of papers, and so I'm bound to get things wrong. Feel free to challenge me in the comments, I'll feel free to fix my mistakes, and we'll all live to see another day :-)

 Thanks again,

 -j

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:

1. A link to a blog with a full description of the project
2. A web cast about the project
3. A link to a page from which you can download the 2 files you need, or the complete source code.

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:

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

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...

...but that would be bad.

-jesse

Tafiti - When someone asks what you can do with Silverlight 1.0...

I've been waiting, bursting to talk about Tafiti... not only is it one of the coolest Silverlight applications I've seen, it is one of the coolest new developments in search technology.  It is just wicked cool. 

Let's say I want to learn a bit more about Grunge music (I missed Grunge, I was busy having kids and making a living; but I've made up for it this spring by buying every album by Nirvana, Rage Against The Machine, Red Hot Chili Peppers, Nine Inch Nails, Slayer, Smashing Pumpkins, System of A Down, Foo Fighters, Alice in Chains and quite a few others. The pleasures of OCD. And everyone else in my family hates every note. But I digress.)

To learn more about Grunge, I go to Tafiti.com (Tafiti is Swahili for Do Research) and I see a cool graphic of a spoon with my potential sources (web, books, feeds, news, images) swirling around. Meanwhile, a "drawer" opens with preliminary results (fast!) that shows short excerpts from these various sources. 

I can pull out the ones I want and put them on a "shelf" that I can label "grunge" or anything else i want to label it ("mid-life crisis"), adding and removing articles, news, images as I go. When I come back, they'll all be there.  I can also ask to see my results in a "tree" view which spreads the results out and lets me paw through them. There are some buttons that don't seem to work yet, but hey! it looks great and its Beta, so I'm optimistic.

Once you have a nice stack of articles,  you can "blog" them (to myspaces.live.com) or you can email the stack, or just save it to peruse at your leisure.

Whether or not this is the best search vehicle ever invented I'll leave for others to determine, but it is a very cool Silverlight application, and well worth a look.

Most important, Tafiti was built with Silverlight 1.0 (and AJAX)

Show this one to your IT Manager

[Reposted because I could not get the previous one to stop redirecting]

 Have an IT Manager asking why you're spending time on Silverlight?  Shawn Wildermuth, who did some of our excellent "How Do I" videos, wrote a great introduction to Silverlight for CIO magazine here. 

Interest in Silverlight is spreading even as people try to figure out how it all fits togther.

-jesse

Three new videos and two missing pieces

It turns out that the three new videos posted this week are all by me, though one of them I recorded before joining Microsoft.

 Here, briefly is what I cover...

The video titled "Working With Shape Transforms" covers the fundamentals of transforms, and shows the makings of an incredibly lame game in which I show you a starting shape, and you must use one of a number of transforms (size, skew, rotation, etc.) to turn a starting shape into the shape you have to match. You can imagine that someone who knew what he was doing could make this fun.

The other two videos arose from my Great Asynchronous Learning Experience:  the first shows how to use Visual Studio 2008 on a development machine on which you've loaded Silverlight 1.1 to create 1.0 applications. Remember, once you load 1.1 you no longer have 1.0 loaded, but 1.1 is a super-set of 1.0 and as long as you use the 1.0 template, all is well.

The final video dives a bit deeper into how the html file, the xaml file and the .js files work together in a Silverlight 1.0 application. There is nothing new here, just an attempt at driving through my thick skull a visceral understanding of the distinct responsibilities of each of these pieces. I find that if I can get these responsibilities crystal clear early in my work, it makes things much less confusing later on.

There are two pieces not covered in the video, so I'd like to cover them in this blog entry:

Question: What is in Silverlight.js? (really)

Question: Where is the magic?  Answer: The plug-in.

 First, what is in Silverlight.js.  That one is easy; you can open it up; it is a text file. You'll notice that it is not easy to read. Conspiracy theorists will posit that this is to discourage you from deconstructing it, but let's face it; we could have made it a lot harder. Nope, it is the way it is to make it incredibly efficient for the browser. If you want to deconstruct, it is painfully easy; put it in word, do a search and replace replacing semicolon with semicolon/newline, and then replace variable names like a and b with something more meaningful.

What you find, no surprise, is that one of the main jobs of Silverlight.js is to (a) see if you have the right plug-in on your machine and if not offer you the opportunity to download it and (b) set the code so that the plug in for your OS and browser is used.  Nothing very special and you can safely ignore this file once you've satisfied your curiosity.

The one thing to remember is that if you build your application and test it and it asks you to download the plug-in, the first thing to check is whether you have the right version of Silverlight.js. Remember, also, that (at least for now), Silverlight 1.0 is self-updating but Silverlight 1.1 is not.

The second question is about the plug-in. When you are developing an application you do not see the plug-in. It does not show up in your list of files in your project. While you cannot step into the plug-in's code, you can double click on the plug-in (e.g., in the handleLoad function) and drag it into the watch window, where you can easily see its methods, events and properties. It makes for fascinating reading and a good adjunct to the Silverlight help files.

The Great Asynchronous Learning Experiment - Day 4

I started to move on, but then a friend asked me to explain how the pieces of a Silverlight application all fit together. I found myself doing a bit of hand-waving when it came to the relationships among

• default.html
• default.html.js
• scene.xaml
• scene.xaml.js

I knew how it worked, it just wasn't internalized enough to really be able to explain it, and as Richard Feynman (or Albert Einstein)  may or may not have said "if you can't explain it simply (or to a first year grad student, or to a six year old), then you don't understand it yourself." [This would be a great quote if there weren't so many variants and if it were properly attributed].

In any case, I got curious, so I created the starter project you get when you use the Javascript template for Visual Studio, and I walked through it step by step. It turned out to be pretty interesting (at least to me) so I made a video of of the process (should be posted today or tomorrow).

While I was at it, I did a big hand wave about the Sivlerlight object itself. We know it is created it silverlight.js but that is some ugly javascript (excuse me, very beautiful and efficient javascript but not easily read). So class, your assignment is to parse that file and annotate it. Any takers?

 By the way, it turns out that when you take apart the relationship among these four files you find out two interesting things:

1. It is all rather straight forward
2. You actually knew all this already, you just didn't quite know you knew

I've shown this to a number of folks and they all had the same reaction. That said, I think you go forward with a touch less confusion. I hope you find the same.

 -jesse

Line Graphs in Silverlight

Timing is everything. Yesterday morning, a buddy of mine who is very good at creating Java apps asked how I would create a line graph with Silverlight. While I was pondering, Shawn Wildermuth sent me an article he'd posted about doing just that.

 Very clearly there is interest in the air about how to put data to work with Silverlight, so I'll add to my list of videos for the near term a walk through of how to map data points to the creation of a graph (and another on creating an application that ties data from a database to a dynamic representation in Silverlight).

Maybe Shawn will let me steal some of his ideas, and maybe I can tinker with the idea of a pie graph (hey! how hard can it be, drawing a circle is easy enough!)

If you've been tinkering with things like this, be sure to let me know.

Thanks! 

Should I Wait For 1.1?

In response to one of my earlier blog posts I was asked this question:

"As I get started with Silverlight, should I wait until 1.1 comes out?  Would I have to scrap all my 1.0 efforts when 1.1 releases?"

The truth is I've been asked this in various ways by many people, and it concerns me a great deal because it means we are doing a poor job getting the message across that the answer is an unequivocal "No, Why Wait? Nearly everything you learn in 1.0 will move cleanly to 1.1"

Silverlight 1.0 is ready to go, and all the skills you learn with Silverlight 1.0 (other than (perhaps) getting good at Java-script) will apply to 1.1 and beyond. There is a great deal you can do in 1.0 today and getting started now has tremendous advantages. Take a look at the Major League Baseball showcase application for an idea of the kind of application that can be build with 1.0 (okay, yes, they added some of their own extensions to go as far as they did).

I know, from previous posts, that some folks are waiting eagerly (as am I) for 1.1 and the inclusion of the CLR, for managed code, etc. etc. I'm not suggesting that Silverlight won't improve, of course it will, nor that 1.1 won't be better than 1.0, (or for that matter that 2.0 won't be better than 1.0, and so forth). What I am suggesting is that you may not want to write off 1.0 -- because it turns out to be a heck of a powerful tool, and you can get started today learning how to build Silverlight applications with a fully baked version.

Uh oh; that sounded dangerously like marketing. Okay, strike that. My enthusiasm does tend to get out of control. Let me try again... As a developer, what I see is a powerful tool that is being overshadowed by the promise of its own future; and I'd like to help provide the tools that other developers need to make use of the Silverlight we have today, so that we're all in a position to hit the ground at full speed as Silverlight evolves.

Listen, the marketing department is great; I have all the respect in the world for what they do, but I'm not in marketing I'm in development, so anytime I sound like I'm in marketing, please hit me hard with a dope slap.

Thanks.

 -jesse

Giving the term Web 2.0 A Whole New Meaning

In this concise but not-to-miss article, Rockford Lhotka (one of the brighter stars in the pantehon of technical writers) provides a brilliant summary of Silverlight's promise.

My only objection? Like so many others, Rocky hangs too much on Silverlight 1.1 and seems to miss that the revolution has already begun; 1.0 is here; Silverlight is live, and the time to begin is now.

Stay tuned; I plan a webcast very soon with the title: Silverlight: What Are You Waiting For?

In the mean time, don't miss Lhotka's article.

What Skills Do You Need *Before* Learning Silverlight

Shadowman (is that his real name? Is Silverlight Geek mine?), asked the following in a comment connected to a previous blog entry: "What skills should a developer have before learning Silverlight?  In other words, should someone new to Silverlight be an ASP.NET developer?  Would he need to know Javascript or XML?  What is the recommended "prerequisite" knowledge to start my journey with Silverlight?"

 Great question!

On the one hand, the answer is none. It is perfectly possible and reasonable to learn Silverlight as your first programming experience. But...to paraphrase David Platt , it is also possible to have an appendectomy through your mouth: it just takes longer and hurts more.

The truth is that right now our learning material is targeted at existing .NET programmers, and we more or less assume you have some familiarity with

• HTML
• Javascript (at least the fundamentals)
• DHTML (the fundamentals)
• Basic programming concepts (conditionals, event handlers, etc.)

You can pick up the pieces you are missing both by context and by reading. A great book to have by your side if you have not worked with JavaScript and/or DHTML would be either or both of JavaScript the Definitive Guide (Flanagan) or DHTML The Definitive Reference (Goodman). You can find reference to both on my personal web site - click on Books, then on Recommendations, then on Technical And Programming. But you don't need either, because everything you do need is available in the Microsoft help files, if you like reference material rather than tutorials.  Plus, our videos walk you through how to do any number of tasks (and we're adding to our collection of videos all the time)

For the 1.1 material, we also assume you have some familiarity with the .NET CLR, managed code and C# or VB.

 Finally, some of the videos do assume you've worked with ASP.Net, but only some.

So, to answer specifically:

• ASP.NET: not necessarily (always a good skill to have, but not needed here unless you want to marry the two technologies)
• BLOCKED SCRIPT Yes, you need to know at least the fundamentals for version 1.0 (for 1.1 and later, you'll probably C# or VB or one of the other managed code languages instead, but you can still use Javascript or another interpreted language)
• XML: No, unless you have specific need of it

You didn't mention XAML and that is something you will need to know. XAML is the markup language for Siilverlight, and it is closely related to XML. But I believe you can learn XAML without first learning XML, with no problem. You can do so from the help files, from our videos and white papers, or from any of the very good books on Windows Presentation Foundation (WPF) which also uses XAML (the XAML used in Silverlight is a subset of the XAML used in WPF). I recommend 3 WPF books on my web site, so you might want to try one of those,

 Hope that helps.

 -jesse

Silverlight (with Scott Gu) on the final .NET Show

Do not miss the final episode of The .NET Show which features Scott Guthrie and Jason Zander talking to host Robert Hess about Silverlight.  You can see it here.

Another fellow traveler

Mike Palermo IV has decided to take the journey and blog about it as he goes.   Welcome Mike!  My hope is that Mike will add lots of comments here as well.

For those of you who want to join in...

1) It is never too late (hence: asynchronous)

2) No need to have your own shadow blog - though you are welcome to, and I'm happy to link to it

3) Please do comment on what you find

4) Don't be afraid to get ahead of me, as I say, I'll be busy filling in holes I find (and you find) as I go.

 I'm beginning to feel a bit like Frodo.

The Great Asynchronous Learning Experiment - Day 3 (some days take longer than others!)

Well, it has been nearly 5 days since day 2, and that is because so much has been happening!

 One tremendous -- and for me very exciting -- event has been that Laurence Moroney has undertaken the adventure of working through the Learning Experience, and I urge you to check out Laurence's blog. as it will almost certainly be a more "linear" approach than mine.

My problem is that when I see a "hole" in the user's learning experience it's my responsibility to stop and figure out how to fill that hole (just writing it down and hoping someone else will fill it won't cut it).

So, I've spent the past week filling holes and figuring out how to get out of "planning mode" and into "action mode" and I'm happy to say that today, Monday August 13, is the very last planning day. Tomorrow morning, at 8am, begins action. (Of course, lots of action has started already).

 What can you expect going forward?  Remembering that much (most?) of this work won't be done just by me (I'm continually amazed at how many people are working on Silverlight-related projects), and that everything I say here is subject to change as we all learn more and as you tell us what you need, here's what I'm thinking...

 1. The Great Asynchronous Learning Experiment.  I'd like to keep pressing on, trying to recreate the experience of .NET developers learning Silverlight through the resources available on our site, and, along the way, finding the holes and filling them.

2.  I'll be creating videos on a regular basis. Expect a video right away on creating Silverlight 1.0 applications using Visual Studio 2008 with 1.1 installed!  Lots more videos coming. I want to be sure to cover the fundamentals, then move on from there. I'll be focusing on 1.0 for a while, but I know some of you would like to see more on 1.1, and I'll be sure to cover that as well. 

3. Alternative Media.  Some folks love videos, but others feel that even a 10-15 minute video takes longer to convey information than other media might, so I'll be experimenting with videos vs tutorials; videos vs podcasts; videos vs white-papers. That is, parallel ways of conveying the same information so you can decide which way you like to get the information. Your preferences will be registered by what you choose to download and what you pass by; if we see that tutorials are more popular than podcasts, guess what? more tutorials.

 4. Webcasts. These are live and interactive (and, of course, archived for downloading at any time later).  I'd like these to be highly interactive, with Q&A, and like the videos, they'll be "Developer to Developer" -- not high gloss, not lots of sizzle; but down and dirty and in the code.  One Web Cast I know I want to do (look for it among the first half dozen) will be titled "Silverlight: What Are You Waiting For" -- and in that one I'd like to discuss all the benefits of getting started with 1.0 rather than waiting for 1.1 or a later version (I know, I  know, never use an x.0 product from....) Stay tuned for announcements.

 5. More blogging.  It's been 5 days!! Unforgivable. There has been plenty to say and I've been too quiet. There is no reason to bother you with drivel, but that doesn't mean that I need to go dark for extended periods of time.  I believe folks want a steady rhythm of information. I'll try to provide it. Along the way (not too much ) I'll tell you a bit more about this job, why I took it, and what I hope to do in it. Mostly, though, I'll focus on what is going on with Silverlight, and how to get the most out of the technology.

6. Events.  I'll be at AJAXWorld in SantaClara in September, and an event in New Hampshire October 11. I'm discussing going to an event in Boston on October 8 (watch this blog for announcements), and possibly another in November.

In short, I'm interested in talking about Silverlight, if you can put me in front of a couple hundred people, please don't hesitate to contact me.

[Edited 20:53 EDT 8/13 because the first time I wrote this blog entry I was incoherent]