The history of web development

frontend and backend

Hypertext, 1969

Hypertext is a text that has links to other texts.

Ted Nelson coined the term Hypertext in 1969. As part of his research in Brown University he developed a Hypertext application. He called the application Hypertext Editing System.

Brown university on the map Hypertext Editing System

The web, 1990

Tim Berners-Lee, an English engineer in CERN in Geneva, Switzerland, had an idea of the web.

The idea was to make it easier for everyone in the world to create and share hypertext documents through the internet.

To implement his idea, Berners-Lee invented a collection of technologies: a web browser, a web server, a protocol for communication between the browser and the server (HTTP), and a language that annotates text to render the hypertext in the browser (HTML).

CERN logo Tim Berners-Lee

HTML

HTML is an acronym of Hypertext Markup Language. The syntax of HTML is similar to XML. For example, the following code makes a paragraph: <p>Here is a paragraph</p>. The HTML code can be written in any text editor. And when opened in the browser, the browser renders it.

HTML example

HTTP

HTTP is an acronym of the Hypertext Transfer Protocol. HTTP defines a client (can be a browser) and a server and the communication between them. The client is sending a request message and the server returning a response message. The request message consists of the request line (the first line in the HTTP request message), request headers, and an optional HTTP body. The response message consists of the status line (the first line in the HTTP response message), response headers, and an optional response body. The response body can be, for example, the content of an HTML file.

HTTP diagram

PHP, 1994

Rasmus Lerdorf wrote several Common Gate Interface (CGI) programs in the C programming language used to maintain his website. His "Personal Home Page" lead to the PHP language. PHP logo PHP can generate and process HTML dynamically on the server before sending it to the client (browser). In 1996, Microsoft also released a scripting language, Active Server Pages (ASP), that processes HTML in the server. JavaServer Pages (JSP) and Java Servlets provide similar functionality in Java language.

JavaScript, 1995

Brendan Eich at Netscape invented the JavaScript programming language that allowed developers to create interactive web pages because JavaScript was executed in the browser. For example, handle a button click and manipulate HTML elements in the browser. In 1996, Microsoft released a similar language, JScript programming language, with Internet Explorer 3.0. There were many incompatibilities between the popular browsers at the time IE and Netscape.

CSS, 1996

Håkon Wium Lie proposed Cascading Style Sheets (CSS) to separate styles from the HTML. It allowed developers to share styles across several HTML documents. Before CSS, the styles were defined as HTML attributes. A decade later, CSS preprocessor libraries were developed that extended the features of CSS, most notable are SASS and LESS.

Flash, 1996

A company in San Diego, FutureWave Software, developed a proprietary browser plugin for viewing animations on the web and a computer program for graphic designers and developers for creating animations for the web.

Flash logo

The original name was FutureSplash Animator, but in the same year, Macromedia acquired FutureWave Software and renamed the product to Macromedia Flash.

Flash became popular for developing online games, ads, animations, and videos on the web. Flash came with a programming language, ActionScript. In 2005 Adobe acquired Macromedia and the product name change to Adobe Flash.

XMLHttpRequest, 2002

In the early-to-mid '90s, in most websites, each user action required an entire page reload.

A set of web development techniques known commonly as Asynchronous JavaScript and XML (Ajax), allowed developers to develop asynchronous web applications.

The release of XMLHttpRequest (XHR) by Mozilla in 2002, allowed the developers to develop Single Page web Applications (SPA).

Instead of reloading the browser on each user action, the data was dynamically loaded using Ajax XHR requests. Writing the logic on the client became an alternative to generating HTML on the server before sending it to the client.

So, developers started to write web services on the back end with a documentation of the endpoints' API. There were two common ways:

  • SOAP (Simple Object Access Protocol) that was designed by Microsoft
  • REST (Representational state transfer) that was defined by Roy Fielding in 2000, in his Ph.D. dissertation.

jQuery, 2006

John Resig wrote a library, jQuery. It allowed easier DOM manipulation and event handling (such as button click) and helped to deal with cross-browser incompatibilities.

jQuery logo

Before manipulating elements on the webpage, the developer needs to handle the load event to be sure that the document is loaded. By using jQuery, developers achieve the same with significantly less amount of code. For example, "document.getElementById( ‘cancelButton’ ) ” is in jQuery “ $(‘#‘cancelButton’’) ”. jQuery provides developers an easy way to handle events for elements that are not in the webpage will appear in the future by using "bind" that later renamed to "on".

jQuery provided developers for animating text easily.

Node.js, 2009

Ryan Dahl developed Node.js, a runtime environment that executes JavaScript on the server.

jQuery logo

It provided developers to write the backed in the same programming language as the frontend.

In 2010, Isaac Z. Schlueter developed npm (Node package manager). It provided developers to share code and libraries easily with other developers. Despite the name, npm became a popular way to install libraries both on the client-side and on the backend. In 2010 a web application framework express.js was released.

React, 2013

For a long time, the Facebook website had a bug in its chat section. Users got an indication that there were unread messages, but when they opened the chat, they couldn't find any new messages.

React logo

Developers on Facebook tried to fix this bug, but it appears again after they thought they fixed it. The event handler of sending a message was a huge function with a lot of imperative code that updates and manipulates a lot of DOM elements. And when two-way data binding was used, it was difficult to track how the data flows, and it caused an infinite loop. Because at the time, there were several chat views on the same webpage.

To overcome these issues, facebook invented the Flux application architecture and the React library. It features a one-way data flow. The state is a single source of truth. In event handlers, React developers update the state, and then React detects that the state is changed, and in response, efficiently re-renders the relevant components.

My book, 2020

My book cover

Buying my book on Amazon, would help me to continue writing content and make a living. The book is specifically crafted for Kindle devices and applications. Thank you.