The Evolution of Frontend Web Page Rendering: From 1990 to 2010
Buckle up, and let’s jump back in time!
Ten years ago, that’s when Facebook released React into the world — I don’t know about you, but that makes me feel old, and I wasn’t even born for the first browser release.
I’ve started my frontend development career with the good old jQuery and old-school javascript shenanigans.
Nowadays, it feels like there’s a new JavaScript framework every other day. If I believe this website, the latest was zero days ago — I’m not sure about its truthfulness.
All those frameworks claim to have the best way of managing web page rendering. We got React’s server-side components, Qwick resumability, Signals (they’re everywhere now), Astro’s Island, Angular dirty checking (that’s a joke), and more.
With this two-piece article, I want to take you on a journey throughout web history, specifically about web page rendering.
We will start by discovering facts about the genesis of interactivity on the web until the first three frameworks that started the revolution. Then, we will dissect all the new features released in the last few years to understand what’s separating them from the others.
Pre Javascript Framework era: 1993–Early 2010s
1993–1996: The dark ages
Our first stop is at the origin of the web; the first browser, “WorldWideWeb,” was released in 1990 with features like WYSIWYG, browsing newsgroups, and spellchecking. It was discontinued in 1994.
The first popular web browser with a graphical user interface, Mosaic, was released in 1993 and followed in December 1994 by Netscape.
Static, text-heavy pages with no interactivity characterized the Dark Ages. Javascript wasn’t invented yet; you needed to reload the whole page every time to get new content.
CSS wasn’t created either; HTML ruled the web, and the designs were… let’s say, minimalist.
A fun piece of trivia: Marc Andreessen, the creator of Mosaic and Netscape, said in an email in 1994 that the answer to developers who wanted to style their HTML was, “Sorry, get screwed.” CSS made its arrival just two years after that.
1996–Early 2000s: The Early Stages of Web Interactivity
A few years passed, and Netscape released JavaScript in December 1995. It was first named LiveScript, but it quickly got renamed to JavaScript to align with the popularity of Java at that time.
JavaScript gained rapid adoption, and by 1996, Microsoft implemented a version in its Internet Explorer browser.
At first, it was just a scripting language:
- Manipulating Document Content
- Handling User Input
- Performing Form Validations
- Alerts and Dialogs
- etc.
But three years later, in March 1999, the web witnessed a turning point with the Internet Explorer team’s introduction of XMLHttpRequest. This technology allowed websites to fetch and send data asynchronously, eliminating the need for full-page reloads.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "https://api.example.com/data", true);
xhttp.send();I’m happy that “fetch” and “Promise” are available nowadays.
Early 2000s — Early 2010s: Ajax and jQuery domination
Suddenly, web pages became more dynamic.
The foundation built by the XMLHttpRequest functionality transformed into the more known term “Ajax”.
It was first introduced by Jesse James Garrett in 2005 in a blog post called “Ajax: A New Approach to Web Applications.”
Alongside Ajax, jQuery emerged as a powerhouse library in 2006, simplifying JavaScript’s complexities and providing a consistent way to manipulate the Document Object Model (DOM).
// The same HTTP call than the one with saw earlier with XMLHttpRequest but using jQuery
$.ajax({
url: 'https://api.example.com/data',
method: 'GET',
dataType: 'json',
success: function(data) {
document.getElementById("demo").innerHTML = data.text;
},
});Around 2013–2014, jQuery was estimated to be used on approximately 70% of the top 100,000 websites.
Even if jQuery allowed for easier frontend interaction, we were still talking about server-side rendering. The HTML content was rendered on the backend, and interactivity was added through JavaScript.
Javascript Framework Era: Early 2010s — Now
The turning point came around 2010 when developers sought more organized and scalable ways to manage frontend code.
This led to the simultaneous release of three groundbreaking frameworks: Knockout.js (July 2010), Backbone.js (October 2010), and Angular.js (October 2010).
They all brought a revolution in the frontend page rendering world: Client-side rendering.
The server no longer generated the whole page content before sending it to the browser; it only sent a small HTML file with a JavaScript file attached, and the site’s DOM was built using Javascript.
Knockout.js: the father of Signals we know today.
Knockout introduced concepts we know and still use today: Observable, computed (side effects on variable modification), and Data-binding.
Observable brought reactivity to frontend developers’ lives; you could create variables and subscribe to any change on those variables. They allowed fine-grained view updates without rendering the whole page — a concept still used today.
// Knockout.js basic usage of observable
var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.pureComputed(function() {
// Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Planet", "Earth"));It looks familiar while still being much different than what we know today with RXJS observables or Signals.
Knockout.js and Angular.js both shared the functionality of data binding.
Data Binding is the idea of attaching a piece of your state to a specific part of the view tree and having bi-directional updates. So, state actions updated the DOM, and DOM actions updated the state.
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>Angular.js: Google’s dirty checker
Angular.js — the first version that looks nothing like the one we love today — used a technique called “Dirty checking” to ensure the view and the state were in sync.
Dirty checking is an automatic process where Angular.js periodically checks for changes in the model (data) and updates the view if any changes are detected.
It used watches, functions that are responsible for comparing the current value of a piece of data (the model) with its previous value to know if a change occurred, and digest cycles, which are loops that iterates over all the watches (data bindings) in the application to check for changes.
The father of lazy loading
Angular.js was the first framework to introduce the concept of lazy loading with it’s $routeProvider service.
Lazy loading is delaying the loading of a particular file only when needed. It reduces the size of the main javascript file used to build the site and improves performance.
Backbone.js: model-driven re-renders
Backbone was much more lightweight than their competitors at the time. It followed a Model-View-Controller (MVC) architectural pattern.
With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server — Backbone.js documentation
Its goal was to stop tying state data to the DOM, and I don’t think I can explain the behavior better than the documentation, which is amazingly clear.
Whenever a UI action causes an attribute of a model to change, the model triggers a “change” event; all the Views that display the model’s state can be notified of the change, so that they are able to respond accordingly, re-rendering themselves with the new information
We’re now in the early 2010s; we went from no interactivity to three groundbreaking frameworks that all came out within a 4-month bracket.
The foundation of the frameworks we know today has already been laid out with knockout.js observable and two-way data binding.
We still have more than ten years of technical prowess to dissect.
In the follow-up article, we will go through the birth of the frameworks used today in most applications: React, Vue, or Angular (yes, the new one without dot js). We will also talk about the return of server-side rendering and more.
The link to the following article is coming up this week, so stay tuned.
Thank you for reading this article until the end. If you liked it, please don’t hesitate to follow me on X (Twitter) or add me on Linkedin.
