This is a typical exchange during a “Sprint Planning Meeting” between Product and Technology:

Product:

Ok, we have to complete these 10 priority features in addition to the other 5 features that we didn’t complete in the last sprint.

Developers:

Ok, but… I think we should spend some time fixing the tech debt from the last 3 sprints which are causing our builds to fail and slow down our productivity.

Product:

Ok, could you explain why this is required and what are the benefits?

Developers:

Sure, we need to fix X otherwise Y breaks, and last time it did we…


First an Apology…

This is a public apology to my friend Brandon @flybayer. Back in 2020 when he published Blitz, I replied to one of his tweets with something along the lines of:

“I don’t understand why people want to go back to the monolith, especially on top of React, I thought we have gone past that and microservices + SPAs are the norm today”.

I was wrong, very wrong…

Is There a Middle Ground?

I have been exploring a lot of the new cool stuff that is coming to the JavaScript ecosystem lately, and I have noticed an interesting trend: developers want the flexibility and scalability of…


We have been told again and again that one of the golden rules of software engineering is the famous “Don’t Repeat Yourself”; if you find code that is repetitive you should try to abstract it, however, how does a modular architectural approach affect the DRY principle?

Let’s imagine that you are building a new section of a modular frontend application, you have the freedom to release to production as many times as needed without needing intervention from other teams, however, you start noticing a pattern, some of the features you are building are so similar across all modules that you…


This post is also available in Spanish here: https://www.infoxicator.com/es/traduciendo-mi-blog-con-next-js

English is my second language and before I was proficient, I always found it really difficult to find tech resources in my own language. That’s why I decided to translate my blog and make all my content available in Spanish.

Internationalization with Next.js

Next.js has made Internationalization (i18n) a breeze with one of the most recent advanced features available in version 10: Internationalized Routing.

From the two options provided by Next.js, …


I always wondered how large web applications were built! I discovered the secret a while back and it became my passion. After experiencing the advantages and pains of using Micro-Frontends at scale, I have decided to document this journey and share some of the “best practices”.

This is an opinionated list of best practices when designing applications that follow the Micro-frontend pattern. Each “rule” should be examined and its benefits/downsides evaluated against your specific use case.

Zero coupling between Micro-frontends

To achieve the benefits of this architecture, accidental coupling should be avoided as much as possible; this will unlock the flexibility and scalability that…


This article is also available in Spanish here: https://www.infoxicator.com/es/dark-mode-no-es-suficiente-esta-es-una-alternativa

These days most websites have an option to toggle Dark mode, and if you find one without it, you will be screaming: “How dare you burning my retinas!”. But what if I wanted more than a light and a dark colour scheme and you had the option to use “Gray Mode”, or “Christmas Mode” or “My Favorite movie/video game mode”?

Theme Switcher Gatsby Plugin 👉 https://www.npmjs.com/package/gatsby-plugin-theme-switcher

Theme Switcher Dependency for Nextjs 👉 https://www.npmjs.com/package/use-theme-switcher

Creating a Multi Theme Switcher with React

Here are the features I am looking for:

  • Switch between an infinite number of themes
  • The current theme…

Are they “just components”?

A while ago, one of my colleagues sent me a link to bit.dev saying: “hey! check out this awesome collection of microfrontends and how easy it is to reuse them on your application!”.

I had a look and thought, this looks awesome! but… are they “microfrontends” or just “components”? 🤔.

This is a common question and some people argue that microfrontends are just a good “component model”.

So is there a difference between “microfrontends” and just “components”? Let’s find out!

Solving a specific problem

A while ago there was a thread on twitter discussing microfrontends and I came across the reply below:

The…


This article is also available in Spanish here: https://www.infoxicator.com/es/la-historia-de-micro-frontends

A Familiar Scenario

It is 5:30 pm on a Friday and you must deploy a very important fix to the frontend of your application; you kick off the deployment process and wait for the 50K unit and integration tests to run. Just before the tests are done, you receive a message from another team telling you that the commit they pushed last week to enable “Dark Mode” hasn’t been approved yet and because it is bundled with your fix, you must stop the entire deployment process. …


In my previous article, I introduced Holocron, a new way of creating Micro Frontends in React. Now, here is the deal…

“How do you assemble all the jigsaw pieces in a Micro Frontend architecture puzzle? the answer is… NOT using Iframes!”

Most of the examples that you find on the internet on how to create a Micro frontend based application mention the usage of iframes, but let’s be honest, Iframes are bad ☹️… And they are by no means the elegant solution that the modern web is used to these days… so my question again is:

Is there a secure way to assemble dozens of React modules on a single page, preserving a small page load, Server Side Rendering and…


What if I told you that you could deploy parts of your Server Side Rendered React applications without restarting the server?

Discover Holocron: The backbone of One App, a new modular take on web application development.

Independent modules, independent deployments

You probably have heard about Micro Frontends, the new buzz word in the Frontend Community. Its premise is to allow you to split your monolithic frontend applications into small, tested, and individually deployed modules.

Holocron modules allow you to code split your application by default; setting the scope of your micro frontend as well as enabling reusability achieved by module composition.

Let’s create your first Holocron

Head over to your terminal with NodeJS installed and paste the following:

export NODE_ENV=development
npx -p yo -p @americanexpress/generator-one-app-module…

Ruben Casas

👨‍💻Senior Engineer. 🔈 Online Conference Speaker. ⚛️ Working on a React Microfrontend Framework for millions of users worldwide. ❤️ Love helping others

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store