How the Web Works series: What is a web client?

#webdev #programming #javascript #frontend

This article is part of the How the Web Works series I'm running over on Substack! If you're interested in following along, check it out here:

https://howthewebworks.substack.com

—--

If the goal of the How the Web Works newsletter is to thoroughly understand how the web works, there is no better place to start than the web client.

Web clients are the most-recognized, user-facing component of the web. You’re probably using one right now to read this newsletter article.

Common types of web clients

Common types of web clients include the following:

Web browsers (e.g., Chrome, Edge, Firefox, Safari)
Mobile applications (e.g., the LinkedIn application)
Desktop applications (e.g., the Spotify application)

Basically, any application that is used to browse the Internet or interact with web services can be thought of as a web client.

But what is a web client, really?

I just described web clients as any application used to browse the Internet or interact with web services, but I actually don’t think that definition does a good enough job at isolating the functionality of a web client well enough to gain a deep understanding of the web.

Instead, what I generally tell people is that web clients are fancy document viewers.

When you navigate to a website, there is a lot that goes on (much of which we’ll cover in subsequent editions of this newsletter!). But, at the end of the day, your browser (the web client) receives a document and displays it to you. Even though you had to browse to a website to get it, that document is now on your device!

If it seems strange that I’m focusing so much on the fact that the web client is a document viewer, I totally get it! But I promise there is a reason I’m doing so. As we get further and further into our exploration of how the web works, it is going to be critical to keep in mind the exact role the web client is playing.

Web browsers were first invented for linking documents together

In 1990, Tim Berners-Lee created the first web browser, the WorldWideWeb, while working at CERN. Berners-Lee’s browser was a graphical user interface (GUI) that allowed text documents to be linked together over a public network.

In 1994, Netscape released Netscape Navigator, the first commercial web browser, to the public. The following screenshot shows Netscape Navigator v2, which was released in 1995.

In the years to come, fierce competition between companies like Netscape, Microsoft, and Google would lead to rapid browser innovation, including Microsoft’s introduction of the first implementation of Cascading Style Sheets (CSS) in Internet Explorer and Netscape’s introduction of JavaScript.

While browsers have evolved to include a lot of additional, fancy functionality, they have always had a foundation in sharing documents.

What makes the web client a “fancy” document viewer?

These days, web clients don’t only display documents. They do quite a bit of work in order to make that happen! In the following sections, I’ll provide a list of some of this additional functionality. Note that we will spend some time on each of these topics in coming editions of the How the Web Works newsletter!

Parse and understand the languages of the web

All common browsers can parse and understand HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript. These three languages dictate the structure, display style, and interactivity of the documents you view. For example, HTML may specify what is heading text versus what is paragraph text. CSS would specify the size and color of those texts. Finally, JavaScript could make that text scroll across the page! (Note: just because we could doesn’t mean we should!).

Understand Hypertext Transfer Protocol (HTTP)

HTTP is a network protocol used to communicate between clients and servers on the web. In order to display documents (and other data) to users, web clients need to parse them from HTTP messages. Furthermore, web clients need to send HTTP messages to request or update data elsewhere on the web.

As a brief example, an HTTP message may look like this:



GET /index.html HTTP/1.1
Host: www.example.com

This message would request the contents from the index.html file from www.example.com. Don’t worry too much about trying to understand this example—we’ll get more into HTTP in a dedicated edition of the newsletter.

Keep you safe with various security measures

It’s a big, scary world out there! As you are probably aware, bad actors are constantly trying to find ways to steal peoples’ personal information. Web clients perform various security checks to try to keep you safe.

Some important safety measures that browsers perform:

Negotiate secure connections with web servers
Make sure a website’s content is truly being sent by the website owner
Prevent malicious code from being run inside your browser
Disallow websites from viewing your data associated with another website

Store pieces of information to help us interact with web services

Browsers store pieces of information on your computer to help you interact with web services. For example, you have likely heard of web cookies, which are often critical in maintaining your logged-in state on a website.

Main takeaways

We’ve spent some time talking about a familiar but critical piece of the web: the web client. If you take anything away from this edition of the newsletter, it should be the following:

A web client is a piece of software running on a user’s device. Common web clients are web browsers, mobile applications, and desktop applications.

Web clients are essentially a fancy document viewers. They do a lot more than this, but for the purposes of understanding the web, it’s helpful for us to think of them in this simple way.

In future editions of this newsletter, we’ll start building out our knowledge of the technologies that enable your web client to request documents (and other data) from web servers. Additionally, we’ll learn more about the technologies used within web clients to make modern web applications work.