First look at Project Silk – Microsoft’s HTML5 development guidance

Project Silk is an example project designed to provide guidance on implementing HTML5 applications from the Microsoft Patterns & Practices bods. I’ve yet to have a good dig through it but at an initial glance it looks promising.

They’ve heavily utilized pubsub in for the js architecture – something I’m particularly bullish on at the moment. Instead of reaching out to something like Backbone.js for their View/Controller interaction, they’ve opted to use jQueryUI widgets. I think there’s more that can be done here but it’s pragmatic start and I’m glad to see them bring attention to the UI widget factory.

; $(function (mstats, $) {
    $.widget('mstats.fillupsPane', {
        options: {
            active: false,
            id: null
        },
        _init: function () {
            mstats.fillupsPane = this;
            mstats.pubsub.subscribe(mstats.events.vehicle.fillups.data, this._newFillupsDataHandler, this);
            this._fetchData();
        },
        fetchData: function (vid) {
            this.options.id = vid;
            this._fetchData();
        },

        // Large bulk of code excluded...

        destroy: function () {
            $.Widget.prototype.destroy.apply(this, arguments); // default destroy
            mstats.pubsub.unsubscribe(mstats.events.vehicle.fillups.data, this._newFillupsDataHandler, this);
        }
    });

} (this.mstats = this.mstats || {}, jQuery));

There’s also a suite of js tests to go with the code in QUnit – I’ve not been able to see if this is integrated into VS yet but I’m glad to see they’re there. They’ve also included a number of automated acceptance tests that can be run with VS which I’m also fond of them promoting.

So there’s a couple of directions I’d like to the project go. (disclaimer: I’ve not had a chance to actually run through the app properly so if I may well be off base on this). Currently the sample Millage application that they’re throwing together seems more of a “traditional web app with lots of javascript”, what I’d like to see is advice on creating a large “single page application”(SPA). SPA’s is currently where having a robust js architecture goes from just a good idea to essential. Of course, most developers are probably still not that far along so maybe they’re on the right side of the fence as far as guiding .NET developers go.

One of the tools that I think is really needed for decent js development in the .NET space is something that will provide dependency management for the client. I’m currently quite keen on a node.js tool called stitch which will bundle all your client js into CommonJS modules so we can use require and exports ala server side node. I’d love something like this for ASP.NET and to be quite honest if I get some spare time I’ll probably take a stab at it myself. I think if this was done well it could be a great direction for how to provide static analysis features like the Intellisense that VS devs love.

One of the first things I’d like to see the Silk team do is actually post their code on CodePlex as opposed to just providing an exe. Having to extract it every time I want to read it gets very annoying…

I’ll write some more once I’ve had a better chance to go through it. But I’d encourage ASP.NET developers to take a look. I think the team can do a lot more, but it’s a great start and something I feel ASP.NET developers will already likely learn a lot from today.

I’ll be speaking on integrating ASP.NET and jQuery at this month’s NYC .NET Meetup on the 15th. I’m sure I’ll find the time to mention Silk as well. Please drop in if you’re interested.


Originally posted on Thoughts from David Padbury.

Advertisements

WCF WebSockets: First Glance

I finally got around to playing with the first drop of WebSockets support for WCF. I’m pretty familiar with WebSockets as I’ve been using Node.js to play around with them for quite a while now. The server API in Node.js is wonderful as it couldn’t be simpler – to demonstrate this, take a look at how we’d create a basic echo server.

var ws = require("websocket-server");

var server = ws.createServer();

server.addListener("connection", function(connection){
  connection.addListener("message", function(msg){
    server.send(msg);
  });
});

server.listen(8080);

When I heard that Microsoft was planning on integrating WebSockets into WCF my first thoughts weren’t all that positive. Now I know it’s not quite the case since .NET 4, but WCF has had a reputation for rather large complex API’s and heaps of XML. I was dreading what a WCF take on the above would look like. Turns out, perhaps I should be a little more optimistic.

class Program
{
    static void Main(string[] args)
    {
        var host = new WebSocketsHost(new Uri("ws://localhost:4502/echo"));
        host.AddWebSocketsEndpoint();
        host.Open();
        Console.ReadKey(true);
        host.Close();
    }
}

public class EchoService : WebSocketsService
{
    public override void OnMessage(JsonValue jsonValue)
    {
        Send(jsonValue);
    }
}

That’s really the kind of simplicity I was really hoping to see. Now the interesting question is how it’s going to look when dealing with multiple clients. Node kind of has an advantage here as it’s entirely single threaded (yeah, I said advantage), but with .NET’s recent concurrent collections and a rather nice API for dealing with events (Rx) I’m feeling pretty hopeful.

With CSS, LESS is more

I’ve got a bit of a secret – I’ve never really liked CSS.

Don’t get me wrong, it’s a nice idea. I’m certainly all for separating content and presentation. And yes, most importantly, it really does work in practice. Just take a look at any of the many CSS galleries that demonstrate how powerful it can be in hands much more talented than mine. However, just like there are some awesome php applications, it doesn’t mean I actually like php.

The problem I have with CSS is that I find I repeat myself a lot. For example, if you have a standard colour or margin width that is reused throughout a site, you have to repeat it every time it’s used. Now one of the first things I learned about programming as a kid is that if you’re repeating the same value, then put it in a variable. CSS, however, doesn’t have variables. Another example is when you have to frequently reuse a series of CSS declarations, like setting colour, font-family and font-weight. There’s no easy way to do that in CSS either. DRY is one of the most basic software engineering principles, and to be honest, CSS completely fails.

LESS is a Ruby tool that extends CSS to make developing it a more pleasant experience. It provides a language that is a superset of CSS – it’s the same language we know but adds variables, mixins (like methods) and basic arithmetic, among other things. Once you’ve written these LESS files, they will be compiled to plain CSS that will work just the same in any browser. Although LESS is a Ruby tool, it doesn’t mean you have to start developing everything in Ruby. In fact, the first project I used LESS on was a Java project, and the idea of requiring a Ruby install on every developer’s workstation and the build server was less than attractive. Fortunately, JRuby is an excellent Ruby runtime and installing a gem (such as LESS) couldn’t be easier. We even put JRuby into our project’s tools directory and checked it into source control. That enabled every developer and the build server to happily run LESS as part of the build process with absolutely no setup or installation.

To demonstrate what LESS can do, let’s start with a great example of CSS. Recently Christian Heilmann put together an excellent Sticky Note Effect demo to show how powerful CSS3 can be. If you’ve got a reasonably recent browser, check it out here.

CSS Sticky Note Demo

It’s a wonderful demo, but if you were to take a look at the CSS, you’d see a lot of repetition. For example, due to the way browsers have evolved support for some of the more recent CSS standards to define rotation, we have a large number of rules for a simple declaration.

-webkit-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-moz-transform:rotate(-6deg);

With LESS we can make this much more attractive. By simply defining a rotation mixin once with these rules, it becomes only a single statement to reuse them.

.rotate(@rotation) {
    -webkit-transform: rotate(@rotation);
    -o-transform: rotate(@rotation);
    -moz-transform:rotate(@rotation);
}

/* Then to use... */
ul li {
    .rotate(-6deg);
}

Another part of the language that I really like is the ability to nest rules. Take this example from the sticky note css:

ul{
  overflow:hidden;
  padding:3em;
}
ul li{
  margin:1em;
  float:left;
}
ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  /* lots more... */
}

The above is setting rules for ul elements, any li child elements of that ul and then any a elements of those li’s. In this example it’s not too bad, but imagine that the parent element was a specific id. If you wanted to change that id, you’d then have to change every rule related to it. LESS makes this scenario blissfully simple with nested rules. To write the same as the above, the following would be used:

ul{
  overflow:hidden;
  padding:3em;

  li {
    margin:1em;
    float:left;

    a {
      text-decoration:none;
      color:#000;
      background:#ffc;
      /* lots more... */
    }
  }
}

To finish these examples with where I started, LESS adds variables, which means we can define a named value once and reuse it throughout our styles. Need to change it? Just change it in one place.

@background: #666;

body {
   background-color:@background;
}

While LESS is already a super useful tool for developing CSS, the next version is shaping up to be even more exciting. LESS version 2 is written entirely in JavaScript. On the server, this will be run on node.js, but it can run directly inside the client’s browser. To demonstrate this I’ve rewritten the Sticky Note CSS in LESS, and instead of compiling it into CSS first, I’ve just included the new version of less.js and a link to the LESS file. Take a look at it here. When you hit the page, it’ll immediately download the LESS source, compile it and apply it to the page. Is this a good idea for a production deployment? Probably not. That said, it’s a very quick process so it’s an option. It’s certainly great for a demo like this and very useful during development. Dmitry Fadeyev has a great writeup on less.js here.

Find more information on LESS here. If you’re an die-hard .NET developer, you may want to check out the .NET port of LESS – dotLess.