Frontend Application Evolution

V1: Online Documents

Image Source: How it feels to learn JavaScript in 2016

Every time I learn a new tool related to frontend development applications, I am always a little overwhelmed by all the tools that are available to help make life “easier.” They do, in large part, actually help with this goal but only if you’re not already overwhelmed by the whole concept of development in the first place. 

I usually have to take a few breaths and remind myself of how the whole system works and where that particular tool fits inside of the system. Then it begins to make sense. At least, I stop hyperventilating and that’s usually a good sign.

What if you don’t know the system though? These articles are to help introduce the way that frontend development has evolved so that these tools make sense. 

Prehistoric Web

Around the turn of the century the internet was blowing up. The hype was real. The internet was going to change everything. Shopping online was not really a thing yet, but everyone knew that it was going to be a thing.

I want to peel off everything though and go back to essentially how the internet originally worked. 

How did it work back then?

Back then, apps were much more difficult to build, but the flow of documents from server to client was actually much simpler than it is today. You may have heard that the internet was originally built so that professors could share work with each other. 

Let’s walk through a request scenario like we’re one of those professors

Request

Let’s say our buddy Dr. Robotnik tells us he’s got his latest paper up on his school’s server that is located at the ip address and page 192.168.1.1/robotnik/machine.html. By entering that in our browser url, our computer will make a request for the server at that ip address location.

If you aren’t aware of how ip addressing works, check out the video here

File Lookup

When the server at 192.168.1.1 receives that request, it will then need to ask itself, “what resource are they looking for? Ah, yes, /robotnik/machine.html, let me go see if that exists.” 

Note: this can get much, much more complex here in how the server handles the request, but we won’t explore that more in this article

Response

The server finds the file machine.html and returns that file back to your machine. The request comes with information that tells the server who sent it (the ip address of the machine making the request). Using that information it returns the file to the correct machine that made the original request

Render

The browser receives the file. At this point it takes the html, and translates it into something that is more human readable. This process of converting a file into a visual page is often called “rendering.”

What's Next?

This simple process of requesting a document and receiving it is a backbone of what the web is today. If we created a website like the one we just demonstrated, it would be ugly and non-functional. HTML on its own is basically just text. No styling, no functionality; just an online book basically. Let’s explore in the next article how things started to get functional with javascript in the late 1990s.

Website | + posts