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.
The concept of state is the single most important aspect of building dynamic websites, so that is where we will begin…
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.
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 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!
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?
- Keeping the user interface (UI) in sync with the state
- 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
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.
- When the button is clicked, a message is sent to the server to update the claps on the page.
- The server responds with the new number of total claps and the number of times you have personally clapped.
- 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.
- 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.