Over a million developers have joined DZone.
Platinum Partner

Visualizing HTML5 Web Application Architecture

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix. Download this Forrester Report to gain a better understanding of the low-code platform market and how to make a strategic platform selection you won’t regret.

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.

The Web Dev Zone is brought to you in partnership with Mendix. Better understand the aPaaS landscape and how the right platform can accelerate your software delivery cadence and capacity with the Gartner 2015 Magic Quadrant for Enterprise Application Platform as a Service.

Topics:

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}