Sunil Dahiya

Posted on Dec 29

How the Web Evolved: The Rise of Single Page Applications

#webdev #routing #templating #singlepageapplications

When we talk about the web, we frequently hear terms such as client, server, HTML, request, response, data (information), etc.
Let's understand the meaning of few of these terms in the context of the web before we start our journey:

Data: Information.
Request: Asking for some information or data.
Response: Providing the requested information or data.
Client: A browser is a client. It requests data, receives it, and displays the content to us.
Server: A program running on a machine that listens for requests, processes them, and provides responses (information or data).
Internet: A network of interconnected machines, many of which run servers or databases etc.
HTML: A language that browsers understand, allowing them to display information in a visually appealing manner.
Routing: A direction provider; it checks for a requested path. If the path exists, it sends you to it; otherwise, it returns an error.

Let's begin...

An Oversimplified View of How Things Work:

When we try to open a website (URL) in our browser, the browser sends a request to the server, and the server sends back a response.
The browser then processes this response and presents us with a visually appealing webpage, allowing us to read the information we were looking for.

The Early Days of the Internet 🐣

When websites started emerging, servers used to return the entire data wrapped in HTML.
The client (browser) received this data and displayed it.

To better understand, we'll use the example of an e-commerce website, say amazon.com, throughout this article.

The client requests amazon.com. Let's assume the request reaches the correct server without delving into the technical details.
The server then sends back the entire Home/Landing page of amazon.com, along with the data (stored on the server).
When we navigate to the Product section, the client sends another request for the resources of the product page.
The server again sends the entire data wrapped in HTML.
This process repeats for other subsequent requests.

We can begin to see the problem: a lot of duplication, which violates the DRY Principle (Don't Repeat Yourself).

Additionally, each data request resulted in a new HTML page, leading to slower, full-page reloads, and increased routing complexity.

Templating Arrives 🚕

To overcome inefficiencies, templating libraries were introduced.

They allowed developers to create dynamic pages by building reusable page skeletons called templates.
Instead of maintaining entire hardcoded HTML pages, developers started creating reusable templates wherever possible.
Based on the request, data would be inserted into the template, and the resulting HTML page would be sent to the client.

This approach significantly reduced code duplication.

Example - EJS(Embedded Javascript), Mustache etc

 <body>
    <h1>Product List</h1>
    <ul>
      <% products.forEach(function(product) { %>
        <li>
          <p><%= product.name %></p>
          <p><%= product.price %></p>
        </li>
      <% }); %>
    </ul>
  </body>

Internet Meets Database 🫱🏻‍🫲🏽

At the same time, advancements took place in terms of data storage, and databases were introduced.
Now, servers no longer had to maintain data and could fetch it dynamically.

Fetching data from the database:

// Set up EJS as the template engine
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  const db = new sqlite3.Database('./products.db');

  db.all('SELECT * FROM products', (err, rows) => {
    if (err) {
      console.error(err);
      res.status(500).send('Error fetching products');
      return;
    }

    // Render the EJS template with the fetched products
    res.render('index', { products: rows });
  });

  db.close();
});

The data was then fetched by servers and inserted into templates and sent to client.
In the example, we fetch the products from the database, loop over them, and dynamically generate the HTML instead of hardcoding product details.

The next major advancement came into picture when AJAX was introduced.

AJAX, hold my glass 🍸

Imagine shopping on an e-commerce site, and every time you clicked "Add to Cart," the entire page reloads, resetting your scroll position and interrupting your experience.
Frustrating, right?
Enter AJAX—the superhero of smoother, faster web experiences!

What is AJAX? 🤔

AJAX stands for Asynchronous JavaScript and XML.
It’s not a technology in itself but rather a clever use of existing web technologies working together to enable something revolutionary: asynchronous communication.
Asynchronous what? In simple terms, AJAX allows a webpage to send or receive data from a server without refreshing the page.
This paved the way for modern, interactive web applications.

How does AJAX work? 🛠️

Interact with the page: Say we click on "Load More" button to view additional products.
AJAX sends a request to the server: Behind the scenes, JavaScript sends a request (without reloading the page) to fetch more data.
The server processes the request: It gathers the required data from Database and sends it back in a lightweight format (e.g., JSON or XML).
AJAX updates the page: JavaScript processes the data and dynamically updates the webpage, seamlessly adding the new products.

Superpowers of AJAX 🦸

Partial Page Updates

Instead of reloading the entire page, we could now update specific part of the page dynamically.

Speed and Efficiency

Since only the required data is sent and received (instead of a full HTML page),it attributed to faster responses and a better user experience.

Reduced Server Load

By handling smaller, specific requests, AJAX reduced the burden on servers. Instead of repeatedly serving entire pages, servers only deliver the necessary data.

This led to the founding store of modern web application know as SPA (Single Page Applications)

Single Page Applications 😎

Slow performance, duplicate efforts and increase bandwidth usage, to address these issues SPA took a different approach.
SPAs load a single HTML page and dynamically update the content using JavaScript.
This means only the necessary data is fetched from the server, and the page doesn’t need to reload.

How Do SPAs Work?

Initial Load:
The browser loads a single HTML file, CSS, and JavaScript bundle.
This is like setting the foundation for the app.
User Interaction:
When we click on a link or button, the app doesn’t reload the page. Instead, JavaScript intercepts the action, fetches the required data from the server via AJAX, and dynamically updates the DOM.
Dynamic Updates:
Only the relevant part of the page is updated, saving time and resources.
Routing (Client-Side):
SPAs use client-side routing to simulate navigation.
The app changes the URL and content without reloading the page, giving the illusion of navigating through multiple pages.

Let’s Understand Client-Side Routing Through an Example:

Imagine you have a photo frame with a picture inside it
Now, every time you want a new photo, you don't have to go to market get a new frame and place the picture inside it.
You simply swap the photo in the same frame.
This saves time and resource and is much faster.

In React, our entire page is rendered inside the <div> tag defined as root.
We create components using JSX, keep them ready, and add data when needed. These components are then swapped with the existing content on the page. Sounds familiar? Yes, this is templating—just on the client side instead of the server.
So, we’re technically always using the same "frame," with the content continuously changing.

Well folks, I hope this gave you some insight into how it all evolved.

Arigatou gozaimasu 🙇🏻‍♂️

DEV Community