The Role of JavaScript in the Modern Web

How JavaScript makes websites stateful and enables dynamic web development

Even if you know next to nothing about web development, you have probably heard that it is, in some way, related to the programming language called JavaScript.

You don’t need JavaScript to make a website, but without it the internet would be just static pages of information; no user interactivity, no animations, and lots of page reloading to fetch new information.

That is because a website is comprised solely of HTML (hypertext markup language) and CSS (cascading style sheets). HTML is the content on the page — the words, the buttons, images, etc. — while the CSS is what determines things like color and font size.

Yes, you read that correctly. A website is HTML, CSS, and not JavaScript.

So where does JavaScript come in, and why is it so important to web development?

JavaScript is used to write programs that govern the HTML and CSS. HTML and CSS, on their own, are static and unchanging¹ — JavaScript can bring them to life! It can make certain blocks of content appear or disappear, or it can make an existing content block look completely different — among an almost limitless number of other functionalities.²

In other words, JavaScript enables interactivity on websites and gives them a sense of state. The state of the website or web application determines how it appears and what it shows and does not show.

The concept of state is the single most important aspect of building dynamic websites, so that is where we will begin…

Defining statefulness

To introduce the idea of state, allow me to begin with a thought experiment…

Close your eyes and imagine a ball being thrown up into the air, falling down, and bouncing twice. You know its launch angle and velocity, and now you want to calculate it’s current height.

Trace of a ball flying through the air over time | Animation by Jim Rottinger

It is a simple physics problem, but you are missing a vital piece of information — the current timestamp. Can you determine the height without knowing how much time has elapsed?

No. It is impossible. The timestamp is essential for determining the state of the ball flight. This concept of the time determining the height of the ball is called being stateful.

Just as time is used to calculate the height of the ball along its trajectory, websites have states too. This is what takes a websites from being static to having dynamic content with user interactivity.

Is the user logged in?
Do they have night mode enabled?
Which layout preference are they using?

These are all common examples of the state that a web application uses to change the content and appearance of its page. Even simple settings can drastically change how the website appears.

For instance, if a user is logged in, we will show them a profile menu instead of a sign-in button. If they have selected night mode, the background will be dark instead of light.

Modern web sites or application can have hundreds or thousands of these little conditionals, each of which govern their own part of the content on the page.

The State of a Website can drastically change its appearance | Animation by Jim Rottinger

The animation above is depicting how state can change the page. First, the user is logged out and has the wide layout enabled. They log in, enable dark mode, turn off the wide layout, and like the post. The end result is the same site with a completely different appearance.

Thinking about our websites in term of state is useful because it makes them predictable. If we know all of the state properties, then we know the current appearance of the site in a potentially limitless number of state permutations.

Take a moment to look at the medium page you are on right now — where can you see examples of state? As an example of how user interactivity can change the state, try clapping for this post and watch how the clap icon changes color and the total clap number increases. Those are two examples of state in one tiny component of the overall page!

You may have taken it for granted that the page did not have to reload to display the new information about your claps. This is where JavaScript comes into play.


The role of JavaScript: managing state and updating the user interface

At this point, we have learned that the appearance of a modern website is governed by its state which can result in a potentially limitless amount of permutations. The question that remains is: What is managing the state itself?

There is a program behind the scenes that listens to all the actions you make on the website and updates the state accordingly. This program is written in the universal language of the web — JavaScript.

The JavaScript running on a modern website or web application has two primary responsibilities:

  1. Keeping the user interface (UI) in sync with the state
  2. Performing background work to get information to and from the server.

Let’s look at these tasks in detail.

1. Keeping the UI in sync with the state

One of the worst things that can happen to a webpage is for the UI to become out of sync with the state of the JavaScript program or the information on the server (more on that later).

For instance, imagine a settings page of a website that has many checkboxes for various settings. How frustrating would it be if you went through and selected all of your settings, only for you to come back later and realize they were not all saved. Something like that can easily happen if the state of the UI gets ahead of the state of the JavaScript.

It is up to the web developer to design a good program that will prevent any out-of-sync issues from occurring. A modern website must be able to respond to and handle all actions made by the user, and keep the UI up to speed.

2. Performing background tasks to get information to/from the server

The final question is: how does the rest of the Medium world know that you clapped for the post?

When you type in a URL and receive back a web page, you are viewing a document sent to you by the server of the website you are on. You can view and interact with the document, but any changes you make to it will only be reflected in your own browser and will not persist to the resource on the server.

In order to update the information on the server, additional requests or messages have to be made to the server. This is all facilitated by the same JavaScript program that manages the state of the UI. Typically, these requests are tied to interactions on the UI. For example, here are the steps that likely happen when you click the clap button on this page:

  1. The JavaScript listens for clicks on the clap button.
  2. When the button is clicked, a message is sent to the server to update the claps on the page.
  3. The server responds with the new number of total claps and the number of times you have personally clapped.
  4. The User Interface is updated with the new number of total claps, as well as highlighting the hand button, indicating that you have personally clapped for the post.

There is probably a lot more happening than this, but this overview should give you an idea about how JavaScript interacts with the server.

The bottom line is that JavaScript can interact with the website’s server to send and receive information to update UI in real-time. It does not require a page reload to fetch new information as it did in the early days of the web. This is perhaps the most important evolution that led to the modern web, with fully fledged applications running in your browser.


Wrapping Up

This post is intended to be a very high-level overview of how JavaScript works in a browser. I have taken a couple of liberties in explaining how it works, but I believe I have represented all the information accurately. The most important piece of information to take away from this post is how to think about websites in terms of their state. Doing so will make you a far better web developer!

Footnotes

  1. Yes, I realize people have done crazy things with only CSS like building a fully functionally chat application, but that is not its intended use.
  2. Modern JavaScript frameworks such as React are used to generate the HTML in the first place, but it doesn’t change the fact that the end result is just HMTL+CSS governed by JS.