A "Brief" History of the Web
Tags: webdev, beginners, javascript, php
Published: 2021-09-19 03:59:54

Looking back on how web apps started can give us an insight on where it's going. 


# Birth of the WWW

While working for CERN in 1989 a British scientist of the name Tim Berners-Lee invented the World Wide Web. The idea was to create a world wide network of computers to form a global information system.

# The first Web Webserver, Web Browser and Web Page

It wouldn't be until late 1990 where Berners-Lee deployed the [world's first web page](http://info.cern.ch/hypertext/WWW/TheProject.html). A web page is a text document written in a special formatting language called the Hypertext Mark-up Language(HTML).

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ezmwnsf86v1jaui9nu7.png)
The world's first web server [Photo Credit](https://cds.cern.ch/record/42413).

Web servers are simply computers connected to a network that exposes a portion of it's filesystem to any web browser that connects to the web server's IP address. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohyubyflp0v88vzvnu7g.png)

How the web works [Image Credit](https://www.google.com/url?sa=i&url=https%3A%2F%2Fhackernoon.com%2Fhttp-made-easy-understanding-the-web-client-server-communication-yz783vg3&psig=AOvVaw1OCVjE_jE01-2c3ZIp6Lpk&ust=1632108712555000&source=images&cd=vfe&ved=0CA0Q3YkBahcKEwiQ_6vzjIrzAhUAAAAAHQAAAAAQAw) 

When web browser software running on a networked client computer connects to the web server; it downloads and displays the server's documents according to the formatting specified in the document's HTML code. The network protocol that governs this communication is the Hypertext Transfer Protocol (HTTP).

# The Start of the Dynamic Web

## The Common Gateway Interface

There was a demand for webpages to be 'smarter'. Since web servers are just computers why not execute programs on it? Hence the  [Common Gateway Interface](https://en.wikipedia.org/wiki/Common_Gateway_Interface) (CGI) was created in 1993. The CGI lets us configure our webservers to execute a program/script on the server as opposed to returning an html page from the filesystem when responding to a request.

![CGI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06b5vf68b6dgw6e760xk.png)
 
Initially CGI was specified to execute scripts written in C. Support for shell scripts and other languages such as Perl, Ruby, Java Server Pages, Active Server Pages and PHP followed. But, what did these scripts do?

## Templating

Before server side scripting, websites were static read only experiences. When a web page was visited in the browser, the same content will appear unless there was an update by the author. If you had many pages of a website that shared common, styles or sections, they had to be individually written and updated on each page.

Templating was the solution to this problem. This made building large websites significantly easier as you can reuse part of pages and use loops and if statements to generate html code. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52os29tq032m57mupxf6.png)

How a template engine works [Image Credit](https://www.google.com/url?sa=i&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FFile%3ATempEngWeb016.svg&psig=AOvVaw3HmEFye5Iv8bb7Pbak08qg&ust=1632110485306000&source=images&cd=vfe&ved=0CA0Q3YkBahcKEwjQ6uvEk4rzAhUAAAAAHQAAAAAQCQ) 
 
```c
void print_file(FILE *f)
{
    int c;
    if (f)
    {
        while ((c = getc(f)) != EOF)
            putchar(c);
        fclose(f);
    }
}

int main()
{
    FILE *content = fopen ("/var/www/cgi-bin/hello-world.html", "r");
    FILE *header = fopen ("/var/www/cgi-bin/header.html", "r");
    FILE *footer = fopen ("/var/www/cgi-bin/footer.html", "r");

    printf("Content-Type: text/html \n\n");
    print_file(header);
    print_file(content);
    print_file(footer);
    return 0;
}
```
A CGI Script written in c [credit](https://stackoverflow.com/questions/41744184/using-a-c-cgi-to-serve-html-templates-forms)

The server side script interpreters come with a [Template Engine](https://en.wikipedia.org/wiki/Template_processor). Template Engines interpret script commands for pre-processing html in the server before being sending them to the browser.

At this point, large websites were easier to make and we can change our page content based on form submission data from a previous page.

## Handling Data

Now that an execution model has been established on the server, long term data storage could be integrated into web experiences. By having our server side scripts connect to databases and apply templating, web pages can become more dynamic. 

Now, the data on a page can be separated from its formatting.
We can use a script to connect to a database, retrieve some data, then apply template syntax to display the data on a page. This allows the content of pages to be **dynamically altered without updating the page itself** but rather by altering the data source instead. This was the start for many interactive web applications.

# Stopping for now
This post is turning out to be much longer than I imaged. Maybe it's not so brief after all. I think I shall make this a series instead and explore this further in the next post. Until next time! 

Update (25/09/2021)
Many thanks to [Jackub](https://dev.to/jcubic) for the suggestion about expanding on CGI. I have updated this article to expand on it.

# References
* [Server Side Scripting](https://en.wikipedia.org/wiki/Server-side_scripting)
* [CERN a short history of the Web]
(https://home.cern/science/computing/birth-web/short-history-web)