Here's a secret, whenever I stumble across a web application that I think is awesome, I look at its source-code in an attempt to figure out how they're doing it. Quite often, one can find quite a bit of information by looking at various JavaScript elements, not to mention how the various HTML elements are named.

Trello!

So, of course, when I discovered Trello, I had to take a gander. And I must say that I do love Trello. It's the first task organizer that I've actually wanted to use, and as one can see, I'm hoping to generate a nice set of tasks for eComic so I can actually keep track of my development efforts there.

At which time, I discovered that Trello doesn't appear to have any of the typical hallmarks by which I would get insights into how things are built.

Case in point, there wasn't really any elements on the page which contained little things like NAMES or IDs.

But, it did provide me the name of a few of the JS libraries that it used. I found the typical JQuery and JQuery UI libraries, and even the somewhat ubiquitous (at least for Frog Creek software products) JSON2 and MARKDOWN libraries.

But there were a few that I had never heard of at all:

• backbone.js
• highcharts.js
• socket.io.js
• underscore.js

Which is a list which sent me stumbling through the depths of... some developer-appropriate underworld.

Highcharts.js was an interesting find, as it's interactive charting object for web projects. But, there's nothing that well, mind-blowing hiding in its background.

That's where those other 3 classes come into play.  Underscore & Backbone work hand-in-hand to provide Model-View-ViewModel and Templating into web projects, while Socket.Io.js' whole purpose is for the development of real-time apps.

I read through these elements, and considered how they were integrated in LAMP environments, and then began pondering how I could integrate them into an ASP.Net/IIS world.

What I had, was that I wanted to implement the Model-View-ViewModel scenario, coupled with Real-time collaboration without having the browser POLL for the data changes. Which, let's be honest, is not exactly the most easy thing to do in ASP.Net.

The first thing I went after was the Model-View-ViewModel situation. While reading up on these elements, I discovered the KnockOut library.  This looked quite happy, and it was using the JQuery Templating engine, which I had previous experience with. Thus, I ran through its tutorials, and got my code generating templated HTML based upon a view model that had its data loaded by a secondary call to a web service which returns a JSON object.

Well, that had me dancing for a few days, especially after I got things like sorting working the way I would expect for it to on the application.

Which is when I jumped off the deep end. 

The other half of my task was to generate a real-time colloboration system, which basically entails the SQL SERVER having to notify the associated web-pages about changes to the specific set of data that is being displayed on a given web page.

The theory is that if I had two people looking at BOARD A, and three people at BOARD B, whenever BOARD A's data was modified, I wanted those who were looking at BOARD A to be notified (via the data being changed), but NOT those that were looking at BOARD B.

And I was doing this in IIS and .NET without the benefits of NODE.js and Sockets.Io.  In a few years, when websockets become more common (sadly, IE9 doesn't even have these things) then the way I did this might change. After all, HTML5 websockets are designed to provide this concept. Sadly, we're not there yet.

But, what we do have ARE Asynchronous HTTP Handlers, and the SqlDependency class.

Basically, what's happening, is that I have an asynchronous web service which I call when I load the page. This web service spawns off a new thread which registers a SqlDependency on the relevant query for a board (and based on last UPDATE time).  When the result set for that relevant query changes (i.e. values are MODIFIED!)  then it raises an event, which completes the asynchronous call to the handler.

This provides me the ability to have my SQL Server send out notifications to my HTML pages (which are stateless remember!) that its data has changed.  Thus, I have the secret to near-real-time collaboration!