Pro HTML5 Programming, by Peter Lubbers, Brian Albers, Frank Salim, is a book that aims to help developers build HTML5 applications that tap the full potential of modern browsers.
The main areas of focus are:
- Communication APIs: Explores two of the important building blocks for real-time, cross-origin communication: Cross Document Messaging and XMLHttpRequest Level 2.
- Canvas API: Presents the API that enables developers to dynamically generate and render graphics, charts, images, and animation.
- Geolocation API: With this API, users can share their location and with web applications so that they can enjoy location-aware services.
- Web Sockets API: Defines a full-duplex communication channel that operates through a single socket over the Web.
- Web Storage API: Explores the HTML5 Web Storage (aka DOMStorage) an API that makes it easy to persist data across web requests.
- Web Workers API: This API, provides background processing capabilities to web applications.
- HTML5 Audio and Video: These elements are a new addition to HTML5 allow developers to use audio and video without plugins while providing a common, integrated, and scriptable API.
The book’s publisher, Apress, made an expert available to InfoQ which includes the contents of the 6th Chapter entitled ‘Using the HTML5 Web Sockets API’.
InfoQ had a Q&A with one of the authors about his new book:
InfoQ: Hi Peter, would you like to tell us a little bit about yourself and how you came about writing a book about HTML5?
Peter: I worked at Oracle for about 8 years, then joined Kaazing as the 4th employee in 2008. Kaazing has been involved in HTML5 WebSocket API and protocol since it was added to the HTML5 spec (as TCPConnection) and have been instrumental in making it what it is today. We started providing training about WebSocket in 2008, before any browsers were even dreaming about supporting it. Our WebSocket gateway provides full (and fast!) emulation for the standard, so you can actually use HTML5 WebSockets in browsers as old as I.E. 6!
I am responsible for documentation and training at Kaazing. The co-founders of Kaazing (Jonas Jacobi and John Fallows) were my colleagues at Oracle and I helped them with an editorial review of their 2006 Apress JSF and Ajax book. They recommended that we (Brian Albers (VP of dev at Kaazing), Frank Salim (Kaazing's Human Code Generator) at Kaazing, and I) write a book about HTML5 WebSockets, but when we looked into that and found that there were no HTML5 books at all and very little resources for HTML5 Programming.
This book is not another "intro to HTML5" or another HTML history lesson. By now, I think we all know that HTML5 is a big deal and this book will help you get started with coding against the simple and powerful APIs that are already working in most modern browsers.
InfoQ: What is HTML5 and what problem does it try to solve? Could you give us an overview of its parts and how they might interact with each other?
Peter: HTML5 is more than just another iteration of HTML and it has been a long time coming. The last version of HTML (4.01) was released over ten years ago!
When we speak about HTML5, we really mean the larger combination of HTML, CSS, and JavaScript. For example, HTML5 introduces new canvas and video elements. By themselves they are powerful enough, but you can unlock their full potential when you programatically control these elements with JavaScript and style them with CSS.
HTML5 is all about simplicity. One of the ideas is to "pave the cowpaths," meaning that it strives to make things that were previously hard to do very simple. It is also all about native browser functionality. You can now do things that were previously only possible with plugins such as Flash and Silverlight or with lots of complex JavaScript. For example, HTML5 introduces native form input types (date and color pickers) and form validation, native sockets (for full-duplex communication), native drawing APIs (SVG and canvas), and built in location awareness (using Geolocation).
InfoQ: What is the current browser compatibility with the various HTML5 APIs and how do you see this evolving in the near future?
Peter: Browser adoption for HTML5 features is accelerating rapidly--at a breakneck speed really--it is really very exciting. Many of the modern browsers (Chrome, Safari, Firefox, and Opera) already support between 75% and 90% of the feature set and this number is increasing daily.
Check out sites like html5test.com and caniuse.com to see what features your version of your browser supports; great resources for checking the ever-changing landscape and support.
Even IE, which is the one browser that has been lagging behind with about 28% support for the features in IE8 (and only about 3% in IE6), is "doubling down" on HTML5 in IE 9, which will see close to 60% of the HTML5 features supported. Some of these with hardware optimization, which will give the other browsers a run for their money!
InfoQ: In your book you present several HTML5 APIs. Could you give us some examples of how these can enable developers to build better applications?
Peter: Sure! More and more, web apps are starting to become on par with desktop functionality. For example, at Kaazing, my very talented colleague Frank Salim just built a VNC client using WebSockets and Canvas--that was just not even imaginable a few years (or months!) ago.
In general, HTML5 allows us to create more stateful, transactional web apps. You can directly connect to remote servers with WebSockets and you can build location-aware applications with Geolocation and combine them with Map APIs. You can build amazing animation games with SVG and canvas (2D, but also in 3D if you are willing to build your own browser).
The individual APIs are powerful, but if you combine a few of them, you can really create apps that rock. For example, HTML5 allows you to create offline applications using the new Application Cache, but is also introduces client-side Web Storage (even persistent storage, called localStorage) and you can combine offline apps nicely with storage, of course; you can check when you go offline and instead of relying on flaky browser caching behavior (click back and your previous page is gone). You can now have your entire application available for use and store data that has to be sent on the client until the app detects that you're online again.
InfoQ: Are there things that you think are missing from HTML5 at this time and should be added in the future? Any new APIs or changes in the ones that already exist?
Peter: Sure, things need to still be polished a bit more and browsers need to focus on interoperability. We should not loose sight of the original design principles HTML5 started out with. Areas that can be improved, in my opinion, are binary support in various APIs (Cross Document Messaging and WebSockets) and improved support for the 3D Canvas. Also, the accessibility for the different features is not quite there yet.
Not only is the WebGL effort bringing OpenGL to JavaScript, it is spinning off a general purpose binary data API as well. A fast 3D API needs binary buffers. To that end, there is a new proposal for an API for manipulating binary data called TypedArray. If the proposal takes off, TypedArray will likely be useful throughout HTML5.
InfoQ: How would someone go about developing an HTML5 application? What would be the main tools to use to develop, debug and test the application?
Peter: There is not a lot of IDE support for HTML5 yet (There is syntax-completion support in DreamWeaver's HTML5 Pack for Creative Suite 5 and also in Visual Studio, but you can also simply use a good text editor like UltraEdit or an IDE like Eclipse.
Browser debugging capabilities are really amazing now and the browser vendors are adding a lot of cool features to their developer tools. For instance, Google Developer Tools and Speed Tracer, Safari Web Inspector, Firefox Firebug, and Opera Dragonfly. If you have not looked at these for a while, you will be surprised by the amount of cool features.
Every week, I find cool new features in my browser. For example, Chrome just added support for debugging offline applications and a view of what is in the Application Cache as well as console access to the Web SQL Database in their Developer Tools--really slick.
InfoQ: What would be your advice for teams that are just now starting their first HTML5 project. What are the main pitfalls they should be careful about? Any “best practices”?
Peter: Don't believe (all) the hype and, of course, buy the Pro HTML5 Programming book and you'll be fine ;-)
Seriously, there is a lot of good information out there. Check out Google's Web Fundamentals Program site. Another GREAT resource is Paul Irish's html5boilerplate starter kit. This has years of expertise folded into and using all the tips and tricks there will make your sites degrade gracefully in older browsers (typically, that is the biggest concern). The html5boilerplate starter kit doc (inline comments and code snippets) has all the current best practices in it, I think. There are many other great sites out there.
I also give HTML5 training world-wide (HTML5 Fast Tracks, Bootcamps, and WebSocket courses), so give me a shout if you need a fast-paced introduction!
InfoQ: What do you think would be the most valuable take away from your book for people that are just now starting with HTML5 and what for more seasoned developers that want to take it to the next level?
Peter: HTML5's Powerful simplicity.
As the name implies, Pro HTML5 Programming is targeted at designers and developers that already have a basic understanding of HTML and JavaScript and want to use the new HTML5 APIs.
However, for those that are new to HTML, JavaScript, and CSS, HTML5 is all about simplicity, so it is actually often easier than it looks. W e hope this book will inspire people to use the HTML5 APIs in creative new ways.
Pro HTML5 explains how you can use the new HTML5 APIs. It provides practical, real-world examples of HTML5 features and shows which ones are supported in current browsers. We cover a selection of popular, useful, and powerful HTML5 APIs to get you up to speed quickly. You will learn how to develop web applications using HTML5 features such as Geolocation, Web Storage, WebSockets, Web Workers, Canvas, Audio, Video, and more.
You will see how these features can be combined and made to work seamlessly with other standard web technologies. Our examples use HTML5 documents and take advantage of native browser functionality.
You can find more information on HTML5 right here on InfoQ!
