JavaScript, Ruler of the Frontend

If you're starting to grasp that JavaScript is integral to the way modern websites and web applications function, you're on the right path. Without JavaScript, most of the user interfaces we take for granted on the web wouldn't exist. Let's take a closer look at how JavaScript brings the frontend together. We'll be working with a couple of React applications, as well as comparing and contrasting a Python application in order to further our understanding of the whys and hows of JavaScript's importance on the frontend.

The following topics will be covered in this chapter:

• Building interactions
• Using dynamic data
• Understanding modern applications

Technical requirements

Be prepared to work with the code provided in the Chapter-10 directory of the repository at https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-10. As we'll be working with command-line tools, also have your Terminal or command-line shell available. We'll need a modern browser and a local code editor.

Building interactions

Let's take a look at a simple Single-Page Application (SPA):

1. Navigate to the simple-reactjs-app directory in chapter-10 (cd simple-reactjs-app).
2. Install the dependencies with npm install.
3. Run the app with npm start.
4. Access the app at http://localhost:3000. Here's what you'll see:

Figure 10.1 – Simple React app

As you click through the detail buttons and inspect your network tab, you will see that the page does not reload and it only loads the JSON data from the server. This is a very basic example of how an SPA functions: with minimal server usage, the user experience's interactions are streamlined, contributing to an efficient, low-overhead workflow. You're probably familiar with other SPAs, such as Gmail, Google Maps, and Facebook, though the underlying technologies vary.

It may be taken for granted in this day and age of internet technology, but JavaScript is the foundation of how these apps work. Without JavaScript, we&apos...

Using dynamic data

Let's first take a look at a Python Flask example:

1. Navigate to the flask directory in chapter-10 (cd flask).
2. You'll need to install a few pieces for our setup. These instructions are for Python:
   1. Create a virtual environment with python3 -m venv env.
   2. Activate it using . env/bin/activate.
   3. Install the requirements: pip3 install -r requirements.txt.
   4. Now you can start the application: python3 app.py.
3. Access the page at http://localhost:5000. You'll see this:

Figure 10.2 – Basic Flask application

Play around with entering and not entering your name and take a look at the fact that the page reloads when you do so (I've added a timestamp to make it easier to see as the page reload can happen too quickly to see). This is a very basic Flask application, and there are more efficient ways to do validation work with a combination of Python and JavaScript, but at a base level, even with some Flask-based form validation tools, the validation and interaction...

Understanding modern applications

At this point, it should come as no surprise that all modern web applications are inextricably tied to using JavaScript. There's no modern web without it, as interactions simply cannot happen in real time without it. The server side has its place and importance, but the crux of what the user sees and interacts with is controlled by JavaScript.

Just like CSS is a complement to HTML, JavaScript is the third friend in the group, creating meaningful experiences out of a collection of markup and styling. As the muscles of a web app, it provides us with rich interactions and logic, and is the foundation of all SPAs. It truly is a tool of wonder and beauty.

Summary

With JavaScript, we can go beyond the "web page" and create fully fledged web applications. From email systems to banks to spreadsheets to nearly anything you use a computer for, JavaScript is there to help you.

In the next chapter, we will venture into using JavaScript on the server side with Node.js. We won't completely leave the frontend behind, but rather, we'll see how they tie together.