Full stack Development in 5 minutes

You opened your browser, navigated it to dev.to and stumbled upon this article.

You might be using your mobile device or your computer, but it doesn't matter - both you and me see the same article.

How is this possible?

Both you and me are running a program on our devices that takes a domain name and a path and returns a document associated with this domain and path.

I might have written the article, but each of us have our own copy - served to us as a text. This text is formatted in a way that our client applications (browsers) can understand and turn into nicely looking well structured document.

Wanna see how it actually looks like? Try this:

curl -iv --raw https://dev.to

Where is this coming from?

I can’t pinpoint the exact machine the code is served from, but I guarantee there’s a computer out there somewhere that has a program running that listens to requests and responds with matching information. Or an error. It’s just like the programs you write, but with no graphical user interface.

This server application speaks the same language as the client application on your device. This language is called HyperText Transfer Protocol. It might be “hyper” but it’s still text:

• Client says: GET https://dev.to
• Server says: 200 OK and returns the home page

Sometimes server would be unwell and it would answer with 500 Internal Server Error and then our client would render “Oops! Something went a bit wrong!” or whatever body the server would return - it can even be a funny image or a video or a game you could play!

So is it text or not?!

I understand your confusion, it is still text: request and response headers would be text, a separator between the headers and the body would be a new line (two of them to be exact), but body can be anything!

As long as server gives client a hint what is it about to send (in a Content-Type header) - it can dump any binary data.

For example, you could try accessing this link. It's Dev logo and if you'd make a request from your terminal, you'd see that content type is image/png:

curl -I https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png

HTTP/1.1 200 OK
x-amz-id-2: kpTs+u9cScPZgzi5OH5j6eiZo21E0yDH1jY+B8hA4Xi89MIc4dvoHOIhjpAxLvU+1j8JRB2wGE0=
x-amz-request-id: 6ZEDJYV2G3B17ACR
Date: Sat, 23 Nov 2024 12:40:58 GMT
Last-Modified: Thu, 13 Jan 2022 11:56:52 GMT
ETag: "8312418cfcd05eb09326dfafe1ec0fec"
Cache-Control: public, max-age=31536000
Accept-Ranges: bytes
Content-Type: image/png
Content-Length: 1812
Server: AmazonS3

Amazing, isn't it? Thing is text is also binary! So in the end of the day it was binary protocol all along it's just that even terminal applications have no issues turning a stream of binary data into readable text; it's just not too pretty.

But what about all that CSS and HTML?!

Terminal can understand text/plain, but browsers know how to understand text/html,text/css and even text/javascript.

Yup! It's also text! And when your Chrome, Mozilla or e.g. Edge gets this kind of text they render whatever that text suggests: styled buttons, animated widgets or a paragraph with a header.

And you might have used a tool or a library that made it easier for you to write HTML, CSS and JS text, but in the end of the day it's still going to be a mix of these technologies and some more.

What more?

Server can process different kinds of requests: you can GET stuff, POST stuff, PUT stuff or even DELETE stuff. And sometimes you would need structured data without any bells or whistles.

Like for example this one:

My browser loaded the home page and then scripts on the page loaded some more data, application/json data to be precise.

I can only guess what this data does, but you could try and monitor network requests when you like this article (see what I did there? 😎).

And you can exchange any kind of data between client and server! And there are ways to exchange information between client and client and server and server as well!

Or even a whole fleet of servers! But that's a story for another time, if you're up for it :) Let me know what you think about it in the comments!

Comments

[Ânderson Natanael]

Interesting.