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 interfaceAt 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:Keeping the user interface (UI) in sync with the statePerforming 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 stateOne 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 serverThe 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:The JavaScript listens for clicks on the clap button.
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.
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 UpThis 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!FootnotesYes, I realize people have done crazy things with only CSS like building a fully functionally chat application, but that is not its intended use.
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.
.