For full disclosure, Packt Publishing sent me a review copy of this book. They did not ask for a positive review, just a review.

<update>The book’s official page is at Packt Pub’s Official Ext JS 3.0 Cookbook site</update>

This is the first book by Jorge Ramon that I’ve read. This book is exactly what the title says that it is, a Cookbook. It’s got 109 solutions to problems solved by Ext JS 3.0. I was expecting, like a lot of other books to get a fill of all of the philosophy behind what they are trying to promote but that wasn’t the case. This book just in with no nonsense and gets right to the code.

Every chapter is laid out exactly the same. It starts off with a list of problems solved in this chapter and a very short paragraph that gives an explanation to why these are related problems. The rest of the chapter is broken in to “recipes” all of which are laid out exactly the same as each other as well with sections “Introduction”, “How to do it”, “How it works”, an optional “There’s more” and a “See also” section. The intro is typically a short paragraph that describes when this recipe is going to be useful and optionally contains a screenshot or two of the solution. The How to do it section is almost all code with just enough text to explain where to put the code that you are looking at. The How it works section explains a little more about the events and the libraries that are at play and how they effect the code snippets that you just wrote. The There’s more section points out potential pitfalls or other benefits that this recipe brings to the table. The See also section points out related recipes that you should look at in addition to the recipe that you’re looking at.

So what’s my opinion on the book?

if you are trying to understand JavaScript and/or Ext JS 3.0, this book is not the book for you. There are plenty of other books out there that will step you in at a little more manageable pace.

However, if you are somewhat familiar with JavaScript and Ext JS 3.0, this is a great recipe book. The code is clean and readable. The problems are problems that I see on a semi-regular basis. I like it for what it is. It’s a handy reference and a set of problem/answers that solve discrete problems. It’s a good formula and I’m probably going to write a few blog posts in that format to feel it out.

The price, $49.00 or 30.99 Pounds is a little steep but if it cuts an hour or two out of your research and development time, it’s paid for itself. Also, you can download the code from Packt Publishing in a zip file and copy paste from that so it’s definitely going to save you time if you are using Ext JS 3.0. This was something that I missed at first to be honest and only caught when I went back to reread the preface and saw the link to where the source is zipped up.

Another interesting note about Packt Publishing is that on their “About Packt Publishing” page in the back of the book, they mention that when they publish a book based on an open source project that they pay royalties back to that project. I don’t know how much they pay in royalties to the project but that’s a really class thing to do. If one is making money on an open source project, they should contribute to it somehow either through code or financially or both.

Right now, they’ve got a number of design wizards that you can leverage but they’ve built a great plug-in model so that you can write your own for your favorite jQuery UI plug-in.

Check out their video on how to leverage Glimmer and how it all came to be.

I’m really geeked and am looking forward to using this in my next web dev projects…

Anyone using Ext JS? Thoughts compared to jQuery or Prototype/Scriptaculous?about 3 hours ago from TweetDeck

This is what I got back (I love twitter):

parkerkrhoyt@joshholmes IMHO, Ext is more about traditional applications. jQuery is a Swiss Army knife. Ext can do that, but rarely is used that way.about 1 hour ago from TwitterFon in reply to joshholmes

ntschutta@joshholmes friend of mine loves ext but the learning curve can be steep and leads to lots of js config rather then HTML. I like proto a tonabout 2 hours ago from twitterrific in reply to joshholmes

objo@joshholmes we have tried all three and much prefer jquery. but ext is in a very different space with diff objectivesabout 2 hours ago from Nambu in reply to joshholmes

ksmarshall@joshholmes I use extjs and jquery together. I just use extjs for some of the nice ui controls it creates and jquery for the rest of the jsabout 2 hours ago from twitterrific

dmeeker@joshholmes We’ve looked at it extensively. It seems to be a mishmosh of those other libraries, no? I can put you in touch with someone hereabout 3 hours ago from web in reply to joshholmes

jblankenburg@joshholmes My limited experience suggests it’s much more a RIA development framework than jquery, etc.about 3 hours ago from TweetDeck in reply to joshholmes

nkohari@joshholmes ExtJS is nice if you’re looking for a full control toolkit. If you just want a low-level JS library, jQuery is the best imo.about 3 hours ago from TweetDeck in reply to joshholmes

JavaScript Resources

Like a lot of you, I’ve been doing JavaScript since 1996. I’ve been pretty geeked, however, with the recent (well, last 2-4 years) emergence of a ton of JavaScript frameworks that are making this work a lot easier.

The first one to talk about it dojo. It’s one of the more mature ones that’s out there. I’ll be honest and say that it’s been a little while since I’ve used it because I’ve started using jQuery or Prototype more often. That said, dojo is one of the most complete frameworks out there. I do love it’s drag and drop support. It includes offline support and a whole lot more. Check out and play with some of it’s cool features at http://dojocampus.org/explorer.

Of course, any group that has a conference called dojo.beer() is a winner in my book.

The second toolkit is MochiKit. I love it’s tag line of “Making JavaScript Suck Less”. I first worked with MochiKit when I was playing around with TurboGears – a Python web application stack. What it’s really outstanding at is doing async work which is particularly useful in doing AJAX and other service based work. It’s interesting to note that Kevin Dangoor started Turbo Gears and then at some point later ended up working for SitePen who paid him to work on dojo. Check out demos of it in action at http://www.mochikit.com/demos.html.

Prototype is a slick relatively low level framework. What it does is extend the HTML DOM to include a lot of really useful features like element, class and css selectors. One of the useful things that it does is add a number of manipulations to the built in string class. This gives us startsWith, stripScripts, stripTags, isJSON, strip and a whole lot of other really useful functions. By itself, Prototype’s useful but I have a hard time talking about it without mentioning script.aculo.us and some of the other plugins. script.aculo.us brings drag and drop support, animation frameworks a number of controls and makes it all really easy.

Check out demos of Prototype and script.aculo.us working together at http://wiki.github.com/madrobby/scriptaculous/demos.

jQuery is a fantastic and relatively light-weight framework that’s garnering a lot of new supporters recently. Honestly, I was happy with dojo and Prototype until I saw the Visual Studio Support for jQuery at which point I started playing with it.

I’m a convert. Now, because it’s not as low level as Prototype, jQuery doesn’t have some things like the string manipulation, but overall I’m really pleased. I find that I have to write a lot less code to accomplish the same results. And very importantly, the jQuery Documentation is really good. Another really useful thing is that jQuery, being a really nice citizen, has built in support to make sure that it’s compatible with other JavaScript frameworks. Throw all of that in with intellisense in Visual Studio and it makes life easy.

There are also a ton of different plugins for jQuery that do everything from menus to rude string manipulation (not as good as Prototype but it’s a start).

Some of my favorite jQuery plugins in no particular order are:

AJAX History
Mousewheel
JSON
Curvy Corners
jCarousel
xWin

  ASP.NET AJAX is the last framework I’m going to talk about here not because there aren’t other frameworks but I haven’t used the others so I don’t really want to comment on them.

First, as the name does imply, what it does really well is AJAX stuff. One of the really powerful features is the JavaScript proxy generation.

<asp:ScriptManager ID="ScriptManager1" runat="server">
      <Services>
           <asp:ServiceReference Path="~/CustomersService.asmx" />
      </Services>
</asp:ScriptManager>

That allows you to call web services as if they were methods on an object.

function GetCustomerByCountry()
{
      var country = $get("txtCountry").value;
      InterfaceTraining.CustomersService.GetCustomersByCountry(country, OnWSRequestComplete);
}

function OnWSRequestComplete(results)
{
      if (results != null)
      {
           CreateCustomersTable(results);
           GetMap(results);
      }
}

Second, despite the name, ASP.NET AJAX can work with more than just ASP.NET. There’s a project on CodePlex to generate the service proxies for PHP called PHP MS AJAX (which is a whole lot of capital letters…).

How do you choose?

There are a ton of different tests out there some of which you can look at the results, others of which you can actually run yourself…

Dojo vs JQuery vs MooTools vs Prototype Performance Comparison | Peter Velichkov’s Blog – Jan 19, 2009

Mootools Slickspeed Test

I like to see if there’s broad support so the project won’t go away, see if it’s actively being developed, what tooling is available, how easy the syntax is, how well it plays with others, what it brings to the table from a functionality standpoint and a whole lot more.

Really though, it comes down to your preferences. The good news is that it’s not the end of the world if you decide to switch frameworks.

My current JavaScript work is being done with a combination of jQuery for most of my client side work with ASP.NET AJAX doing my communications (and some of the controls) with a little bit of Prototype thrown in when I need to go lower level.

CSS Resources

I used to spend days getting exactly the right alignment in my HTML/CSS work. But as time has gone on, I’ve gotten more mature and realized that I don’t have to work that hard. Instead of me figuring out how to do the exact right layout should be, I’m starting to leverage the various CSS Frameworks that are out there – especially since there are so many new browsers and form factors out there from IE8 to Safari 4 to iPhone. I want a framework to

One really simple CSS Framework is the 960 Grid System. It’s simple and gives you a lot of flexibility. The idea is that it breaks up the page into either 12 or 16 different columns and then lets you put in areas that spread across any number of those columns. This is a direct nod to the print industry which does exactly the same thing on paper. This gives you a tremendous number of possibilities from a simple two column layout to a really complicated layouts with multiple width columns and variety. Check it out, it’s simple and it works.

  The downside of it is that it’s a fixed width layout so it’s not always the right choice. The good news, however, is that the project has been extended by Fluid 960 Grid System. This adds JavaScript to the 960 Grid System to give is a much more dynamic layout that resized to your screen size. It also brings dynamic menus to the table. It’s JavaScript it based off of a project called MooTools. 

If the you really don’t want to think that hard and the others don’t give you what you need tied up in a neat enough package, check out Layouts.IronMyers.com. It’s simple to use web site gives you a preview of exactly the layout that you’re looking for and lets you download a zip file with a sample HTML and CSS inside.

And if that’s not enough and you really just need the design and all of the layout handed to you – check out FreeCSSTemplates.org. It’s got a large number of Creative Commons licensed CSS templates and layouts.

Conclusion

I hope these resources are as useful to you as they are to me. I’ve banged my head against the wall a ton of times until I realized that someone else had already solved the problem and I can leverage their solution.

One cool part about it is that you can get a tremendous amount of functionality with little to no JavaScript coding on your own. It leverages a couple of different JavaScript libraries including Prototype and Scriptaculous. These do a lot of generic HTML Dom manipulation and visualization.

The result of leveraging Lightbox.js is that when you click on one of the thumbnails that we started showing in Returning Thumbnails With the MVC Framework the full sized picture will show in a really nice lightbox style effect.

First, you need to download the Lightbox.js project. It comes in a zip file that comes with a sample application. Unzip the contents into the appropriate folders. This means that the .js files go in your /scripts directors and the images and the css in the /content folder.

The cool part is that since you have the source to it all, rock on and modify it to your heart’s content. And we’re going to do a light modification right off the bat. We could have put the images from the Lightbox.js project in the /images folder but we’re already using that for something else so we put them in the /content folder. That means that you need to open up lightbox.js and change the directory of the loading and close images to point to the correct directory.

LightboxOptions = Object.extend({
    fileLoadingImage:        'content/loading.gif',
    fileBottomNavCloseImage: 'content/closelabel.gif',

That’s the only mod that we *need* to make at the moment. If you feel like it, you can fix the image paths in lighthouse.css as well.

#prevLink:hover, #prevLink:visited:hover { background: 
        url(Content/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: 
        url(Content/nextlabel.gif) right 15% no-repeat; }

The only thing left to do is update the Images/index view to take advantage of our new capabilities. There are two mods to make. First, we need to include links to the lightbox.css and the required 3 JavaScript files (prototype.js, scriptaculous.js and lighbox.js). Second, we need to add a rel=”lightbox” to the anchor tag around our picture.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
      AutoEventWireup="true" CodeBehind="Index.aspx.cs" 
      Inherits="PhotoGalleryMVC.Views.Image.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <link rel="stylesheet" href="content/lightbox.css" type="text/css" media="screen" />
    <script src="scripts/prototype.js" type="text/javascript"></script>
    <script src="scripts/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="scripts/lightbox.js" type="text/javascript"></script>

    <p><%= Html.ActionLink("Add your own image", "Upload", "Image")%></p>
       <% foreach (var image in ViewData.Model) { %>
   <span class="image">
        <a href="/images/<%= image.Path %>" rel="lightbox">
            <img src="/image/thumbnail/<%= image.Path %>" />
        </a>
        <span class="description"><%= image.Description %></span>
   </span>
<% }%>

</asp:Content>

It’s that simple. This will render a really nice little lightbox effect on our images.

Stay tuned for future posts about styling the CSS, paging the pictures and a whole lot more.

Ann Arbor Day of .NET was on 5/5/2007. It was fantastic! It sold out at 250 people and of that there were 210 people show up. That’s actually really good as most free events have a 40% droppoff and they had less than 20% droppoff. The only downside on the day was that with less than a 20% droppoff – pizza was a little short at lunch.

They are actually thinking about going to every 6 months instead of every 12 months. I think this would be fantastic!

I kicked off the day with a session on User Experience technologies at Microsoft. I borrowed from some of the materials that we are putting together for the upcoming ArcReady (Check the site for dates and times across the entire central region – Detroit on 5/25 in two weeks for all those that attended Day of .Net). We dipped into WPF, AJAX and Silverlight. My favorite demo is the Silverlight Airlines Demo. It shows a truly out of the box user experience that’s not all glitz and glammor but a truly solid UI for a true business application. Many of the demos, while showing off the platform really well, are marketing apps that show lots of 3D and animation. My customers often look at the glitzy demos and say that they are not doing 3D so they don’t look at the technologies. What they are missing is that there are real benifits here with enabling truly rich interfaces that go well beyond text and pictures.

I had two more 30 minute sessions. In both of those sessions the overwhelming requests were to have more Silverlight content. I had nothing prepared for these sessions but they went really well. In the first session, I pulled Don Burnett, who started Michigan Interactive Designers, out of the crowd and asked him to do a tour around Expression Blend and Silverlight. He got up, completely unscripted, and did a fantastic job! I will definitely be bringing him in to do more demos and presentations - especially when we have a designer based crowd. It turns out that he used to work with Bill Wagner (my former business partner when I was at SRT Solutions) on the Lion King Animated Storybook.

In the second session, I was on my own but I showed Top Banana, the DLRConsole (python and javascript version – IronRuby will be released as a CTP from CodePlex later this year) and talked about the .NET support in Silverlight 1.1 Alpha. Yes – I actually wrote some Python and did a simple overview for people at the conference. It was a fun day!

Here are some of the resources that we talked about during the three talks:

•Windows Forms @ .NET FX Developer Center
http://windowsclient.net

•WPF @ MSDN Developer Center
http://msdn.microsoft.com/winfx/reference/presentation/default.aspx

•.NET 3.0 (WPF, WCF, WF) Community Site
http://windowsclient.net/

•Silverlight
http://www.silverlight.net

•ASP.NET AJAX @ ASP.NET Developer Center
http://msdn.microsoft.com/winfx/reference/presentation/default.aspx

•ASP.NET AJAX Community Site
http://ajax.asp.net/

•DirectX @ DirectX Development Center
http://msdn.microsoft.com/directx/

•Microsoft Visual Studio @ Visual Studio Developer Center
http://msdn.microsoft.com/vstudio/

•Microsoft Expression
www.microsoft.com/expression

Day of .NET site

Link to Day of .Net in Ann Arbor 2007 – Home

Don Burnett’s write-up of the event.

Link to Don.NET’s WPF Designers Blog: Eastern Michigan Day of Dot Net

*Update – gotta do a quick shoutout to Leon Gersing for his passionate defense of JavaScript and JSON. It’s part of what inspired me to spend as much time on this as I did.

Really short JSON overview

JSON, for those of you who don’t know, is a really simple data format heavily used with JavaScript. It’s a lot smaller and lighter than XML.

This is the JSON that I’m using in this example. As you can see, it’s just name/value pairs with a little bit of extra formatting. Curly Braces separate objects in a list. Commas separate values. Colons separate the names from the values. 

[
{"FirstName":"Etta","LastName":"James","Url":"http:\/\/www.etta-james.com\/"},{"FirstName":"Billie","LastName":"Holiday","Url":"http:\/\/www.billie-holiday.net\/"},{"FirstName":"Ella","LastName":"Fitzgerald","Url":"http:\/\/en.wikipedia.org\/wiki\/Ella_Fitzgerald"}]
}

Creating the JSON service with ASP.NET MVC Framework

The first thing that I did was slap together an ASP.NET MVC Framework application to produce the JSON and host the Silverlight application. This was remarkably easy. I decided against going through the effort of creating a database because that’s not really the point of the exercise.

I created a simple class that to fill out and serialize and then returned it from a controller.

public class Artist
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Url { get; set; }
}

The next step was to create a simple controller that would return my list as JSON. As you can see, there’s a JsonResult that you can return right from a controller method.

public class ArtistsController : Controller
{
    public JsonResult GetAll()
    {
        List<Artist> artists = new List<Artist>();

        artists.Add(new Artist("Etta", "James", "http://www.etta-james.com/"));
        artists.Add(new Artist("Billie", "Holiday", "http://www.billie-holiday.net/"));
        artists.Add(new Artist("Ella", "Fitzgerald", "http://en.wikipedia.org/wiki/Ella_Fitzgerald"));

        return Json(artists);
    }
}

To test it, I just browsed to http://localhost:mylocalport/artists/getall. That returned the JSON file. As the browser doesn’t display JSON auto-magically, it prompted me to download a file and save it off.

Now, take notice of the URL. The ASP.NET MVC Framework is producing what’s called a RESTful Service. The parameters and all are simply in the URL. In the URL, “artists” takes us to a particular Controller called the ArtistsController and the “getall” calls the “GetAll()” method on that controller. We can further specify parameters and the like in the URL. Scott Guthrie has a great article that explains the URL routing and all at http://weblogs.asp.net/scottgu/archive/2007/12/03/asp-net-mvc-framework-part-2-url-routing.aspx.

Now that we are producing JSON from a services, we are ready to create a client.

Getting the JSON from the RESTful service.

The first client that I tried was the straight up System.Json namespace client. Since we are using a RESTful service, we can’t generate the proxy object in the same way that we’re used to with SOAP. Instead, we need to leverage the WebClient object.  This is done as follows:

void mainButton_Click(object sender, RoutedEventArgs e)
{
    Uri serviceUri = new Uri("/Artists/GetAll", UriKind.Relative);
    WebClient downloader = new WebClient();
    downloader.OpenReadCompleted += new OpenReadCompletedEventHandler(downloader_OpenReadCompleted);
    downloader.OpenReadAsync(serviceUri);
}

Notice that the URL that I’m using is relative. You can specify the full URL if the service is not on your own server. These calls, as all calls in Silverlight, are async. Therefore I wire up the downloader_OpenReadCompleted event and call OpenReadAsync. Simple enough?

Leveraging System.Json

Once the downloader returns, I can get the result off of the event arguments. Load is a static method on the JsonArray that will automatically parse out the results from the stream object. Then, I can just loop over the objects in the array and use them to fill out my own type that I’m ready to databind to.

void downloader_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
    JsonArray jsonArray = (JsonArray)JsonArray.Load(e.Result);

    List<Artist> artists = new List<Artist>();

    foreach (JsonObject jsonArtist in jsonArray)
    {
        Artist artist = new Artist();
        artist.FirstName = jsonArtist["FirstName"];
        artist.LastName = jsonArtist["LastName"];
        artist.Url = jsonArtist["Url"];

        artists.Add(artist);
    }

    dataGrid1.ItemsSource = artists;
}

This was fairly straight forward and simple, but I wasn’t ready to be done yet.

Leveraging LINQ

The next thing is to try LINQ against this JsonArray and see what happens.

void downloader_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
    JsonArray jsonArray = (JsonArray)JsonArray.Load(e.Result);

    var query = from artist in jsonArray
                select new Artist
                {
                    FirstName = (string)artist["FirstName"],
                    LastName = (string)artist["LastName"],
                    Url = (string)artist["Url"],
                };

    List<Artist> artists = query.ToList() as List<Artist>;
    dataGrid1.ItemsSource = artists;
}

Personally, I think that the LINQ version is a lot more powerful. It’s not immediately obvious in this simple example but there’s a ton that I could do with the LINQ query from filling out sub-types to filtering and so on.

JSON in JavaScript

But then I started thinking about all of the different ways that one can get and parse out JSON directly in JavaScript (I mean it does have JavaScript right in the name).

First, I did it the old school way that I used to do back when I was doing a ton of JavaScript development.

Quick note here – before you start copying this code – this is NOT the way to do this in the modern era. I did it to prove a point. You really need to be leveraging one of the many great JavaScript frameworks that are out there in order to accomplish your JavaScript today. I’ll get to those in a minute.

Short version, you’re going to be doing an XMLHttpRequest directly. When that returns you’ll get an “onreadystatechange” event which you can respond to. If it’s actually ready, then you can call a JavaScript function called eval that will return and array of objects parsed out from the string that you pass in.

<script language="javascript" type="text/javascript">
    function GetJson(url) {
        // Create xmlhttprequest object
        var xmlhttp = null;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
            //make sure that Browser supports overrideMimeType
            if (typeof xmlhttp.overrideMimeType != 'undefined') {
                xmlhttp.overrideMimeType('text/xml');
            }
        }
        else if (window.ActiveXObject) {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else {
            alert('Perhaps your browser does not support xmlhttprequests?');
        }

        // Create an HTTP GET request
        xmlhttp.open('GET', url, true);

        // Set the callback function
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var json = xmlhttp.responseText;

                var artists = eval(json);

                var newArtistList;
                newArtistList = "<ul>";

                for (var i in artists) {
                    var artist = artists[i];
                    newArtistList += "<li>"
                    + artist.FirstName + " "
                    + artist.LastName
                    + "</li>"
                }

                newArtistList += "<ul>";

                outputControl = document.getElementById("divOutput");
                outputControl.innerHTML = newArtistList;
            } else {
                // waiting for the call to complete
            }
        };

        // Make the actual request
        xmlhttp.send(null);
    }
</script>

Alright, that’s a lot of JavaScript to get through and understand. There are multiple possible problems here. First, that’s just a ton of code. Second, the same eval function that you are calling here is the same eval function used to dynamically execute a piece of JavaScript in a string. This means that you’re open to all kinds of possible attacks. Finally, there are a ton of frameworks that have come up in the past handful of years.

So, let’s go look at some of those frameworks.

Leveraging MS AJAX

The AJAX framework that I’ve been trying to learn lately is the MS AJAX one. It’s got a lot of power. First, notice that the WebRequest actually looks a lot like what I did in C#. Next, notice the JavaScriptSerializer object. This gives me some nice and easy serialization to and from JSON. The reason to use this is that it’s a much safer mechanism than eval. Lastly, notice the $get at the end. This is a nice and easy selector that does all of the heavy lifting of finding the object in the DOM and the like.

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    function GetJson() {
        var request = new Sys.Net.WebRequest();
        request.get_headers()['Content-Type'] = 'application/json; charset=utf-8';
        request.set_url('/Artists/GetAll');

        request.add_completed(Function.createDelegate(null, DisplayArtists));
        request.invoke();
    }

    function DisplayArtists(executor) {
        if (executor.get_responseAvailable()) {
            var json = executor.get_responseData();
            var artists = Sys.Serialization.JavaScriptSerializer.deserialize(json);

            var newArtistList;
            newArtistList = "<ul>";

            for (var i in artists) {
                var artist = artists[i];
                newArtistList += "<li>"
                + artist.FirstName + " "
                + artist.LastName
                + "</li>"
            }

            newArtistList += "<ul>";

            $get("divOutput").innerHTML = newArtistList;
        }
    }
</script>

This is a lot less code and a lot safer than what I was doing in raw JavaScript. However, I thought I should try this with a few more frameworks.

Leveraging Prototype

A framework that I’ve used for a while and really like is Prototype.

This is a whole lot less code. Notice the “Ajax.Request”. That packages up all of the work of doing the network call behind one simple to use function. And on the response is a nice and easy method called evalJSON that will parse out the JSON string to an array of objects that you can loop over. Finally, notice the $() selector.

<script src="../../Scripts/prototype-1.6.0.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    function GetJson() {
        new Ajax.Request('/Artists/GetAll', {
            method: 'get',
            onSuccess: DisplayArtists
        })
      }

      function DisplayArtists(transport) {
        var json = transport.responseText.evalJSON();
        var newArtistList;
        newArtistList = "<ul>";

        json.each(function(artist) {
            newArtistList += "<li>"
                    + artist.FirstName + " "
                    + artist.LastName
                    + "</li>"
        });

        newArtistList += "<ul>";

        $("divOutput").insert(newArtistList);
    }
</script>

I liked this a lot. A feature that I didn’t take advantage of is that Scriptaculous, which is a fantastic set of JavaScript libraries for visualization, weaves in with Prototype really easily.

Leveraging jQuery

The last JavaScript framework that I tried was jQuery. One extra cool part about this one for me is that I get intellisense right in Visual Studio. Check out Scott Guthrie’s post on jQuery Intellisense in VS2008 to see how to enable it.

Notice that it’s got the same type of easy to use function that packages up the call to get the JSON. Since it knows that it’s JSON, the variable returned to the callback is already parsed out into a usable object. And lastly, notice the $() selector again. There is a subtle difference between this one and the Prototype selector in that the jQuery one uses a # to signify that it’s looking for an ID, . to signify objects with a given class and so on.

<script language="javascript" type="text/javascript">
    function GetJson() {
        $.getJSON("/Artists/GetAll",
          {},
          DisplayArtists);
      }

      function DisplayArtists(data) {
          var newArtistList;
        newArtistList = "<ul>";

        for(var i = 0; i < data.length;i++)
        {
            var artist = data[i];
            newArtistList += "<li>"
                + artist.FirstName + " "
                + artist.LastName
                + "</li>"
        }

        newArtistList += "<ul>";

        $("#divOutput").html(newArtistList);
    }
</script>

Now that I was done playing with different JavaScript libraries, I thought I’d see if I could piece it all back together.

Leveraging jQuery and Silverlight

I decided to try jQuery and Silverlight together, leveraging jQuery to get and parse the JSON and Silverlight to do the display. This turned out to be remarkably simple.

First, in order for Silverlight to call into the JavaScript, you just have to call HtmlPage.Window.Invoke. That dynamically looks up and executes the method named in the first parameter.

void mainButton_Click(object sender, RoutedEventArgs e)
{
    HtmlPage.Window.Invoke("GetJson", "/Artists/GetAll");
}

Now, I could have wired up the JavaScript to listen for the button click event directly but that’s a lot more code than what I’ve got here.

Next I had to enable the Silverlight objects for callbacks. Step 1 is to Register the class with the browser’s scripting engine.

public LeveragingJQuery()
{
    InitializeComponent();
    HtmlPage.RegisterScriptableObject("LeveragingJQuery", this);
...
}

Step 2 is to declare one of the methods as a ScriptableMember. This gives the scripting engine access to the method in question. There’s also ScriptableType for creating serializable objects but that’s not what we need here. Notice, however, that the object type passed in is a ScriptObject. The slick part about this object is that it’s got a “ConvertTo” method that will take the weakly typed objects that it contains and serialize them to the type of object that you specify. This made the C# code here REALLY simple.

[ScriptableMember]
public void CallBackFromJavaScript(ScriptObject artists)
{
    List<Artist> listofartists = artists.ConvertTo<List<Artist>>();
    dataGrid1.ItemsSource = listofartists;
}

What’s left is the JQuery in the browser that we’re talking to. Notice that the first part is exactly the same. The second part, however, is a little different. First, we have to get a reference to the Silverlight plugin itself. Since I’m in a form object, ASP.NET mangles the name a little bit but it wasn’t too hard to figure out the new name. Next, I have to get the object that I had registered with the RegisterScriptableObject method. Then, all that’s left is calling the method to pass in my array of Artists.

<script src="/Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    function GetJson(url) {
        $.getJSON(url,
          {},
          DisplayArtists);
    }

    function DisplayArtists(artists) {
        var control = document.getElementById("ctl00_MainContent_SilverlightPlugin");
        var leveragingJSPage = control.Content.LeveragingJQuery;
        leveragingJSPage.CallBackFromJavaScript(artists);
    }
</script>

Conclusion

This is how I learn about new things. I’m not satisfied with just getting the job done in one and only one way. I want to try out 3, 4, 5 different ways to accomplish a given task. That way I know what the right way to do something is in a given context. For example, I don’t know that I’ll ever need to mingle jQuery and Silverlight. But, I know how it’s done now and know that it’s a lot simpler than I originally thought it would be.

JSON is a simple but powerful format. There are a ton of simple services, from flickr to twitter to many of your production applications that could be producing JSON. It saves bandwidth compared to XML and is a just as simple to use.

It starts on the left with Web and it’s absolute ubiquity through HTML and CSS. This works on any device with a browser from a phone to any desktop and even a lot of computer based applications (such as search engines or spam email harvesting engines). The tradeoff is that the user experience is less than optimal. Billy Hollis calls it the Cobol of the web referring back to the old time green screens. Whether we like it or not, HTML not only has it’s place now, it’s going to continue to have it’s place long into the future. Unfortunately, one of the reasons that many applications go this direction is not because they need ubiquitous reach but rather because it’s easier on the IT department to deploy it. This makes things hard on the user. Oops. Things can get better with AJAX. At this point, you are sacrificing some reach for functionality as you are giving up phones, PDAs and older browsers. Often that’s an easy decision to make.

On the right hand side of the continuum is Platform Optimized. This is really giving up broad reach for absolute functionality. As an example, the Halo 3 team knew which video card was in the target machine so they could tailor the experience for the edges of what’s possible on that hardware. That’s a good position to be in when you can be because it means that you can create the absolute best possible experience available. However, it would be hard to take that same experience and put it on any laptop. Short of knowing what hardware you are targeting, look at the platform that you are targeting. If you know that your users are using Vista or XP with the Service Pack 2, you can target WPF, WCF and so on because you know that it’s on the box. Backing up from there, if you can target .NET on the box, great.

Somewhere between the Web and Platform Optimized is the Supplemented Web with Silverlight and Flash/Flex. This is an exciting frontier to be in right now bridging the gap. It’s not full ubiquity but it’s more reach than platform optimized and it has a far superior user experience than HTML and CSS.

Microsoft and Adobe are working from opposite angles here. Adobe, with Air, is trying to take this supplemented web development paradigm to desktop. It’s an interesting idea to be able to bring HTML, Flex/Flash, embedding PDFs and so on to the desktop. Microsoft, on the other hand, is trying to take desktop application development paradigm to the web with Silverlight.

I think that there’s room for every type of experience along the continuum but you really need to evaluate your skill set and what type of experience you want to target when starting an application. Today actually, I had a customer meeting where we talked about a blended approach where we build a simple ASP.NET application for their ubiquitous touch and then target a click-once deployable application for those clients that are able to leverage it. This would be a great move on their part as it would give the best possible UX for the greatest possible audience.

There were representatives from Microsoft (me), IBM (Jon Ferraiolo), Yahoo (Bill Scott), Ryan Breen (VP of web testing company Gomez) and many consultants including Scott Davis and Stuart Holloway. The panel was run by Neal Ford (ThoughtWorks). Neal threw out the question designed to bait the panel, “Ajax, Flex, Silverlight – who’s going to rule the world?” I thought just for a moment about jumping up on the table and yelling “Silverlight!!!” but I thought that’s probably not the introduction I needed to the crowd so I waited. There were several of the guys that said that stepped up for AJAX because of the ubiquity factor. I stepped up for Silverlight/Flex talking about the continuum of experience from ubiquitous lowest common denominator web applications supplemented web to platform optimized. Silverlight/Flex fill that spot in the middle. It was fun to be the guy on the panel that was answering all of the Flex questions as well as the Silverlight questions. People asked about testability, accessibility, tooling and more. I had fun and was really happy that I had attended the RIA Jam in Crested Butte. I was also thrilled, with the crowd that we had in attendance, to announce the Moonlight project news. The whole panel went really well.

Rich Web technologies debated | InfoWorld | News | 2007-09-06 | By Paul Krill

*Update – ComputerWorld picked up the article – http://www.computerworld.com/action/article.do?command=viewArticleBasic&articleId=9035018&source=rss_news10.

Applying Lessons to Your Company

After Tim O’Reilly’s article “What is Web 2.0” in 2005, there has been considerable buzz around Web 2.0 technologies and the companies that use them. From the open platform Facebook to the rich user interfaces of web mail clients like Microsoft Exchange, the architecture of web applications is changing rapidly. While other companies have begun to see potential business value in Web 2.0 technologies, there is still uncertainty on how to integrate those technologies into corporate activities. How can you balance corporate security needs without negating the architecture of participation that is important in Web 2.0 applications? Where is the line between internal and external applications? What can we learn from the most successful public Web services and does it apply to our internal SOA?

In select cities, our guest speaker will be Jon Rauschenberger, CTO for Clarity Consulting. Together with the Central Region Architect Evangelists, we’ll discuss lessons learned and best practices around collaboration, rich user experiences, and data syndication from existing Web 2.0 application architectures. We’ll also provide guidance how current Microsoft platform technologies like AJAX for ASP.NET, SharePoint Server 2007, and WCF can be used to turn those lessons into a practical corporate Web 2.0 architecture. Finally we’ll take a look at the next generation of Microsoft technologies like Silverlight and Visual Studio 2008 and discuss how architects can design and deploy applications beyond the current Web 2.0 experience.

Hopefully I’ll see you there…