This session was a more general “patterns” type of session where there were several UI patterns demonstrated to help you make a better user experience when working in AJAX.

The patterns and principles discussed can be found in the Yahoo! Design Patterns Library.

The idea is that a common vocabulary needs to be arrived at so designers and developers can have meaningful discussion about user interaction.

Principle - Keep a Light Footprint The idea here is that in a rich Internet application you can reduce the number of steps in a workflow or process and ensure simple interactions are simple. Identify pain points in the process and shorten the path. Design for engagement - keep the user’s attention. An interesting side note - it’s good to make things easier, but in some cases a design can have a very real economic impact on the application - for example, providing a lot of pre-action-lookup (like if Google Suggest returned search results, not just search terms) might make your application less scalable and require a lot more hardware to support.

Patterns: Inline Editing, In-Context Tools, Drag and Drop.

Principle - Cross Borders Reluctantly If you don’t have to take the user to a whole new page, don’t. Rethink flows - base the flow on the user model, not a page model. Rethink paging - could you use scrolling or a carousel instead?

Patterns: Hover Details, On-Demand Scrolling, In-Context Expand, Inline Assistance, Lightweight Popups, Lightbox.

Principle - Give Live Feedback Let the user preview the result of their action where possible. Provide things like field validation, inline previews (like a clothing store that lets you see what a piece of clothing might look like on you prior to you purchasing it), and so on. Try to prevent errors before they happen. If you refresh data on the page, be careful it’s not distracting or annoying. When an action takes place, let the user know what happened.

Patterns: Live Suggest, Auto Complete, Periodic Refresh, Busy Indicators.

Principle - Offer an Invitation Let the interface be discoverable by inviting the user to take relevant actions. Bridge the new with the old - use hyperlinks (a commonly understood indicator of action) provide a route to discovery, for example. Keep actions out of it - if you take actions as the user explores the interface, it makes them reluctant to search out new functionality. Unfortunately, there’s no easy/single solution to this.

Patterns: Hover Invitation, Tour Invitation, Drop Invitation, Tooltip

Principle - Show Transitions Show a user what happened (like when an item is deleted) by using transitions. For example, if an item is removed from a list, fade the deleted item out and shrink the list in an animated fashion to show the item being visually removed.

Patterns: Self-Healing Transition, Slide Transition, Active Spotlight.

Anyway, some great pointers. Definitely gives me some ideas for ways to solve some of the UI problems we face every day at work.

I just emerged from a standing-room-only demonstration of how to work with Silverlight and JavaScript. It seems that the managed code way of working with Silverlight is a 1.1 thing that’s coming soon (before Summer 07? I’d have to see the slides again); if you want to write a Silverlight application today, you’ll be using JavaScript.

It looks like working in Silverlight with XAML with JavaScript is a lot like working with the HTML DOM in JavaScript. You get elements, you manipulate properties, you respond to events… and it’s just as hard to debug as your standard client-side JavaScript app. The demos were interesting, showing how you do different things like start animations, intercept mouse events… but they were far from bug-free. I guess that’s just one of the pain points for early adoption.

Beyond that pain point, though, it looks pretty good. No harder than doing stuff you’re probably already doing, but with a much richer end result.

Two of the key things shown were the Downloader and the CreateFromXAML call.

The Downloader is a component that allows you to synchronously or asynchronously download content. It will also report on the status of the progress as it goes, so you can have an actual progress bar. This looks useful if you’ve got some large content like a lot of video where you want to download some to cache before starting the video playing. The Downloader supports ZIP, too, so if you have some compressed content to download, you’re set to go.

The CreateFromXAML method is sort of like an “eval” call - it takes some XAML that you’ve built up in code and parses it into native XAML nodes that can be inserted into your application. This is handy for building XAML content programmatically - say, adding rows to a table.

I like what I’ve seen so far from Silverlight, but I’ve yet to get some hands-on. I think my next stop is the lab area where you can get some first-hand experience with it by going through some walkthroughs and such.

I admit I’ve been lax and haven’t been installing the Visual Studio “Orcas” releases. I’ve followed the cool stuff, but I haven’t actually installed it. This session made me wish we were already in this.

The session was called “Developing AJAX Applications with Visual Studio ‘Orcas’” but it should have been called “New ASP.NET Controls and How Visual Studio Supports JavaScript Development.”

In the non-JavaScript developments, we see new controls of interest in ASP.NET 3.5. The ListView control is sort of like a repeater but gives you a little more control over list creation. For example, you could set a list template to something like <ul runat="server"></ul> and a list item template of <li><%# DataBoundField %></li> to make an unordered list… and the output HTML is no more or less than exactly what you specified - great control over the HTML. The DataPager control is an extender for any databound control that allows you to easily add paging

  • no more having to natively support it in your controls.

The JavaScript developments were the big show here, though. Full Intellisense for JavaScript including keywords, declared variables, properties, methods… even if you reference an external JavaScript file, it’ll figure that out and give you Intellisense for all of those methods. And it’s smart about it - it does dynamic type evaluation on variables, for example, and figures out that at the time you’re asking for Intellisense it’s, say, a number, so you only see the Intellisense for methods applicable to numeric objects. Hot.

To assist in the Intellisense effort, they’ve added XML documentation support such that the Intellisense is driven by the XML doc comments in your script. If you document your script, it’ll appear just like standard .NET Intellisense with method descriptions, parameter information, and so on. To get around the loose typing of JavaScript, you add attributes to the XML doc comments to tell Intellisense what the expected parameter types and what the return type of the method is (<param name="myParam" type="String">Some Parameter</param>). Specifying the return type is how the Intellisense knows the way to treat return values from your methods. ASP.NET AJAX libraries will all be commented this way.

JavaScript debugging is vastly improved, too. If you have a script in your page, you can set a breakpoint in the page and *gasp* when you run the page it’ll break on your breakpoint. This is a huge improvement because you used to have to figure out where in your ASPX the script really was and try to figure out whether the breakpoint was actually hit… and sometimes it wasn’t… it was just a nightmare. Now? Brilliance.

conferences, aspnet, net comments edit

Ray Ozzie opened the keynotes today and gave a general intro to MIX07. This was a pretty general overview and focused a lot on the release of Silverlight, Microsoft’s Flash competitor. It was an interesting talk, but was mostly benign.

After that, Scott Guthrie came up and that’s when the really good stuff started. Lots of great announcements:

  • Silverlight is out, released for download just a little bit ago.
  • Silverlight comes with a cross-platform .NET framework that runs in the browser. With that comes a lot of interesting things:
    • Initial support is for Firefox, IE, and Safari. Yes, it runs on Mac.
    • You can now write client-side code on any Silverlight-enabled browser in any .NET language you like.
    • Client-side code in .NET has HTML DOM access including all of the browser components (status bar, etc.) and runs thousands of times faster than JavaScript.
    • There are robust data services including LINQ and caching built-in.
  • There’s a new service called Silverlight Streaming that lets you upload your Silverlight application and assets, up to 4GB, and Microsoft will host it for free. That’s a huge bandwidth-saver for folks wanting to use Silverlight to stream video, etc.
  • New Visual Studio (Orcas) feature - Core CLR Remote Cross-Platform Debugging. You can runtime debug a Silverlight application executing in a browser on another machine, including remote debugging to a Safari instance on a Mac. This is huge. Guthrie demonstrated one of these sessions, intercepting events and changing values in the debug session on the fly and those values get real-time updated in the target session. Very, very cool.
  • Silverlight projects seem to work like other Visual Studio projects, including the ability to “Add Web Reference” and have your Silverlight applications call web services.
  • If you have a web application project in Visual Studio, you can put that in the same solution as your Silverlight app and then select “Add Silverlight Link” to your web application. When you build your web app, the Silverlight app automatically rebuilds and deploys.
  • The dynamic language support in .NET is growing. They’ve got support for Python and JavaScript and are adding official support for Ruby via IronRuby. They’ll be releasing that source just like IronPython.
  • This dynamic language support has an additional meaning - you can write your Silverlight apps in any of those languages as well. And, again, they’ll run cross-platform. Huge.
  • It installs in like three seconds. The demo showed a user experience for someone coming to a Silverlight app and not having the plugin installed. From the point where the user clicks the “Install” link to the point where the app is running was about three seconds. It was super fast.
  • After Summer 07 they’ll be adding even better mobile support. It has pretty good support now (also demonstrated) but I guess they’re adding more.

There seems to be a big focus on delivering video with Silverlight. Most of the demos they showed involved integrating video. It does a lot more than that, and I can envision a lot of cool XAML based apps I could write, but there’s a huge video push, going so far as having NetFlix come in and demonstrate an application where you can watch movies on-demand.

The Silverlight community site is at http://www.silverlight.net. Check it out.

The session on AJAX patterns was very cool. In one demo application (a photo album application), six specific patterns were addressed and a little on how to solve it was also shown.

Pattern - Script to Enable Interactivity Sort of a no-brainer, but using script to enable interactive elements is sort of the basis of a rich application. In this particular pattern, it was more about making it easy to script what you’re looking to do. ASP.NET AJAX offers a lot of shortcuts to help you do that scripting.

This pattern also addressed the notion of separating script from behavior. ASP.NET AJAX introduces the notion of “extender controls” that allow you to use server controls to modify the behavior of controls in the page. An example was shown where some existing markup got modified by adding an extender - a server control registering script to modify HTML on the client side. It’s a great way to do the separation.

Pattern - Logical Navigation AJAX applications have typically lost the ability to use the back/forward buttons and the ability to bookmark a page. ASP.NET Futures contains a “History” control that allows you to enable your AJAX elements to support state, sort of like ViewState, but on the URL. Modifying the page contents modifies the browser URL and, thus, enables logical navigation and bookmarking. As long as your scripts store enough history state to be able to recreate a logical view, this looks like a great way to overcome some shortcomings in AJAX.

Pattern - Update Indicators Notifying a user of what changed when an AJAX request finishes is helpful so they can see the results of an action. The UpdateAnimation control in ASP.NET AJAX is one way to do that - it performs AJAX updates in an animated fashion so movement is the key for the user. There is a prototype UpdateIndicator control that scrolls the page to the location of the change and does a highlight animation on the change; this isn’t in ASP.NET AJAX now but will hopefully be in the future.

Pattern - Smart Data Access Possibly a poorly-named pattern, but the idea is that you should use HTML properly such that external services like search engine crawlers or programmatic site map generators can correctly access/index the content you post. Use tags in the correct semantic sense (e.g., if it’s not a header, don’t put it in <h1 /> tags). Also, keep in mind the way you display pages in non-scripted environments, such as in a search engine crawler or when the user has script disabled. Your content should look good either way.

Pattern - Mashups (Using External Services) There’s a lot of data out there, and a lot of services providing added value. Make use of them where you can. The example shown was a call to Flickr to get images and data.

What was interesting about the discussion of this pattern was less the “what” than the “how.” Browsers don’t allow cross-site scripting, so you have one of two options to get third-party data into your application.

You can use a server-side proxy where you create a proxy on your site that requests the third-party data. Your application then talks to your proxy to get the data. This is a good general-purpose solution and allows you to take advantage of things like caching calls on your site and gives you the ability to manipulate the data before passing it to the client (possibly optimizing it). The downside is that it does use up your server’s bandwidth.

The other option is JSONP, which is a way you can add a script reference to your page that requests data in JSON format from a third-party service and when that data gets returned, it gets passed to a callback that you specify. ASP.NET AJAX supports this by allowing you to specify your own executor in an AJAX call, so the result of the call gets passed to your callback.

More Resources ASP.NET AJAX AJAX Patterns Yahoo! Design Pattern Library