Why the Hype About React, Vue, and Angular? – Part 1

Introduction

Entering the world of tech as a web developer, you'll quickly notice a recurring theme: job postings and advice from seasoned developers often mention the importance of mastering tools like React, Vue, and Angular. It's clear that to thrive in the tech industry, these are skills you'll need to acquire. However, what are these tools precisely, and what are their functions?

React, Vue, and Angular represent just a few examples of JavaScript frameworks and libraries used extensively for building Single Page Applications (SPAs). They're not alone; there are a host of other tools like Ember.js, Svelte, Nuxt, Aurelia, and more, each serving a similar purpose.

Now, let’s delve into what SPAs are.

Single Page Applications (SPAs) are a category of web application that operates entirely on a single web page. Unlike traditional websites that load numerous separate HTML pages from the server, SPAs take a different approach. They begin by loading a single HTML page, and as users interact with the application, its content undergoes dynamic updates.

While this might initially seem a bit complex, stick with me, and it will become much clearer.

To fully grasp the? concept of SPAs, it’ll be helpful to begin by understanding how traditional websites, also known as multi-page applications work.

A traditional website is a website built using fundamental web technologies, including HTML, CSS and plain JavaScript without the utilization of any additional frameworks or libraries.

Now, several key components and processes come together to make a traditional website accessible and functional. Here's a simplified overview of these processes:

1. Domain Name: A user would enter the domain name(e.g. www.example.com) of the website into their web browser’s address bar.
2. DNS (Domain Name System): The domain name is resolved to an Internet Protocol(IP) address by the Domain Name System. The IP address identifies the server where the website's files are hosted.
3. ?HTTP Request: An? HTTP (Hypertext Transfer Protocol) request is sent to the identified web server associated with that domain. This request asks the server to send the website's content back to the user's browser.
4. Web Server: The web server receives the HTTP request, processes it, and determines which files need to be sent to the user's browser.?
5. Content Generation: The server assembles the HTML, CSS, JavaScript, and other assets into a complete web page in a process known as Server-Side Rendering. This process often involves fetching data from databases or external APIs if necessary.??
6. HTTP Response: The web server sends the fully assembled web page along with any associated assets like stylesheets and scripts back to the user's browser as an HTTP response.
7. Rendering: Upon receiving the HTTP response which has a significant portion already pre-rendered on the server, the user's web browser interprets the HTML, CSS, and JavaScript to complete the rendering of? the web page. It displays the content, formatting, and interactive elements to the user.
8. User Interaction: The user can interact with the website by clicking links to navigate to a different page, submitting a form, and performing various actions.?
9. Repeat: These interactions trigger another full-page request to the server. The browser sends new HTTP requests to the server, and the server responds with the requested content. Each page load requires a full round trip to the server.

Now, let’s compare that to the workings of an SPA;

Like traditional websites, the process starts with the resolution of the website's domain name into an IP address by the DNS. Subsequently, an HTTP request is made to the server and this is where it gets interesting;?

1. Server Response: In an SPA, the initial HTML page is often minimal, acting as a shell or a template. The server sends this minimal HTML page along with JavaScript resources that contain the application logic.??
2. Client-Side Rendering: The browser then downloads and executes the JavaScript files which may include the libraries and frameworks like React, Vue or Angular in addition to the initial HTML, to set up the SPA.
3. User Interaction: When the user interacts with the SPA, such as scrolling through a list of items, navigating to a different page or submitting a form, the application uses AJAX(Asynchronous JavaScript and XML) requests to communicate with the server. Unlike traditional websites, where each user action might trigger a full-page reload and request for an entirely new HTML page, SPAs strategically use AJAX to fetch or send data without necessitating the reload of the entire page. This means that SPAs, instead of requesting complete HTML pages, selectively fetch only the specific data or content needed for the current user interaction.
4. Client-Side Routing: SPAs implement client-side routing, meaning that navigation within the application doesn't require requesting new pages from the server. Instead, the routing is managed on the client side by manipulating the URL and dynamically updating the content. This approach eliminates the necessity for full-page requests.
5. State Management: SPAs use client-side state management to keep track of the application's data and UI state. This approach enables SPAs to efficiently update and re-render only the components or sections of the page that have changed, eliminating the need to refresh the entire page.

In Summary,

The key distinction between a traditional website and a Single Page Application (SPA) lies in their handling of user interactions. Traditional websites depend on full-page requests and server-rendered HTML for every user interaction, leading to complete page reloads. In contrast, an SPA follows a different paradigm: it initially loads a minimal page, retrieves and dynamically renders content on the client side, and manages subsequent interactions without resorting to full-page refreshes.

This approach offers several advantages, including a smoother and more responsive user experience, reduced server load, and enhanced performance. It particularly benefits web applications characterized by frequent user interactions and real-time updates, where the ability to fetch and display only the necessary data on-demand contributes to a more efficient and enjoyable user journey.

While reading this post, you might be leaning towards SPAs as the apparent choice for every application. But hold on, there's more to consider! Find the sequel here, where I delve into the pros and cons of each approach.

my next post, where I'll delve into the pros and cons of each approach.