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...
What we will cover
¡  WebWorkers: true multithreading / concurrency in Javascript
¡  IndexedDb: a database in the browse...
Webworkers: The Basics
¡  Allows you to truly implement multithreading / concurrency in
Javascript
¡  Otherwise, Javascr...
WebWorkers: Message
Passing
¡  Because Worker doesn’t share parent page’s Context, need a way
to pass messages between th...
WebWorkers: Accessible
Javascript Features
•  Workers can access:
•  The location object (read-only)
•  XMLHttpRequest
•  ...
WebWorkers: How We Used
Them in boxUno
IMAP Server
Client UI
IO Worker
New Mail & Mail
Updates (labels, read,
etc)
Client ...
•  Having multiple workers is difficult
•  Use a lot of memory b/c you can't share datastructures
•  Can't share code (a m...
•  Debugging is hard:
•  Especially if you have more than one worker (often even launching
the debugger in Chrome, doesn't...
Indexeddb: The Basics
¡  An database (Object Store) hosted inside the
browser
¡  Can give rise to a whole new class of w...
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 th...
•  Performance
•  Slow to start and speed can be slow on reads if have large objects
in a single row
•  Iterating through ...
Application Cache
(AppCache): The Basics
¡  Allows you to control the caching of your
application: both static and dynami...
AppCache: Drawbacks
•  Hard to develop with
•  So we just use it in production for boxUno
•  Caching of actual manifest fi...
WebRTC: The Basics
¡  New video standard that creates Peer to Peer connection for
video feed in browser
¡  No plugins re...
WebRTC: The Drawbacks
¡  Very new so only supported well in Firefox 23 onwards and
Chrome 27-ish onwards.
¡  No Internet...
CSS3: The Basics
¡  CSS3 is awesome!
¡  Allows you to do gradients, shadows, border rounding, timed
transitions from one...
Other HTML5 Features
¡  Canvas: can draw directly on the page
¡  Seamless iFrame:
¡  Makes it so that parent formatting...
Conclusions: Should you use
HTML5?
¡  HTML5 has some great features but also creates some
headaches
¡  If you are lookin...
Thanks!
¡  Thanks for reading!
¡  Feel free to contact me Ross Williamson (co-Founder of boxUno)
at ross@boxuno.com
¡  ...
Upcoming SlideShare
Loading in …5
×

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

1,129 views
1,061 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,129
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your Startup
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. Indexeddb: How to Use ¡  Step 1: Open the database ¡  Step 2: Create Object Store
  12. 12. Indexeddb: How to Use Part II ¡  Step 3: Add data ¡  Step 4: Query data
  13. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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!)

×