Comparing the Built-In Application Architecture Models in the Web Browser
Antero Taivalsaari, Tommi Mikkonen, Cesare Pautasso, Kari Systä
Abstract
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
- DOM/DHTML
- Canvas
- SVG
- WebGL
- Web Components
DOM/DHTML
Document Object Model
Canvas
2D Graphics
SVG
Scalable Vector Graphics
Web Components
HTML Import + Shadow DOM + Custom Elements
Reusable UI Widgets
Comparison
A Developer's Cornucopia
Organically Grown
- What is the relation of Web programming and engineering aesthetics, such as simplicity and consistency?
- Are graphics APIs and application rendering models an instance or an exception?
Incoherent Abstractions
- Are software design principles applicable to the Web?
- How to develop software in such an environment full of overlapping capabilities and mismatching styles?
Fashion-Driven Development
- Do (JavaScript) libraries help or introduce even more devastation?
- What is their role in the big picture?
Sustainable Cornucopia?
- Fashion-driven development, cargo-cult programming, mashing, hacking & glueing -- how long will we bear with them?
Conclusion
Which rendering models would you choose for your next Web application?
More architectural decisions
- Communication Protocol: HTTP (Ajax, Comet), WebSockets, WebRTC
- Persistence: LocalStorage, WebSQL, Cookies, IndexedDB, File System, App Cache
- Programming Language: JavaScript, ASM.JS, TypeScript, ClojureScript...
More Information
Cornucopia
- Overlapping/Redundant Capabilities
- Mismatching development styles
- Incompatible and incoherent abstractions
- Organic ecosystem evolution
- Fashion-driven development
- "Cargo-cult" programming
Discussion
- How much of this cornucopia is elsewhere than graphics APIs in the web?
- What are its consequences to developers and long-term evolution of the platform?
- What could be done to salvage the situation?
- Is the modularity of Web components too little too late?
- Can the Canvas outgrow its primitive API?
- Will WebGL play a key role to bring VR/AR applications to the Web?
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
