The Second Age of Web Development

Cover image: A sketch of primate origins from Charles Darwin's notebook, dated 21 April 1868

The Second Age of web development is the period that spans between the First and Second Browser Wars, at a time when Microsoft Internet Explorer was the dominant web browser (1998-2012).

The First Browser War and the Dark Ages

Lack of standardisation, compatibility issues between browsers, incomplete support for the young CSS standard, and creeping featuritis with vendor-specific HTML tags (BLINK!!! MARKEE!!!) led to the First Browser War between the two major web browser providers, Netscape and Microsoft. The original vision of the Web as a content creation and distribution was lost. Instead, the Web was now seen as a mere distribution channel for desktop-esque enterprise apps and online minigames. And let’s face it, when it came to enterprise- and consumer-oriented software development, the Web standards were simply too immature and unstable to compete with full-featured authoring tools such as Macromedia Flash (which, ironically, used its own dialect of JavaScript called ActionScript) or professional software platforms such as Java Applets or Microsoft ActiveX. Web pages became static shells for Flash ad banners, online minigames, and proprietary software plugins. HTML became an output target for WYSIWYG editors such as Macromedia Dreamweaver. JavaScript got its lasting reputation of a slow, memory-hungry, crash-prone toy language for hobbyists. Only fools and die-hards would still hand-code their pages, or so said Serious People. The web was regressing to the benefits of proprietary software.

Milestones:

• HTML 4.0 (1997)
• XHTML (2000)

Core value: territorial conquest

Key features:

• Web pages as a software distribution medium/application container/output format

Emblematic software:

• Macromedia Flash
• Macromedia Shockwave
• Macromedia Flex
• Macromedia Dreamweaver
• Microsoft Frontpage
• Microsoft ActiveX
• Browser plugins
• Altavista search engine

The Renaissance Period

The post-browser war era was a period of stagnation, dominated by Microsoft Internet Explorer 6 whose market share remained unchallenged for over half a decade. The web standards efforts led by the W3C were so moribund that Microsoft decided to push their own proprietary tools and formats for application development, deeply integrated into their Windows operating system. Fearing the death of the Open Web envisioned by its creators, a group of community members formed the Web Hypertext Application Technology Working Group (WHATWG) in 2004 to work on a new HTML5 standard, improve and enrich existing standards with common practices (including proprietary ones such as Microsoft XMLHttpRequest), and open a new era of community-driven progress. This 15-year effort led to the contemporary web that we all know and cherish. This didn’t go without pain, though, as the dominance of the Microsoft Internet Explorer and its substandard Trident Engine plagued the life of web developers with interoperability issues for many years. The launch of Mozilla Firefox in 2004 was the first serious effort to challenge Internet Explorer's hegemony, but it was the creation of jQuery in 2006 that really opened the era of widespread frontend development with backward-compatible, browser-agnostic APIs for DOM manipulation and web service communication.

The increasing complexity of web applications led to the development of full-stack frameworks with heavy emphasis on the backend and close integration of the frontend, following the layered 3-tier architecture model. J2EE then JSF extended the Java backend servlet model with component models inspired by monolithic desktop applications. On the other side of the spectrum, Ruby on Rails aimed at simplifying the development of standards-based full-stack applications, centered on the convention-over-configuration philosophy and on design patterns such as Model-View-Controller (MVC).

Milestones:

• WHATWG (2004)
• SVG (2001)
• SOAP (2003)
• DOM Level 3 (2004)
• Ajax (2005)
• Acid2 (2005)
• jQuery (2006)
• HTML5 living standard (2007)
• CSS Level 2 (1998) / Level 2.1 (2011)

Emblematic software:

• Microsoft Internet Explorer 6.0
• Mozilla Firefox
• Bootstrap
• jQuery and jQuery UI
• script.aculo.us
• MooTools
• Ruby on Rails
• Symfony
• Laravel
• Django
• J2EE
• JSF
• Eclipse
• Google Search

The Renaissance Web model

The Renaissance Web is a universal application model where all layers operate on web standards without any reliance on proprietary technology. Web pages are built using standard HTML5, JavaScript and CSS, with Graceful Degradation in mind. The AJAX model built on the XMLHttpRequest API allows asynchronous communication with web services hosted on applicative or third-party servers. Whenever possible, full page reloads induced by standard web forms and links are replaced with dynamic AJAX calls and partial page updates for a better user experience. Web services can use structured, object-oriented protocols such as SOAP, or simple payload formats such as JSON or XML. Application logic is still mostly implemented on the backend, but the frontend is increasingly more complex and reliant on third-party libraries for interactivity, dynamic DOM generation, and GUI components. Frontend and backend development complexity tend to converge.

Core value: open community

Key features:

• Frontend libraries
• Asynchronous client-server communication
• Web service protocols
• Graceful Degradation
• Full-stack and component-based frameworks
• Monolithic applications

The Modernist Period

With the rise of jQuery, Web developers began to envision a model where the Web client would no longer be limited to a thin presentation layer, but become a full-featured application platform. But complex application development requires structure, and the jQuery model was simply not structured enough for this purpose. The release of the first frontend frameworks such as Knockout and Backbone.js, soon followed by AngularJS, Ember.js and React, opened the era of the Single-Page Application model (SPA) with client-side routing, as an alternative to traditional Multi-Page-Applications (MPA) with server-side routing.

As the web standards gained in maturity and adoption, developers and users started to revolt against the still-dominant Microsoft Internet Explorer. The Acid3 test, implicitly aimed at IE, became the de-facto standard for feature comparison and standards adoption between browsers. When Google launched their own browser Chrome in 2008, IE had 70% of the browser market share. Four years later, this share had dropped to 35% while Chrome finally took the lead in the browser race. Browser vendors stopped distributing their software with strict versioning schemes in favor of auto-updates that kept them in "Evergreen" state with the latest web features and security fixes. Soon browser competition would drive innovation again.

The rise of the rich-client model drove an opposite movement on the server-side. As the frontend responsibilities increased, the backend responsibilities shrank to become more API-centric. The full-stack Renaissance Web model was no longer fashionable, and frontend and backend technology stacks started to diverge. NoSQL databases became viable alternatives to traditional SQL relational databases thanks to their more flexible model and their native support for JSON.

Launched in 2009, the first version of Node.js (re)introduced JavaScript as a general-purpose language for server environments (earlier server software such as Netscape-Enterprise-Server had this capability). Based on the same V8 engine as the Chrome browser, this was the first time since the beginnings of the Web that the same runtime environment was widely and consistently available on both client- and server-sides, with tools like Browserify and webpack bridging the gap and turning JavaScript from a simple client-side scripting language to a full-stack development environment. The Node Package Manager (npm) soon grew as the de facto dependency manager and distribution network for the JavaScript ecosystem. In a strange inversion of History, JavaScript had become a server-side language used to produce client-side and full-stack Web applications.

Milestones:

• REST (c. 2000)
• JSON (2002)
• Chromium V8 (2008)
• ECMAScript 5 (2009)
• Node.js (2009)
• npm (2010)
• ECMAScript 5.1 (2011)
• Evergreen Browsers (2013)

Emblematic software:

• Mozilla Firefox
• Google Chrome
• Bower
• Node.js
• NPM
• Mustache
• Knockout
• Backbone.js
• AngularJS
• Ember.js
• React
• Vue.js
• gulp
• Browserify
• webpack
• Express.js
• MongoDB
• Apache Cassandra
• Spring Framework

The Modernist Web model

The Modernist Web is a complete reversal of the Classical and Post-Classical Web development models, shifting the complexity from the backend to the frontend. The Modernist Web relies on powerful but complex toolchains and frameworks that provide the technical foundations for the development of applications with strict separation of concerns at every level.

The typical Modernist Web client is a self-contained SPA that communicates with an API server using authenticated JSON-based protocols. Client-side scripting is no longer optional but an essential runtime environment for the frontend, to the point that the main page is often an empty HTML page with framework bootstrap script. UI generation, routing, web service orchestration, state management, etc., are the responsibilities of the frontend. The client code is asynchronous and uses template data-binding. Applications target Evergreen Browsers and the newest Web standards, with polyfills for older clients. Web assets served to the clients are no longer authored directly by frontend developers, but are instead produced from source files by an elaborate build process that involves configuration, transpilation, minification, and bundling.

With the shift from Server-Side Rendering (SSR) to Client-Side Rendering (CSR), the backend becomes an API server whose main responsibilities are data management and business rules, In the simplest cases, backends are thin CRUD layers over a data storage engine, an architectural pattern known as "Thin Server Architecture". Low-traffic applications continue to use traditional server technologies, high-traffic applications (such as mobile consumer applications) often adopt stateless event-driven models for scalability.

Core value: separation of concerns

Key features:

• Node.js-based ecosystem and toolchains
• Frontend MVC frameworks
• Single-Page Applications with client-side routing and rendering
• Stateless web service protocols
• UX-centric, responsive frontend
• API-centric backends
• CRUD or NoSQL databases

Comments

[Sean Allin Newell]

Awww yissss knockout MVVM was the sheeeet.