Back to Basics – Part 1 | Fundamentals of Web development

Web development  & Frontend technologies

In this article, we shall cover the fundamentals of web development frameworks. Then in the following articles will talk more on pros and cons of different frameworks that are available.

Web applications can be broadly classified into two categories:

Let us see how SPAs works

• When you access a SPA, the server sends a single HTML file, along with associated CSS and JavaScript files. This is often done via a frameworks like React, Angular, or Vue.
• After the initial load, JavaScript takes over. Based on the user interactions, the DOM is required to change. These DOM changes are handled by the JavaScript framework. This is also called Client side rendering (more details in the next part).
• SPAs heavily rely on APIs (e.g., REST or GraphQL) to fetch data from the server as needed. Data is retrieved asynchronously, often using technologies like fetch or Axios.
• SPAs use client-side routing to manage different views or pages. Tools like React Router or Vue Router enable SPAs to change the browser’s URL without making full page requests to the server.
• State Management: SPAs often use libraries like Redux, Vuex, or RxJS to manage application state. Will discuss state management in detail separately.

In summary, below are the advantages of SPAs.

• Seamless Navigation: Content changes dynamically without full page reloads. This means a full reload of the page is not needed making the user experience smoother.
• Improved Performance: After the initial load, only the necessary data and content are fetched from the server, reducing bandwidth usage.
• Reduced load on the server

At the same time, here are some disadvantages of SPAs:

•  SEO Challenges: Search engines may struggle to index content rendered dynamically via JavaScript.
• Initial Load Time: Loading the full JavaScript bundle can take longer initially, especially for large applications.
• Memory Management: Improper handling of state or components can lead to performance issues like memory leaks.
• Security Concerns: SPAs are more prone to certain client-side attacks, like Cross-Site Scripting (XSS), due to heavy reliance on JavaScript.

Now let us take a look at Multi-page applications.

A Multi-Page Application (MPA) is a traditional web application architecture where every user interaction or navigation triggers a request to the server, which then sends a new HTML page in response. Each “page” of the application is served as a separate file from the server.

Here is how MPAs work.

• Server-Side Rendering (SSR): The server processes each request and generates the required HTML, which is sent to the browser. The browser then renders the page and displays it to the user.
• Full Page Reloads: When a user navigates to a different page or interacts with a link, the browser makes a new request to the server, and the entire page is reloaded.
• Static and Dynamic Pages: MPAs can serve both static pages (predefined HTML files) and dynamic pages (generated by server-side scripts like PHP, Ruby, Python, etc.).

Here are the key characteristics of MPAs.

• Each page has its own HTML file, and navigation involves fetching a new file from the server.
• Most of the application logic and content rendering occurs on the server.
• Sessions and user data are typically managed on the server side.

Advantages of MPAs:

• SEO-Friendly: Every page is served as a static or dynamically rendered HTML document, making it easier for search engines to crawl and index.
• Simple Development: For small applications, MPAs are simpler to develop and maintain because each page is a standalone entity.
• Scalability for Large Sites: Well-suited for large-scale websites with many distinct pages (e.g., e-commerce sites, blogs, and documentation).
• Security: Server-side rendering minimizes exposure of sensitive logic, reducing some client-side security risks.

Disadvantages of MPAs:

• Slower Navigation: Every navigation action triggers a full page reload, which increases latency and reduces responsiveness.
• Increased Bandwidth Usage: Reloading the entire page (including redundant elements like headers and footers) increases bandwidth consumption.
• Complex Development for Dynamic Features: Implementing dynamic, app-like behavior (e.g., filtering, sorting, or real-time updates) often requires additional client-side scripting and AJAX requests.

When to use SPA and MPA

In the next part, we shall cover Client side and Server side rendering.

Written by: Pramod Adalli
Senior Engineer – Full stack development, 28th Nov 2024