SquidredSquidRed

Saving the Day: Microfrontends, GatsbyJS, and Clean Architecture

A Journey from Spaghetti Code to a Streamlined Development Process


Once upon a time, I embarked on a quest to refactor a massive enterprise website built with GatsbyJS. Little did I know, the road ahead would be fraught with challenges, but ultimately, it led me to a deeper understanding of clean architecture, microfrontends, and the power of Gatsby themes.

The Monster: A Tangled GatsbyJS Codebase

As I delved into the labyrinth of deeply nested code and side-effects, I was struck by the sheer complexity of the project. My trusty Mac Pro quivered in fear, freezing and restarting each time hot reload was triggered. Even the slightest change would unleash a monstrous rebuild, devouring more than ten hours of my precious time.

But as I braved these dark depths, I realized that the true villain was not the code itself, but rather the architecture behind it.

Architectural Flaws Unveiled

As I examined the website's architecture in deep, I realized it suffered from several critical issues that made the codebase nearly unmanageable:

  1. • Deeply nested code: The components were intricately nested, making it difficult to understand the relationships between them and increasing the likelihood of bugs and unintended side effects.

  2. • Poorly handled side-effects: The application's side-effects were not appropriately managed, causing unpredictable behavior and hindering the maintainability of the code.

  3. • Lack of code splitting: The code was bundled together in a monolithic structure, leading to long build times and negatively impacting the developer experience.

  4. • Absence of atomic design principles: The application lacked a clear, consistent design system, which made it challenging to create reusable components and maintain a cohesive user interface.


These architectural flaws were holding the application back, making it increasingly difficult to scale and maintain over time. It was clear that a new approach was needed to overcome these challenges.


The Heroes: Webpack's Module Federation and Microfrontends

In the midst of my struggles, I stumbled upon Webpack's Module Federation and the concept of microfrontends. These brave warriors offered a way to slay the tangled beast and bring order to the chaos.

Microfrontends provide several key benefits for enterprise frontend applications, including:

  1. • Independent builds, deployments, and tests: Each microfrontend can be developed, deployed, and tested independently, leading to a more agile development process.

  2. • Change propagation, changes in one microfrontend won't affect the others, reducing the risk of breaking the entire application.

  3. • Developer experience, with each microfrontend focused on a specific business domain, developers can work in parallel, minimizing bottlenecks.

The Weapon: Gatsby Themes

Armed with the power of microfrontends, I discovered that I could achieve a similar structure in GatsbyJS using themes. By abstracting microfrontends with themes, I could wrap each business domain into a neat package, creating a more manageable codebase.

To forge this powerful weapon, I turned to yarn workspaces. I started by initializing and configuring yarn workspaces, following the guidance provided in this Gatsby blog post.

1) Initialize the yarn project

2) Set up yarn workspaces at /package.json

/package.json

3) initialize root-config project

4) Initialize micro-frontend-1

5) Initialize micro-frontend-2

6) link dependencies

root-config/package.json

7) Install both microfrontends by adding them into the gatsby config file

root-config/gatsby-config.ts

8) Create the index page and add links to navigate to the micro-frontends

root-config/pages/index.tsx

9) Create a page into microfrontend 1

root-config/src/pages/micro-frontend-1/index.tsx

10) Create a page into microfrontend 2

root-config/src/pages/micro-frontend-2/index.tsx

11) create start and build scripts at the root

/package.json

Now you can run the project and be redirected to the respective microfrontend.

The Result: A Frankenstein Site No More

By harnessing the power of microfrontends, Gatsby themes, and clean architecture principles like code splitting and atomic design, I transformed the once-monstrous codebase into a well-organized, manageable application. No longer would my Mac Pro cower in fear, nor would I lose countless hours to seemingly endless rebuilds.

In conclusion, my harrowing journey through the depths of a tangled GatsbyJS project not only taught me the importance of clean architecture, but also provided me with the tools to build more efficient, scalable, and maintainable enterprise frontend applications. Now, with microfrontends and Gatsby themes by my side, Im invincible.

You can check the code at this Github repository.