Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your Startup

Why we care ¡  We built a rather complex unified messaging client (email, chat,

video, SMS, FB chat, calendar integration, etc) called boxUno with HTML5 that gives offline access to mail just like a native application.

¡  Without some features of HTML5, our application would have not have possible

¡  BUT, HTML5 also set us back in a lot of ways: ¡  Limited compatibility on browsers

¡  Hard to debug

¡  Crashes browsers

*Thanks to html5rocks.com for various code samples

What we will cover ¡ WebWorkers: true multithreading / concurrency in Javascript

¡  IndexedDb: a database in the browser

¡ Application Cache: cache site for offline viewing

¡ WebRTC: new video standard in browser

¡ CSS3: great new CSS properties

¡ Other: Canvas, Seamless iFrame, Content Editable Divs, Files / Blobs

Webworkers: The Basics ¡ Allows you to truly implement multithreading / concurrency in

Javascript

¡ Otherwise, Javascript is single threaded and functions like setTimeout() give the impression of asynchronicity, but not concurrency (Must still wait for currently execution function to yield)

¡ WebWorkers have their own context and are loaded from their own JS files

¡  They have access to some Javascript features but not others

¡  Useful for applications with a lot going on in the UI but also requiring powerful data processing / caching client-side

WebWorkers: Message Passing ¡  Because Worker doesn’t share parent page’s Context, need a way

to pass messages between the two

¡  Use the postMessage() function in String or JSON format

¡  Passed objects are literally copied between the two contexts

¡  Can use Transferable Objects: zero-copy so improved performance, but object is copied from parent to worker and then deleted from the parent context

WebWorkers: Accessible Javascript Features •  Workers can access:

•  The location object (read-only) •  XMLHttpRequest •  setTimeout()/clearTimeout() and setInterval()/clearInterval() •  The Application Cache •  Importing external scripts using the importScripts() method •  Spawning other web workers

•  Workers do NOT have access to: •  The DOM (it's not thread-safe) •  The window object •  The document object •  The parent object

WebWorkers: How We Used Them in boxUno

IMAP Server

Client UI

IO Worker

New Mail & Mail Updates (labels, read, etc)

Client actions: mark read, change labels,

Move Folders, etc

Process New Mail & Updates and add to

data structures

Send mail & updates to client

Package updates for send to IMAP Server

Updates from client

•  Having multiple workers is difficult •  Use a lot of memory b/c you can't share datastructures •  Can't share code (a massive js file for every worker)

•  You have to do IPC to get anything done between workers •  Only chrome fully implements communication mechanism

MessageChannels (now in Firefox Nightly but buggy)

•  In every other language, you only have to deal with threads - not processes •  i.e. Can have shared data structures with locking

•  Often workers fail silently

•  Slow to start

WebWorkers: Drawbacks

•  Debugging is hard: •  Especially if you have more than one worker (often even launching

the debugger in Chrome, doesn't work) •  Firefox has no debugger for them

•  No access to the Dom parser •  For boxUno, need to analyze / parse HTML emails in the worker

•  Generally need some asynchronous JS functionality •  We used Google Closure Deferreds •  Debugging issues exacerbated by the fact Deferreds have default

errBacks, so if you miss recording an errBack, errors not reported

•  Local storage also not available •  makes sense why: local storage associated with the page context

not the worker context)

WebWorkers: Drawbacks Part II

Indexeddb: The Basics ¡ An database (Object Store) hosted inside the

browser

¡ Can give rise to a whole new class of web applications that offer both offline and online availability

¡ NOT a relational store (has no tables or columns)

¡  You save Javascript objects to the Object Store, then create indexes and iterate over them with cursors

¡  Transactional database

¡  Basically all commands are asynchronous

Indexeddb: How to Use ¡  Step 1: Open the database ¡  Step 2: Create Object Store

Indexeddb: How to Use Part II ¡  Step 3: Add data ¡  Step 4: Query data

•  API is pretty ghetto •  100 lines of code to do anything •  All asynchronous •  Still not implemented in Safari even though Safari is webkit based so

you can't do anything on iPhone (Might never get implemented b/c google forked webkit)

•  API still in flux •  During the writing boxUno, changed how you upgrade a database

[onversionchangedevent versus setVersion()] •  Chrome 23 (recent) update added potential for multiple

transactions in flight, so broke all our code (onsuccess event no longer guaranteed transaction was done)

•  Quite buggy still (we filed 5 security bugs that crashed Chrome)

Indexeddb: Drawbacks

•  Performance •  Slow to start and speed can be slow on reads if have large objects

in a single row •  Iterating through an index of email threads took forever •  Performance issues might have been our fault, but hard to debug •  Chrome team claims their implementation should be massively

scalable

Indexeddb: Drawbacks Part II

Application Cache (AppCache): The Basics ¡ Allows you to control the caching of your

application: both static and dynamic resources

¡  User can browse your full site when offline (even when hitting refresh)

¡  Specify a manifest file, so resources are only re-fetched when the manifest file changes

¡  Increases load speed, because resources are local (makes load time A LOT faster)

¡ Decreases server load because resources are not fetched from the server with each page load

AppCache: Drawbacks •  Hard to develop with

•  So we just use it in production for boxUno

•  Caching of actual manifest file •  When you increment the manifest file, browser should issue change

event and redownload files •  But the browser itself could be caching the manifest

•  One load error kills the entire update process •  We have many items in the manifest (140 or so). •  When AppCache can’t retrieve one item, whole upgrade process

is stopped

WebRTC: The Basics ¡ New video standard that creates Peer to Peer connection for

video feed in browser

¡ No plugins required

¡ Minimal server load: server just negotiates with message passing between the two computers to find a mutually reachable public server.

¡  Higher quality video / audio than other standards

¡  Relatively easy to implement

¡  See demo from WebRTC people: http://apprtc.appspot.com

WebRTC: The Drawbacks ¡ Very new so only supported well in Firefox 23 onwards and

Chrome 27-ish onwards.

¡ No Internet Explorer without a plugin.

¡  Had some sound echo problems with low volume sounds

¡  For certain enterprise NAT configurations to connect properly, need to host your own TURN (or relay) server

CSS3: The Basics ¡ CSS3 is awesome!

¡ Allows you to do gradients, shadows, border rounding, timed transitions from one UI to state to another

¡  Largely supported now by major browsers

¡ Check http://www.w3schools.com/cssref/css3_browsersupport.asp for browser support table by property

Other HTML5 Features ¡ Canvas: can draw directly on the page

¡  Seamless iFrame: ¡  Makes it so that parent formatting *can* apply to the iframe ¡  We used it in boxUno b/c wanted parent frame styles NOT to apply

¡ Content Editable DIVs ¡  Makes it MUCH easier to create text editing on a webpage without

plugins / libraries ¡  Just specify contenteditable attribute on the DIV

¡  Files and Blobs ¡  HTML5 File objects make it easy to accept user uploads ¡  Blobs make it easy to reference files by a local URL. We used it to

allow users to download their attachments

Conclusions: Should you use HTML5? ¡  HTML5 has some great features but also creates some

headaches

¡  If you are looking for universal compatibility, don’t use HTML5 features.

¡ We’d recommend not using multiple WebWorkers. (Stick all background processes in one worker if possible).

¡  Be careful in relying on indexeddb API because it has changed so much recently, but it’s the best (and only) way to give your user access to your web app while offline.

Thanks! ¡  Thanks for reading!

¡  Feel free to contact me Ross Williamson (co-Founder of boxUno) at ross@boxuno.com

¡ We are happy to help talk through any HTML5 related questions or issues (to help save people some of the time we wasted!)