building JS apis
for browsers

October 23, 2013

Anant Narayanan

unity in diversity

  • There are now 5 major browsers and 3 major rendering engines out there

  • Standards are living documents, and browsers are incredibly complicated pieces of software

  • APIs exposed directly by the browser are usually (subtly) incompatible

THIngs we'll cover

  • The event loop

  • IFrames and XHR

  • WebSockets

  • Audio
  • WebRTC

  • Graphics
  • the event loop

    • Single Threaded? Think again!

    • Some functions spin the event loop...
      • window.alert() on Firefox
      • window.showModalDialog()

    • Don't call into user code assuming that your internal event handlers won't be invoked in the meantime...



    • Common pattern to do long polling, open an IFrame

    • document.createElement('iframe); but what next?

    • For cross-subdomain XHR, the domain of the frame has to match the parent

    • Browser stores both domain and port internally

    • document.domain = document.domain removes the port from the internal state


    var iframe = document.createElement("iframe");
    iframe.src = "";
    iframe.contentDocument.domain = "";
    document.domain = document.domain;


    • What happens when you want to close the IFrame?

    • Careful - IE will continue executing scripts even after removing the IFrame
      iframe.innerHTML = "";

    • Everyone except Opera will let you send an XHR inside a onclose event handler

    • Opera has a 30-second timeout on XHRs


    • HTTP proxies crashes Safari < 534.54

    • Writing to a closed WebSocket crashes Mobile Safari
      if (mobile) return setTimeout(function() {
      }) else ws.send("Hello!");

    • Firefox creates ghost connections if you create new WebSockets during onclose

    • 4G/3G/LTE... Don't even bother with ws:// (USE SSL!)

    • Always fallback! XHR/JSONP... even Flash?!


    • Myriad ways to play audio, several formats to choose from!

    • HTML5 Audio (Chrome, Safari, Firefox, Opera)
      • Safari: Wav, MP3
      • Chrome/Firefox/Opera: Ogg
      • IE9+ (only if you specify DOCTYPE): Wav
      • Use canPlayType() to detect instead of hardcoding browser

    • Use legacy <bgsound> on IE8-, but beware that the user doesn't have control!


    • getUserMedia (Camera, Mic access):
      • Firefox, Chrome, Opera

    • PeerConnection (P2P video/audio streams):
      • Firefox, Chrome

    • API still in Flux, lots of prefixes and small incompatibilities
      • Definitely use a shim, recommend SimpleWebRTC.js
      • OpenTok provides Flash fallback as  necessary


    • <canvas> is your best bet! IE9+, FF, Chrome, Safari, even mobile!

    • IE8-, recommend using a wrapper like FlashCanvas

    • WebGL: Not if you want to support IE (maybe with Chrome Frame?)

    • - new graphics framework that will be open source, doesn't rely on plugins!


    • Use domain specific libraries if and when possible:
      • Firebase,, Box2D, OpenTok

    • Start with a good template:
      • HTML5Boilerplate, Modernizr, Bootstrap, jQuery

    • Should you use  a feature?

      • BrowserStack, TestSwarm, BrowserSwarm


    IFrames Yes
    WebSockets Yes, with Long Polling fallback
    Audio WAV + OGG with <audio> and <bgsound>
    WebRTC No, Polyfill for modern browsers
    Graphics Yes, with <canvas>

    Abstract what you want to do from how you do it!