HTML5 Zone is brought to you in partnership with:

John Esposito edits Refcardz at DZone, while writing a dissertation on ancient Greek philosophy and raising two cats. In a previous life he was a database developer and network administrator. John is a DZone Zone Leader and has posted 320 posts at DZone. You can read more from them at their website. View Full User Profile

Visualizing HTML5 Web Application Architecture

  • submit to reddit

HTML5 is a huge complex of new features and APIs, unified around the concept of 'browser as platform'. 'Write one, run anywhere' means, for HTML5: 'write for the browser, run in any browser'.

How 'browser as platform' works needn't worry the web app developer too much, unless the implementation details still need to be sorted out (which is, admittedly, often true). But understanding how the browser functions as a platform at a high level is, probably, a bit of knowledge that every web developer should have, at least abstractly.

The Finnish HTML5 development company SC5 recently put together a beautiful diagram of HTML5 web app architecture, explaining how modern web apps relate to browsers, and how browsers relate to the back-end.

Here is, before your eyes, the top-level architecture of an HTML5 web application -- which you probably more or less grasp already in practice, but which you can solidify with this image:

Simple, intelligible; makes quite clear the basic advances of HTML5 over 4.01. Should probably appear at the top of every high-level intro to HTML5.

SC5 also includes a nice, short explanation of every part of this diagram. Check out the full post, and burn that image into your web-devving brain.