Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Visualizing HTML5 Web Application Architecture

DZone's Guide to

Visualizing HTML5 Web Application Architecture

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}