Skip to main content
  1. Posts/

Which STACK do you pay your allegiance to?

·7 mins

[Subtitle] Is it a simple choice?

•    •    •

This post is the third of the series of posts on evolution of web technologies

Part 1 : Precursor to the WWW, that very few know of

Part 2 : Making sense of the evolution of the Internet

Part 3 : Which STACK do you pay your allegiance to?

Part 4 : Angular vs React vs Vue (Work in Progress)

•    •    •

Context #

As we have seen in Making sense of the evolution of the Internet, there was no lack of diversity across the spectrum of web-based technologies. While that was that, there was also a certain natural affinity between certain pairing of technologies, each meant for address a specific need and sort of fitting in cleanly into the puzzle of a well define architecture. Such pairings started becoming popular as “stacks” - let’s explore two of the most popular ones with distinct and important differences. Rather than seeing them as off-the-shelf ready-to-use commodities, one can benefit from seeing them as schools of thought.

LAMP stack (late 1990s - early 2000s) #

  • Components: LAMP stands for Linux (operating system), Apache (web server), MySQL (database), and PHP (programming language). It can also be modified to include Perl or Python in place of PHP, leading to variations like LEMP (where E stands for Nginx, pronounced “Engine-X”).

  • Architecture: LAMP exemplified the traditional web application architecture with a clear separation between the server (backend) and the client (frontend), where the server handles most of the processing, database interactions, and server-side rendering (SSR) of pages before sending them to the client (browser).

  • Flexibility and Control: LAMP offers considerable flexibility in terms of what can be built and how it’s deployed. It also gives developers control over the environment and infrastructure.

  • Scalability: Scaling a LAMP application often involves vertical or horizontal scaling, which can become complex.

  • Development and Deployment: Development might include a mix of backend and frontend work, with a focus on server-side logic. Deployment involves server management, database setup, and possibly configuring a web server.

Microsoft .NET (1990s - early 2000s) #

In response to LAMP, Microsoft brought forth their stack that offered

  • Components: Windows (operating system, though .NET Core and .NET are cross-platform), IIS (Internet Information Services) (web server), SQL Server(The database system, though other databases can be used) and C# or VB.NET (the server-side programming languages).

  • Architecture: Microsoft .NET’s core focus is around modularity, versatility, and client-side integration. It embraces the Model-View-Controller (MVC) pattern for clear separation of concerns. .NET supports a wide range of applications, from web to desktop and mobile, and scales effectively. Additionally, it integrates with JavaScript frameworks and enables high-performance client-side development through WebAssembly (Blazor) .

  • Flexibility and Control: Compared to LAMP, Microsoft .NET’s offers wider range of flexibility in terms of application types that can be built using it - web, desktop, mobile, cloud, and more. Developers can choose from multiple languages (e.g., C#, F#, VB.NET) within the .NET ecosystem. It also gives cross-platform capabilities via .NET Core and .NET 5+ allow deployment on Windows, macOS, and Linux. But, most of it comes from originating from being a proprietory offering, many parts of which have been open sources over the years.

JAMstack (Late 2010s) #

  • Components: JAMstack stands for JavaScript, APIs, and Markup. It emphasizes the use of client-side JavaScript for dynamic functionalities, reusable APIs for backend operations, and prebuilt Markup for fast page loads.

  • Architecture: JAMstack is a modern web development architecture that decouples the frontend from the backend. The frontend is usually a static site generated at build time using templates and enhanced with JavaScript for dynamic interactions. The backend functionality is abstracted into reusable APIs, consumed via JavaScript.

  • Flexibility and Control: While offering less control over the server environment (since much of the backend is abstracted away into services), JAMstack enables a high degree of flexibility in choosing different services and tools for different needs (e.g., content management, authentication). It also fits well with the rise of static site generators and headless CMS technologies.

  • Scalability: JAMstack sites are inherently scalable due to their static nature. Serving static files can be efficiently done via Content Delivery Networks (CDNs), reducing server load and speeding up response times globally.

  • Development and Deployment: Development is often focused on the frontend, leveraging various APIs for backend services. Deployment is simplified since static files can be served from anywhere, and many platforms offer continuous deployment from version control for JAMstack sites.

NOTE: JAMstack isn’t a stack in the traditional sense but rather a new approach to building and deploying websites and apps that rely on client-side rendering and APIs for dynamic functionalities.

Focusing closely on key differences #

  • Technology Stack: LAMP relies on a specific set of technologies (Linux, Apache, MySQL, PHP/Perl/Python), whereas JAMstack is more about an architectural approach that can incorporate various technologies as long as they adhere to the principles of JavaScript, APIs, and Markup.

  • Dynamic vs. Static: LAMP is oriented towards server-side processing (SSR and SSG) to generate dynamic content. JAMstack, while capable of supporting dynamic operations through APIs and client-side JavaScript, primarily serves pre-generated static content.

  • Development Focus: LAMP stack development can involve significant server-side work, including database management, server configuration, and backend logic. JAMstack shifts the focus towards the frontend, leveraging third-party services and APIs for backend functionalities.

  • Deployment and Hosting: LAMP sites often require traditional web hosting environments with specific server configurations. JAMstack sites, being static, can be hosted on a wide range of services, including those specifically designed for static sites, offering advantages like automatic scaling and reduced hosting costs.

•    •    •

Recent variations of JAMstack #

While JAMstack represents an architectural philosophy, few modern instantiations have gained popularity.

MEAN stack (~2013) #

  • MEAN stack emerged as JavaScript began dominating both client-side and server-side development. It includes MongoDB (a NoSQL database), Express.js (a backend web application framework running on Node.js), AngularJS (a frontend framework by Google), and Node.js (a runtime environment for executing JavaScript on the server).

  • The MEAN stack offered a full JavaScript stack facilitating the development of dynamic web applications with JSON as the data exchange format, simplifying the development process by using a single language across the stack.

  • It represented a shift towards single-page applications (SPAs) and the growing importance of non-relational databases in handling unstructured data.

MERN (~2015) and MEVN (~2016) #

  • As frontend technologies evolved, AngularJS saw competition from React (leading to the MERN stack: MongoDB, Express.js, React, node.js) and Vue.js (leading to the MEVN stack: MongoDB, Express.js, Vue.js, node.js).

  • These variations reflect the flexibility of the backend components and the interchangeable nature of modern JavaScript frontend frameworks/libraries.

•    •    •

Emergence of Universal or Isomorphic applications #

While these stacks seem to show clear delineations and swim lanes one would stay in, the reality is much more malleable.

Evolving needs of web development, aiming to marry the speed and SEO benefits of server-side rendering with the rich interactivity of client-side single-page applications (SPAs), as well as the benefits of code reuse, development efficiency, and simplified deployment & hosting have led to the emergence of Universal or Isomorphic applications, which are written in JavaScript, can run both on the server and the client.

The rise of frameworks like Next.js for React (Oct 2016) and Nuxt.js for Vue.js (Feb 2017) has further facilitated the adoption of isomorphic practices, making it easier for developers to create and manage these types of applications.

Both Next.js and Nuxt.js deliver on their promise by abstracting away much of the complexity involved in configuring server-side rendering or static site generation. They provide a cohesive set of conventions and sensible defaults that work out of the box for most applications. This includes handling code splitting, client-side routing, page layout, and data fetching patterns in a way that seamlessly integrates with their respective ecosystems. This allows developers to focus on building their applications without worrying too much about the underlying architecture. The result is a smoother development experience, enhanced performance, and improved SEO capabilities, making these frameworks popular choices for modern web development projects.