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

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. • 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

9. • 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

10. 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

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

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

13. • 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

14. • 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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.

22. 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!)