HTML5 talk at Google Technology User Group

Last Wednesday, I attended a talk on HTML5 at the Silicon Valley Google Technology User Group (SV GTUG). HTML5 is a broad term for the next generation of web technologies, including (obviously) the next and long overdue version of HTML, as well as CSS and JavaScript Libraries. The talk was in 3 sections: The first by Seth Ladd (a Developer Advocate for Google) was an introduction to HTML5; The second by Tab Atkins Jr. (a Software Engineer at Google) was on the new HTML5 <video> and <canvas> tags; And the third and final section was by Nathan Naze (also a software engineer at Google) on the Closure JavaScript Library.

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/

Tags: Closure, CSS, gtug, html, html5, JavaScript