Intro

WebSockets is a technology that enables bidirectional communication between web browsers and server side processes. It provides a persistent connection between client & Server, hence enabling ‘push’ abilities where you can push data/notification to browsers from the client. Other client communication options to compare it with would be Ajax
and Comet (basically Ajax with long polling).

Specifications

• WebSockets API – This focuses on the client side programming model.
• WebSockets protocol – Describes the client/server communication in more detail. More complicated and 51 pages long. The WebSockets protocol is still actively being changed.

Browser Support

• Google Chrome 4.0.249.0 and higher (v5 has WebSockets enabled by default)
• Safari 5.0
• FireFox 4.0 beta 1
• IE 9: TBD

There was a suggestion that Apple have decided to disable WebSockets in iOS4 but this is unconfirmed and the speaker suspects Apple will support WebSockets in the future.

Server side support

• Apache Server – not supported yet
• Py WebSocket – designed for use with Apache Server (actually implemented by Google Chromium team.)
• There is also a DJango solution: django-websocket
• Jetty WebSocket Server – Jetty has supported WebSockets since last September. This seems to be a good option.

However, note that there is no standard service side Java API. Each Java container has it’s own API. Therefore it will likely be difficult to write WebSockets for one app server and do a straight port to another app server.

Projects

Other Java Projects supporting WebSockets:

• GlassFish/Grizzly (see a DZone posting on it here)
• jWebSocket
• JBoss Netty (see patch here)
• Caucho Resin

Sean finished by showing the Google Quake demo (also reported here).

The conclusion of the talk was on how to gracefully handle browsers that don’t support WebSockets (e.g. IE8). The main option here seems to be “The Graceful WebSocket“. This resorts back to using AJAX long pulling if WebSockets isn’t supported in the browser.

My Thoughts

WebSockets looks like one of the most interesting technologies that fall under the HTML5 umbrella. If it gets wide browser support (e.g. IE9), and perhaps some standardization on the server side, it could really take off and even potentially over take Ajax. Definitely one to watch…

Intro to HTML5

Seth Ladd’s introduction was the highlight of the night for me.

New JavaScript capabilities

He started talking about the new capabilities of JavaScript Libraries:

Web storage

aka Local Storage or DOM Storage
A way to store data on the client side (crash safe), making it crash safe and a good way to store, for example, user preferences. It is similar in some way to cookies, but offers more storage (5-10MB)and better programmatic interfaces.
http://diveintohtml5.org/storage.html

Web SQL Database

Web Storage is useful for storing simple key value pairs but not for more complex relational data. That is where the new Web SQL Database API comes into play. It brings SQL to the client side. Databases can be created on the fly, updated queried like any server side database and can involve asynchronous transactions for a more responsive user experience.
http://html5doctor.com/introducing-web-sql-databases/
http://openbit.co.uk/?p=135

Application Cache API

Prior to HTML, most browsers performed some kind of caching, but it could be inconsistent and of limited value (e.g. try refreshing a web page when you have no internet connection). With the offline application caching API, you (the developer) can specify exactly what should be cached by using a manifest file. This can result in a faster browser experience with less load on the server and, of course, means web pages can still be browsed even when you go offline.

Web Workers

Web workers are kind of like threads for your HTML apps. Your can now spawn background workers running scripts in parallel to the main page.

Web Sockets

Bi directional, full duplex communication channels over a single TCP socket, designed to be implemented in web browsers and web servers.

Notifications

How do we deliver a more desktop like experience to users?
Notifications can appear transiently in upper right hand corner. They fade in and fade out rather than being intrusive or modal.

Drag & drop

This was one of the most interesting (at least from a visual perspective) aspects of the new JavaScript APIs. Drag & Drop provides a very desktop like experience. Similar functionality could previously be provided by using libraries with JQuery, but now you no longer need to do crazy workarounds, or browser specific solutions.

Geo Location

Imprecise forms of geolocation have been available for a while, for example via best-guess based on your IP address. But the new Geo Location capabilities provide more reliable ways to provide location specific or customized content and functionality.

New HTML5 Capabilities

Seth’s next section was HTML5 itself, i.e. the new capabilities in HTML itself.

New semantic tags

He talked about the new semantic tags (such as section/article/header and aside) that can be used as a way to avoid ‘div’itus.

New link relations

Several new rel attributes for the <a> and <ink> elements have been introduced for HTML5.

Micro data

Is intended to provide a simple way to embed semantic markup into HTML documents, without the complexities of approaches such as RDFa (Resource Description Framework in Attributes).

ARIA attributes

Attributes for enhancing the accessibility of RIAs (Rich Internet Applications)

New form field types

e.g. can specify valid input ranges

Audio & Video

e.g. audio & video tags can interact with JavaScript, Canvas
e.g. Javascript can control video

Canvas

A Canvas is a 2Dimensional drawing surface that can be manipulated pixel by pixel.

New CSS Capabilities

Finally, Seth talked about the new CSS aspects of HTML5, including the new font support, columns (no JavaScript required!) and Sliders, which can be implemented using just css with no JavaScript required.

HTML5 <video> and <canvas> Tags

The 2nd of the 3 presentations was by Tab Atkins Jr., on the new HTML5 <video> and <canvas> Tags.

Closure JavaScript Library

The final presenter was Nathan Naze on the Closure JavaScript Library.
Closure is Google’s ‘Standard Lib’ for JavaScript. It is designed for large scale web development and is the Javascript library behind Google web apps such as GMail, Blogger and Google Books.

It was started in 2005 and is made exclusively by developers working on their 20% projects.

My overall impressions of Closure were that it is a complex, powerful and stable JavaScript library but with a steep learning curve best suited to large scale development (e.g. enterprise apps developed by large teams). It seems a useful library, but not something I would consider using for the upcoming GTUG HTML5 campout for example, where something a little more lightweight might be more useful.

Links
http://www.webreference.com/authoring/languages/html/HTML5/