Your SlideShare is downloading. ×
0
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Should you use HTML5 to build your product? The pros & cons of using current HTML5 features for your startup
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

960

Published on

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

No Downloads
Views
Total Views
960
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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!)

×