Visualizing HTML5 Web Application Architecture

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.