Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: High

Introduction

• “HTML5” is so much more than just markup. There’s also an army of associated JavaScript APIs. Among the ranks are a few new technologies that open up how we communicate between client and server and across documents.

• available technologies for HTML5 Web communication:

  1. XHR & XHR2 with CORS

  • XHR can be both synchronous and asynchronous. XHR is the only API that (purposely) supports synchronous requests, meaning the execution of code will block until the callback fires.
  • There’s nothing particularly new about XHR, but in XHR2 we can handle uploads, and there’s a progress event to tell you how the upload or download is getting on.
  • The super shiny new toy in XHR2 is its support for Cross-Origin Resource Sharing (CORS). This means you can make an XHR request across domains, but only if the server you’re connecting to allows it.

  2. Web Messaging

  • This API is older, but it’s very useful if you want to get around the XHR same-origin rules.
  • If you have an <iframe> document that can accept onmessage events from your origin (i.e., your site), then you can communicate across domains (and origins).
  • This gives you the ability to send strings across two mutually trusted domains.

  3. Web Sockets

  • Web Sockets are used to send messages to and from the server — i.e., a bi-directional socket.
  • with Web Sockets, you can go across domains, and you’re not bound by the same-origin policy.
  • This means you can host your normal “apps” server while another server is for streaming content. Or you could host your own pages and connect to a live Twitter stream if your users turn on Web Socket support.

  4. Server Sent Events

  • The Server-Sent Events API is something that originated from Opera back in 2006 and is used for pushing events from the server to the client.
  • The key to your server is ensuring it doesn't close the connection on the client - the browser. Most of the examples around the web are doing this: closing the connection which tells the API to switch in to polling mode.

  5. Web Workers

  • Web Workers are a way of creating a new thread of execution inside the browser.
  • As an example of when to use a Web Worker, say you’re running a lot of JavaScript and the UI becomes unresponsive. The browser UI hangs because, in a way, it’s a “single-threaded application”. This JavaScript task could be given to a Web Worker so that the UI can continue functioning.
  • It’s vital to understand that a Web Worker lives in a sand-boxed environment that doesn’t have access to things like the DOM.