Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Comparing the Built-In Application Architecture Models in the Web Browser

Antero Taivalsaari, Tommi Mikkonen, Cesare Pautasso, Kari Systä


Depending on one’s viewpoint, a generic standards- compatible web browser supports three, four or five built-in application rendering and programming models. In this paper, we provide an overview of the built-in client-side web application architectures. While the dominance of the base HTML/CSS/JS technologies cannot be ignored, we foresee Web Components and WebGL gaining popularity as the world moves towards more complex and even richer web applications, including systems supporting virtual and augmented reality.

Zero Frameworks

Web (Browser)
as a Platform

Built-in Application Rendering Models

  2. Canvas
  3. SVG
  4. WebGL
  5. Web Components


Document Object Model


2D Graphics


Scalable Vector Graphics


3D Graphics

GPU Access for Web applications

WebGL Demos

Web Components

HTML Import + Shadow DOM + Custom Elements

Reusable UI Widgets


A Developer's Cornucopia

Organically Grown

Incoherent Abstractions

Fashion-Driven Development

Sustainable Cornucopia?


Which rendering models would you choose for your next Web application?
DOM/DHTML 2D Canvas 2D SVG 3D WebGL Web Components

More architectural decisions

More Information



DOM/DHTML Canvas WebGL SVG Web Components

Year of Introduction 1998 2004 2011 2001 2011

Development Paradigm Declarative/Imperative Imperative Imperative Declarative/Imperative Declarative/Imperative

Rendering Architecture Retained Immediate Immediate Retained Retained

Information Hiding No N/A N/A No Yes

Primary Usage Domain Documents/Forms 2D Graphics 3D Graphics 2D Vector Images Web UI widgets

Popularity Ubiquitous Popular Limited Popular Growing

Technology Maturity Mature Mature Mature Mature Emerging

Abstraction Level Medium Very Low Low Medium High

Declarative Animations Yes (with CSS) No No Yes Yes

Mobile Browser Yes Yes Not in Android Yes Not in iOS

Use a spacebar or arrow keys to navigate

Powered by