Weblog Home Page

First, Happy New Year and Best Wishes for 2009 to all!

As part of my holiday reading, I recently picked up and read Designing for the Social Web by Joshua Porter, and I'd highly recommend it if you're interested in the subject or in designing web sites.

Usually I end up flipping through technical books, trying to capture the headlines and the gist of it, but this book was different - it had me pretty intently reading the material. The key thing was how this book got across the concepts clearly and succinctly along with some great real-world examples to complement. This book certainly shares a lot of insight, and is a fun read at the same time. It certainly made me realize some things and intuitively start comparing the subtle differences in experiences between social sites such as Facebook, or Live, though I am not going into that tangent any further right now :-)

There were a few key topics covered in the book that I'll just touch on here instead.

The first key concept is the notion of the Usage Lifecycle. The stages a user goes through and the hurdles a designer must design for aren't all that surprising, but are often overlooked. This diagram summarizes the concept, and the book is organized around incorporating this lifecycle into the design.

This lifecycle also lends itself to a funnel analysis model described in the book for gathering data and improving one stage at a time, and making that a more scientific and deterministic process. Basically the idea is of all possible users at one stage, only some proceed to the next stage (imagine flowing down the funnel)... and that the funnel is leaky no matter what you do - all you can do is continually improve so more users proceed further through the funnel.

Another interesting concept described in the book is the AOF Method (activities, objects and features) for designing social web applications. Activities define at very high level what the target audience does and in fact could be used to derive social metrics; social objects are what the users work with and the nouns of the site (each gets a URI to facilitate addressability), and features define the functions and verbs of the site.

Social web apps are all the craze these days. Joshua also has a blog that covers social web design topics including the usability lifecycle.

Looking forward, I'm hoping to blog about what I read that I find particularly interesting - lets see if this materializes into an actual trend through the rest of the year.

Its that time of the year - blogs looking back and others predicting whats to come in the year ahead. Some of these are certainly interesting and some thought provoking. I thought I'd share a few that caught my eyes during the past few days.

Top 10 Web Platforms of 2008 - This is one amongst many other top 10 posts from ReadWriteWeb. The #1 spot as you might expect is taken up with the iPhone and all the expected ones such as Facebook and Amazon Web Services were on there, including Live Mesh. While Adobe AIR occupied the #3 spot (I thought it would have been Flex), Silverlight was missing from the roundup. While I might be a bit biased, I think it will be interesting to see what might happen in 2009. The other interesting one for me was Twitter in the #4 spot - I've been on Twitter for a while, but only started actually posting, or tweeting I should say (lets see how that pans out over the next year). Seeing some of the recent discussions around deriving authority ranking, its certainly got the potential for an interesting platform in the making.

Top 10 Digital Lifestyle Products of 2008 - The #1 on this list was again from Apple, the App Store - to me it seems just as much an interesting platform as much as a consumer phenomenon - I think its only natural for a platform to include marketplace characteristics as an integral feature.

ReadWriteWeb has other interesting Top 10 lists including real-world web apps, semantic web products and others if you're interested.

Of course the prediction blog posts have also started appearing, and its fun to check them out. Again ReadWriteWeb has a whole set online. One I thought was interesting was about the online version of Office vs. Google Docs. I blogged about the Office sneak peek at PDC, and sharing those as a large project success story for Script#. Another prediction touched on some new user interface developments blowing us all... I can't wait to see. I think the Ajax and RIA evolution have brought UX to center-stage and a new found appreciation for design both in terms of aesthetics and functionality.

On a non-technical front, the mainstream news sites (now online) aren't to be left behind. New York Times has its Year in Pictures up as does Time and a three part series titled The Big Picture.

I love photography, and the National Geographic has some great photos that are both interesting, and motivational ... one can only aspire to have something published on there... some day! Their Photo of the Day archive has photos from all through the year and some are quite eye-catching indeed.

All of these photo sites could really benefit from Silverlight's Deep Zoom! They could also benefit from an API that lets people remix the content...

What did folks read recently that was interesting? Any good content you'd recommend?

About a month or so back, Daniel sent me an email about an idea he was working on - a fluent interface that allows developers to build professional UI complete with visual effects and how that related to my Silverlight.FX effects framework.

This morning he posted his work on creating composite animations in code that builds on top of Silverlight.FX. Very cool and super interesting! Here are a couple of examples from his post:

// Play a yellow highlight for one second when an image is clicked
Animator.WithNew(highlightImage)
  .Highlight(Colors.Yellow)
  .For(1.Seconds())
  .When(EffectBehaviors.Clicked).Play();

// A composite animation involving multiple effects
Animator.WithNew(compositeImage)
  .WithEasing(EffectEasing.QuadraticInOut)
  .Move(50).For(1.Seconds())
  .And().Resize(0.5, 0.5).For(1.Seconds())
  .And().Spin(360).For(1.Seconds())
  .And().FadeTo(0.5).For(1.Seconds())
  .Play();

Check out Daniel's post for more details and to download the samples and code.

I'll be posting Silverlight.FX sources itself on github rather than a zip attachment on blog posts in the near future so folks can more easily fork and experiment with ideas and additions. The SilverlightFX repository with latest binaries is already up - feel free to start watching it to be notified of checkins I will be making.

A Fluent API
For those familiar with jQuery, this will immediately ring a bell. The fluent API pattern can really help readability of code when the semantics of the code have a natural sequence and share some shared context - as in this case, the effective animation to apply and play.

What do folks think of it? I certainly wish there were some things in the .net framework that offered this style of fluent API, as it would help make code much more manageable (CodeDOM?).

Animations and the View Model Pattern?
Daniel's work brings a thought in my mind that I'll go ahead and share. Generally a view model shouldn't be concerned about visual presentation. And animations pretty much fall into the domain of presentation. For example, the code above would be written in the code-behind associated with some UI and be a part of the presentation.

However, the sequences defined above almost seem to define a meta-animation or animation model for the actual animation that is to be played. In fact Daniel talks about animators being reusable. I wonder if there is some merit in looking at these animators as a piece of model data that can be constructed by a view model, and handed to a view via an event. In turn, the the view, which subscribes to the view model, could in response materialize an actual animation instance by applying it to a visual element. Now why would I want to do such a thing, even if I could - an animation might be the result of some user interaction that is translated into an action on the view model. The alternative would be for the view model to surface a number of properties that the view or a value converter translates those properties into an animation sequence. Any thoughts on this subject?

I've increasingly adopted the view model pattern in favor of code-behind-less views since working on Silverlight and Silverlight.FX. Maybe that explains this thought process... :-)

I've been re-implementing portions of my site (projects.nikhilk.net) using ASP.NET MVC. One of the things I had to implement was login/logout functionality.

When you create a new ASP.NET MVC Application, you get a sample AccountController that has Login/Logout actions. This controller depends on an IFormsAuthentication implementation. There is a default implementation of this interface within the sample that works against the underlying System.Web.Security.FormsAuthentication APIs (SetAuthCookie and SignOut). A mock implementation of this interface can be supplied to the controller for purposes of unit testing.

However, when it came time to implement Login/Logout in my own controller, I felt odd calling into FormsAuthentication (even through an interface) directly from my actions. I felt like the action should simply do the job of validating credentials, and then return an appropriate ActionResult that then took care of generating the response: in this case, setting or clearing the cookie, and redirecting to the appropriate URL. So I created FormsLoginResult and FormsLogoutResult. These are fairly obvious and simple, but I thought I'd go ahead and share anyway.

First I'll show the updated Login and Logout methods on AccountController:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Login(string username, string password, bool rememberMe) {
    ...
    if (ViewData.ModelState.IsValid) {
        // Attempt to login
        bool loginSuccessful = Provider.ValidateUser(username, password);
        if (loginSuccessful) {
            return new FormsLoginResult(username, rememberMe);
        }
        else {
            ...
        }
    }

    // If we got this far, something failed, redisplay form
    ...
    return View();
}

public ActionResult Logout() {
    return new FormsLogoutResult();
}

The Login action now no longer needs to be coupled to the fact that authentication is tracked via a cookie, or where it should redirect to (the default home page or an url specified by a returnUrl query string parameter, or that it should even need to do a redirect in the first place). Same goes for the Logout action.

A long while back, I wrote an Ajax InPlaceEdit behavior that you could attach to input controls to enable in-place editing experiences in HTML. I was thinking of doing the same in Silverlight using the behavior framework in Silverlight.FX that I used to demonstrate adding auto-complete, text filtering and other functionality to a regular TextBox control.

Here is a scenario - an image with a title (ala Flickr). The title needs to be editable, but it would be suboptimal to show it as a TextBox (since it is not changed frequently). It is also suboptimal to go into a different page or different mode to edit it as that is one step too many. This is where the in-place edit comes into use. An example of this style of ux is in the screenshot below.

In HTML, an in-place edit textbox is simulated using a label in addition to the original input control, and hacking a bit to correctly overlay them and toggling visibility via script event handlers. One of the key strengths and capabilities of the Silverlight presentation framework and XAML is the fact that you can restyle and redefine the visual structure of any control including the intrinsic controls, such as the out-of-the-box TextBox, in a declarative (yet reusable) manner. So I was wondering how far I could get using just styling and templating, which goes far beyond CSS, as a first step without creating a behavior programmatically. Turns out you can actually go quite a ways.

If you haven't played with control styles and templates, the visual state manager feature or Expression Blend yet, I'd recommend reading this tutorial on the general flow for customizing Silverlight controls. I'll walk through the couple of edits I had to make to the default TextBox template to enable in-place editing in the remainder of the post.

I started by dropping a TextBox control onto the design surface in Blend. This is the XAML I am starting with.

<TextBox Text="Turtle" />

Earlier today, Live Search released a simple REST and JSON-based API for performing search with full flexibility for developers in terms of how to use the results (code named "Silk Road"). The previous API happened to be SOAP-based. Cool (and finally)! Check out the general documentation and the JSON example.

In brief, you issue a request to http://api.search.live.net/json.aspx?AppId={appID}&Market=en-US&Query={query_words}&Sources=web, and you get back a JSON structure as the response that looks like the following:

{
  "SearchResponse": {
    ...
    "Web": {
      "Total": 100,
      "Offset": 0,
      "Results": [
        {
          "Title": "...",
          "Description": "...",
          "Url": "...",
          "DisplayUrl": "...",
          "DateTime": "...",
          "Rank": ...
        }
      ]
    }
  }
}

My immediate thought was would my recent experimentation with REST via dynamic C# programming and turning dynamic method invokation into HTTP requests just work? In fact, can I use this new Live Search API without building a strongly typed wrapper? It turns out the answers are yes - the dynamic RestClient just worked. Here is my snippet of C# code:

I blogged about effects and transitions for Silverlight in the past - the first time on declaratively attaching some simple effect behaviors and the second time on using effect-enabled higher-level controls. I got comments asking more details on how this part of the Silverlight.FX works, especially how these features can be used programmatically and how such controls can be built, and I think this topic warrants a post all by itself (you can tell, I love this topic). I put this together some while back, but then PDC-related topics and vacation kept this from being published. Anyway, here it is...

You can download the code for entire Silverlight.FX framework and associated samples so you can play with it and use it in your own applications. The rest of the post describes the nuts and bolts of using and extending the effects and animation features.

Attaching Effects Declaratively
I'll start with the most basic scenario as a refresher so everyone is on the same page.

<Rectangle x:Name="redRect" Fill="Red" Opacity="0.5">
  <fxui:Interaction.Behaviors>
    <fxui:HoverEffect>
      <fxeffects:Fade FadeOpacity="1" />
    </fxui:HoverEffect>
  </fxui:Interaction.Behaviors>
</Rectangle>

In my last post, I blogged about the upcoming C# 4.0 dynamic feature and using it to work with JSON data in a more natural late-bound manner. I also alluded to where I was heading with the idea - issuing calls to REST services through a dynamic interface.

Specifically, I was thinking of being able to have a dynamic object represent a proxy to a REST service, and having its encapsulated late-binding behavior turn method calls into actual HTTP requests, serializing parameters into URL query string parameters, and finally processing responses (JSON or XML) into a dynamic object for the caller to poke into and extract interesting pieces of data. This post builds on the previous one, so be sure to check that out.

Also, do check out the comments. There was a lot of interesting commentary about how c# and dynamic don't mix together. It is an interesting debate no doubt, and I thought I should summarize my perspective. I personally tend to think dynamic is just another tool, and when used appropriately it is quite nice. Often times there is a small bit of code where late-binding would help, and its nice to be able to do so in c#, without switching to another dynamic language and losing all static typing in the process, or having to split your code artificially. Instead I envision using and encapsulating late-binding code within an object, and then using that object itself in a strongly-typed, compile-time-bound manner in the rest of the app.

Back to REST services... it is interesting to look at an example, such as Flickr.

Looking at its API documentation page, you can see Flickr offers around 100 or so APIs. Every single API has numerous permutations of parameters (just look at search for example). It would be an fairly big and non-trivial task to create a full-featured toolkit, and keep it up to date as the service evolves. More often than not an app just wants a handful of APIs. What if there was a generic and dynamic REST proxy that could out-of-the-box support typical REST services. That would at least facilitate quick and dirty prototyping even if you do decide later to turn just the APIs you care about into a strongly typed REST client library for the actual implementation. The same pattern repeats itself with other services such as Amazon, Facebook and so on.

Once I had this generic REST client coded up, I could write the following code to work against Flickr:

C# 4.0 features a new dynamic keyword that allows you to mix in a bit of late-bound code in the midst of your otherwise statically typed code. This helps cleanup the string-based programming mess that is a characteristic of late-bound code. In fact, there are a number of scenarios that would benefit from dynamic typing in my opinion in addition to interop with other dynamic code (such as Silverlight talking to the DOM or a .NET app talking to Office automation APIs). For example:

• Accessing JSON data
• Accessing XML nodes and attributes
• Experimenting and calling into with REST services without an explicitly coded up proxy
• Access to settings (eg. Isolated storage settings in Silverlight, or configuration settings such as appSettings)
• ... and more

Traditional dynamic languages are striving to introduce some degree of static typing (eg. type information in ActionScript 3, and the unfortunately failed EcmaScript 4 attempt) for perf and more appeal. On the flip side, C# is evolving nicely by introducing dynamic typing through a static type called dynamic (nice oxymoron) and offering not just a nicer syntax, but a much more intuitive model for these scenarios. I can only wish the C# 4.0 was here now!

Anyway, I am still excited about this feature, and given the VS 2010 and C# 4.0 CTP are available, I decided to play with a few of the above listed scenarios. In this post, I'll describe the JSON scenario, and in a subsequent post, I'll write about the REST services scenario, so stay tuned and come back for more.

Yesterday's PDC keynote featured a number of interesting products and technologies, such as Office 14 and Live Services, that today involve fairly large-scale (code size, team size and project length) Ajax development. The demos were just amazing - Kudos to the product teams!

Behind the scenes, on the engineering front, Script# provided the toolset and script authoring model. I've been working with both teams for quite a while now, and am really excited to be able to finally share these particular uses now that they are public (since to be honest, I was myself quite pleasantly surprised to see the model of compiling down to script scale up in this manner).

Live Mesh features an online desktop experience within the browser to enable remotely accessing files from any browser. The Live Framework exposes the underlying platform to .NET applications and script applications alike. The script framework portion of the SDK, like the UI, is based on Script#. The documentation for this framework on msdn was built from doc-comments in the originating c# code, which double up to enable script intellisense in Visual Studio.

Next in the keynote was a quick peek at what is to come in a web-ified Office 14. Some of the highlights included Excel, OneNote, and the Ribbon interface. These apps bring document sharing and collaboration to a whole new level. What is really cool is the live editing and continual sync'ing with the actual good-old, full-fidelity Office document file on the server or with another concurrent editing session in the full-blown desktop Office suite. These apps build on top of the ASP.NET Ajax framework, and were for the most part coded in c# and converted to javascript using script#.

The devs clearly recognized the value from using standard .NET tools and C# for engineering the thousands of lines of script and Ajax code that power these great consumer and developer experiences.

The PDC announcements keep flowing. Today's keynote was full of them - with the first Windows 7 preview, Live Services announcements and Live Mesh updates, a peek at Office 14 and even hints at whats to come in the Silverlight space. The one I want to share some thoughts on is the Live Framework one.

The true developer platform underlying the Live Mesh that enables file sync and sharing across devices was finally unweiled in full form and there were a couple of demos on how both client apps (a WPF photo app) and Web apps (such as the BBC iPlayer) can use sync and data sharing to offer users new functionality including offline experiences. I personally think sync (not just between the client and the server, but in a peer-to-peer fashion across devices) is the interesting space for next-generation Web applications to differentiate on, especially as raw offline storage and eventually offline execution itself get commoditized by client runtimes and browsers alike. It is great to see the Live Framework enabling these capabilities while taking care of the underlying plumbing and operations. I alluded to these forthcoming APIs in my post on Live Mesh when it was first introduced. Now they’re here...

There is an interesting Live Framework diagram detailing various aspects of what happens behind the scenes.

Oh, and I can't wait to get the new version of Live Mesh as well, with Mac support later this week. I've gotten into the habit of using it to share files as well as remote into all my machines.

Windows Azure took center stage at PDC this morning during the keynote (watch here). The cloud computing space is now really heating up with competing platform plays from Google’s AppEngine and Amazon’s recent EC2 announcements. In some sense this is perhaps the re-birth of Windows as a platform that enables developers and the ecosystem to build on a whole new set of capabilities and scale for the Software+Services world, in much the same way as Windows fueled the desktop software industry in the past "era".

The really compelling thing about this particular development platform especially combined with other technologies such as Mesh, SQL and Silverlight is that you’re likely already familiar with it - if you’ve been developing ASP.NET and .NET applications using Visual Studio, either on the desktop or your own servers or hosted servers, you’re already got a good head start in working against this new platform. Earlier in the year I blogged about the .NET spanning across different presentation tiers and ASP.NET as a common back-end. This much anticipated announcement essentially adds a new dimension - Windows and .NET as the common platform that really scales.

I am eagerly anxious to build both apps and frameworks that leverage the new possibilities. Make sure you sign up today for getting your invitation code to start experimenting with Azure Services as well.

Also, anyone notice the cool new branding and blue hues in the next generation of logos? Azure itself is a cool bluish color… I wonder if there is a connection there? :-)

A general on-going discussion in software development is around features, complexity and simplicity. During the past couple of weeks, I've been part of more than the usual number of discussions ... my inbox seems to be filled with long mail threads about what features should be added and what should not be. And then there are some comparisons between some "competing" shipped technologies. I won't name names here. :-)

One of my colleagues shared a Dilbert strip on this subject and I thought I'd post it here for some weekend humor.

You can find this strip and some others on feature creep in Another Day in Cubicle Paradise.

I wish there was full text search for the entire collection of Dilbert strips ... the closest I've come to is Google's Book Search.

Earlier this week, the much anticipated Silverlight 2 was finally released! Personally speaking, it's a day that's been coming for a while - ever since my days prototyping the Core CLR engine running in the browser some two+ years ago now... and already, we're busy building the next layer of frameworks beyond the foundation provided by the CLR and the graphics/media engine and basic controls. Wow!

I'm working on one such effort of building an application framework on top of Silverlight these days at work, which as usual for any v1 product takes time. Over the past few weeks, I've also been working on updating Silverlight.FX to work against the final SL2 build, as well as adding a bunch of new goodies into the framework.

The area I want to talk about in this post is using and writing Silverlight controls that are effects and transitions enabled. This picks up from my last Silverlight.FX post that demonstrated procedural animations and declarative effects and transitions. The first iteration of this framework allowed an app developer to add some richer user interaction by associating effects and transitions to basic events such as clicks, hovers, focus etc. This post takes that one step further - higher level controls that intrinsically support such effects and transitions.

I have three controls to share in the context of two sample applications (screenshots below - click to run). The first application is Flickr Tiles - a basic Flickr browser (yes, I gotta have a photos sample), and the second is a simple Task List sample (yes, I've used the Task List scenario in a number of contexts in the past - what can I say - it's a nice simple scenario).

Static screen shots don't do justice to animations - so I'd encourage running the samples to get an idea of the application experiences I am talking about enabling via controls before reading on. You'll need to make sure you've installed the final build of Silverlight 2 if you haven't already.