Purneswar Prasad

Posted on Dec 1 • Edited on Dec 3

A story on Frontend Architectures - MVC, the MVP

#webdev #javascript #frontend #mvc

The evolution of frontend engineering goes back to the time when the World Wide Web(WWW) was a flashy thing and just like today's(most possibly!) AI bubble, there was the dot-com bubble.

Websites at that time weren’t filled with animations, 3D rendering, colourful dynamic fonts, or immersive interactions like we see today. They were as static as a magazine, consisting of plain HTML and CSS, with very less interactivity from just a little sprinkle of JavaScript.

HTML wasn’t designed for applications; it was built to serve documents, much like PDFs. Everything was rendered on the server, and nothing interesting happened on the client.

Mind it, they were super fast… but also super boring for human eyes!

With increasing internet popularity, the need of sophisticated websites also grew. People wanted to be shown greetings when they login, their shopping cart when they purchase, know the weather etc. and static HTML couldn't do this.

So the web needed server-side logic where pages were no longer stored but are generated on the go, birthing the real software development era.

But again, there was no predefined rule on how dynamic pages are to be created and how the code needs to be structured.

Dynamic pages were rendered like this

const http = require("http");

http.createServer((req, res) => {
  const name = "John";
  const products = ["Pen", "Notebook", "Bag"];

  let html = `
  <html>
    <body>
      Hello ${name}
      <ul>
        ${products.map(p => `<li>${p}</li>`).join("")}
      </ul>
    </body>
  </html>
  `;

  res.setHeader("Content-Type", "text/html");
  res.end(html);
}).listen(3000);

What we see above is called "spaghetti code", where the logic + HTML + SQL + loops + conditions is all mixed in one file.

And with the explosion of the WWW and the incoming of the several online applications and businesses requiring user sessions, validations, access control, complex business logic, a structure was desperately needed.

A good architecture in systems is essential for 3 important things:

Flexibility of changing parts of the application when no longer needed and to stay updated with new frameworks
Testability of the application, boiling down to its individual layers
Scalability of the application's individual parts as well as the whole of it

This was also the time when popular object oriented backend programming languages(Java, C#, Python) were coming up and what better time than then to enforce a standard that would leave a mark on the world of software engineering!

Enter MVC

To address the problems above, comes the standard of MVC - Model, View & Controller architecture.
MVC solves 3 main pain points:

Separates the mixing of HTML and backend logic
Database queries are grouped together rather than being scattered
The whole engineering team has now a well-defined structure:
- Database Engineers for the Model
- Designers for the View
- Backend Engineers for the Controller

Let's understand what the MVC architecture model a little bit in depth and how the data-flow works. Refer to the image below:

Suppose I have an application in a MVC structure to which the user sends a request:

The request goes to the router which sees the kind of request made by the user
Router forwards the request to the controller for the particular route
Controller sees the need to call the Model which has the power to manipulate the database according to the particular request
The Model then talks to(queries) the database
The database results are sent back to the Model
Model sends the data back to the controller
Controller sends the data to the View to be parsed in a HTML template
The server sends the rendered HTML back to the user.

And this is how the data-flow works inside the MVC architecture.

Let's break down the above "spaghetti code" into a clean MVC model!

 models/
    products.js
  controllers/
    homepage.js
  views/
    home.ejs
  app.js

Model (models/products.js)

exports.getProducts = () => {
  return ["Pen", "Notebook", "Bag"];
};

Controller (controllers/homepage.js)

const ProductModel = require("../models/products");

exports.homePage = (req, res) => {
  const name = "John";
  const products = ProductModel.getProducts();

  res.render("home", { name, products });
};

View (views/home.ejs)

<html>
  <body>
    Hello <%= name %>
    <ul>
      <% products.forEach(p => { %>
        <li><%= p %></li>
      <% }) %>
    </ul>
  </body>
</html>

Entry point (app.js)

const express = require("express");
const app = express();
const homeController = require("./controllers/homepage");

app.set("view engine", "ejs");

app.get("/", homeController.homePage);

app.listen(3000);

Above, we broke the code into modular parts separating concerns into different folders, with proper semantic conventions of MVC architecture, thus making it easy to debug, maintain and scale.

MVC marked the web’s shift from scattered, unstructured scripts to clean, maintainable, production-ready applications.
It laid the foundation for all modern frameworks, including the frontends we build today.

DEV Community