I had a recent conversation in which friend "C" asked what made Hemlock better than Ajax:
C: So basically AJAX is like this:
C: How about now? how about now? how about now?
C: ...Really?
Ron: Yup.
C: That's so funny.
C: The web's current top notch technology is like an impatient and really annoying child
Ron: Yeah
Ron: So the server says, "Not yet. Not yet. Not yet. Wait... not yet. Wait....... not yet."
Ron: This is why Hemlock's like, "Okay, SHUT UP. I'll tell you when."
Ajax is like an annoying child, nervously polling the server in hopes of something new. An Ajax app might vary the polling frequency or use long polling, but it still means opening a new connection every time the browser wants to check for new data. Opening a new connection means network latency and network latency is the enemy of real-time web apps.
Hemlock takes a different approach: The browser opens a single connection to the server. Whenever there's new data, the server pushes it to the browser via that one connection—no need for the browser to keep polling, and no need for additional connections. That means noticeably less network latency giving you ultra-fast, real-time data transfers among your users.
The ingredients
Hemlock builds upon two technologies:
XMPP: Also known as Jabber, XMPP is commonly used to enable chatrooms, like Gtalk or Facebook Chat. However, instead of just sending text, Hemlock lets you send all kinds of data at the speed of instant messaging. Even better, XMPP is designed to scale up and send data to many people at once, so you can push that data to multiple people in real-time.
Flash: With Flash, Hemlock can open a single persistent connection between the browser and the server. You'll also be able to build beautiful, responsive user interfaces that send and receive network data very easily.
When writing Hemlock code, you'll primarily be writing ActionScript (specifically, AS3), which compiles into a Flash SWF file.
Imagine what we can do with this. We can create a blank, Flash-based canvas on which someone draws a picture. Then, using XMPP, we can let other people join that same canvas (like joining a group chatroom). Whenever someone draws on that canvas, that data is sent to everyone else in the room, and everyone sees the same drawing. In real-time.
We've built this for you. It's called DrawingWidget, and it'll be part of the upcoming code release.
Sending and receiving data
Here's how you send data with Hemlock:
// GameEvent.CLICK is a constant string:
widget.sendDataMessage(GameEvent.CLICK, {
mouseX: 314,
mouseY: 159
});
And here's how you receive data with Hemlock:
widget.registerListener(container, GameEvent.CLICK, onGameClick);
private function onGameClick(event:GameEvent):void{
Logger.debug('Incoming click: '
+ event.options.mouseX + ' x '
+ event.options.mouseY);
}
Simple.
In this micro-example, GameEvent.CLICK is a string that tells what type of data is being sent. This way, the recipient knows how to process the incoming data payload.
How to build a Hemlock app
A Hemlock app consists of two types of components, a HemlockContainer and some HemlockWidgets.
HemlockContainer
The HemlockContainer is the heart of the Hemlock app, and is the ActionScript compiler's starting point. The container is responsible for maintaining the app's models: it tracks the app's state, such as the list of users playing a game, and how many points each user has. The container also holds a collection of HemlockWidgets, described below.
HemlockWidget
While the container maintains the app's model data, the HemlockWidget maintains the app's views: creating the user interface and handling user input, such as chat messages and mouse clicks. The widgets packaged with Hemlock are designed to plug into any Hemlock app. For instance, we'll provide ChatroomWidget, which lets users send text-based messages to each other, and DrawingWidget, which lets users draw pictures on a single canvas in real-time.
Next steps
We're getting close to releasing some code for you to play with, including more setup notes and an example app. I'm looking forward to seeing what you come up with!
Tell me what you think @ronalddevera!