“If everyone is moving forward together, then success takes care of itself.” – Henry Ford

The HTML5 Family has been receiving a good deal of coverage lately, and rightfully so as many next generation browsers – specifically those in the Mobile arena based on WebKit: Android, iPhone, Blackberry etc. are now beginning to implement it’s specification, or parts thereof. On the Desktop more HTML5 support is also being seen in the latest versions of Safari, Chrome, Firefox and IE9.

Now its obvious there are some rather strong opinions regarding HTML5; some quite positive while others more negative. And while I certainly believe the notion that HTML5 will be a so-called “Flash Killer” is rather ridiculous – especially when considering the typical enterprise is far from installing the next generation of any HTML5 compatible browser, as well as DRM issues, etc. – I do believe that once everyone gets passed all of the hype the HTML5 Family will certainly play an important role in the future of the web; and currently, in the mobile Web space, that future is now.

However, and perhaps more importantly, while some developers building RIAs targeting the Flash Platform often criticize or condemn what could be perceived as a rival technology, personally, I tend to see things quite differently. In fact, I believe Flash Applications running in the browser will ultimately benefit from the HTML5 family of technologies as they can leverage them and work in tandem to provide some very interesting possibilities. So with that being said I thought I would share my seemingly unique point of view as I feel the HTML5 Family brings complimentary potential to the RIA space, but more importantly in the Mobile market, and that is certainly a context many of us will be developing for.

To a certain extent, I consider myself technology agnostic, that is, I consider myself to be a software developer with a focus on the disciplines of the User Interface Layer of what could be considered a traditional Desktop or Mobile Software Stack. To that end the Flash Platform has always been a choice platform for delivering highly scalable and maintainable RIAs. In addition to this, the HTML5 Family and it’s associated mobile frameworks, Sencha Touch in particular, present some rather compelling and exciting possibilities in the Mobile Web Space in general, and within the context of Android, iPhone and iPad specifically.

Its important to understand that every technology has its place and any technology that presents practical and exciting new possibilities within both an existing (Desktop/Web) and somewhat new (Mobile Web) paradigm is worthy of exploration or at least an informed understanding. As with the Flash Platform, the HTML5 Family of technologies presents potential for pushing the boundaries of the Web and Mobile Web. Likewise, as with Flash, the HTML5 Family has its own strengths and weaknesses. However, both technologies are quite unique in their own right. So if you are reading this and develop RIAs primarily targeting the Flash Platform, but also enjoy working with other RIA technologies, then by all means please read on, otherwise feel free to read one my many Flash Platform related posts, or stay tuned for many more to come.

A Brief Overview of the HTML5 Family

For anyone who is unfamiliar with the HTML5 Family, let me first give you a brief overview of the technologies I feel encompass what is already a rather overloaded term. In general, on a very high level, I would summarize the HTML5 Family simply as follows:

• HTML5
• CSS3
• JavaScript

However, there are certainly more associated technologies which themselves further make up what could be considered the HTML5 Family, some of which are (based on current specification status):

• Microdata
• Geolocation API
• Device APIs
• Web Storage (localStorage, sessionStorage) APIs
• Web SQL Database API
• Web Workers API
• Web Sockets API

HTML5

First, HTML5. HTML5 is the next major revision of HTML which aims to advance the open Web through web standards and semantically rich content. In general, HTML5 provides a content model which can be broadly defined into the following categories: Metadata content, Flow content, Sectioning content, Heading content, Phrasing content, Embedded content and Interactive content as well as form-associated elements etc.. HTML5 defines new tags such as canvas, audio, video, keygen, header, footer, nav, article, aside, datalist and more.

CSS3

CSS3 has been broken out into a collection of modules, each of which have their own specifications and are currently in various states of completion. These modules include such examples as Selectors, Transitions, Animations, Namespaces, Color, Fonts, Advanced Layout, Multi-Backround and more. Some rather amazing designs can now be created purely in CSS3.

JavaScript

Explaining what JavaScript is may seem like a moot point, however it is important to outline some key underlying specifics of the language. In particular, JavaScript is a weakly typed, dynamic, prototypal, object-oriented scripting language. Its prototypal nature is quite different from the classical concepts of traditional object oriented languages and, in order to get the most out of the language one needs to understand and embrace prototypalism and dynamism; otherwise it’s easy to (mistakenly) denigrate the language due to it’s lack of type safety and classical OO constructs.

Microdata

HTML5 Microdata provides a mechanism which allows machine-readable data to be embedded in HTML documents in the form of annotations, with an unambiguous parsing model. Microdata is compatible with numerous data formats such as JSON. Micro-data is intended to provide a standard to replace other similar concepts such as RDFa, from which browsers and other applications can discover relevant content based on the context of an applications markup. Such examples include markup for contact information, calendar events and more. This markup is understood by HTML5 compatible browsers which can then automatically offer to add the relevant content to the appropriate application. At an implementation level, microdata simply consists of a group of name-value pairs; with the groups being called items, and each name-value pair is a property.

Geolocation API

The HTML5 Geolocation API is rather straightforward; it simply provides a means by which the location of a device can be determined via a native API (as opposed to say, determining the clients IP address). The Geolocation spec is currently in last call status in the W3C.

Device APIs

Device APIs are client-side APIs which allow for direct interaction with native device services such as a device Camera, Calendar, Contacts etc.

Web Storage API

The Web Storage API allows for the persistence of local (permanent) and session based (browser session) data on the client. The API for Web Storage is extremely simple as it is based upon simple Key / Value pairs; with which Keys are simply Strings. Each site contains its own separate storage area.

Web SQL Database

While not a part of the actual HTML5 specification, the Web SQL Database presents some extremely interesting possibilities within Web Applications. The Web SQL Database provides a set of APIs which allow for the manipulation of client-side databases using SQL. The Web SQL Database is based upon SQLite (3.1.19) thus supporting the features as specified therein.

Web Workers API

Web Workers provide a mechanism by which web content can execute scripts in background threads. Web Workers allow for a much needed multi-threaded implementation for web based applications executing in a browser. While somewhat similar, Web Workers are different from threads in that they are primarily intended for executing long running, expensive computations and algorithms so as to facilitate non-blocking UI background processes. One specific aspect of Web Workers which has considerable positive implications for the web moving forward is that they run in native threads as opposed to Green Threads; as is the case in VM architectures. This is quite significant as it essentially means Web Workers can scale vertically. Considering the inevitable proliferation of multi-core desktop and mobile devices, this is certainly something that will prove advantageous.

Web Sockets API

Web Sockets provide native, full-duplex communications channels which operate over a single socket that enables HTML5 compliant browsers to use the WebSocket protocol (exposed via a JavaScript API) for two-way communication with a remote host.

If you are interested in learning more about each of these technologies I recommend the following resources:

• HTML5 Specification
• An Introduction to CSS3
• Microdata
• Geolocation API
• Device APIs
• Web Storage API
• Web SQL Database
• Web Workers
• Web Sockets

In the weeks to come I plan to go into further detail for each of these associated HTML5 Family technologies, providing working examples, specifically from a Mobile context. Where applicable, I will contrast each technology with similar Flash Platform APIs and concepts, as well as show how they can be utilized together to create some interesting possibilities.

This entry was posted on Sunday, July 18th, 2010 at 6:53 pm and is filed under Android, CSS3, HTML5, HTML5 Family, Mobile, iPad, iPhone, jQTouch, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.