The Strangler Fig Pattern and Microfrontends: An Incremental Approach to Migrating a Legacy System

Today, I want to talk about the Strangler Fig pattern and how it can be used in combination with microfrontends to migrate a legacy system to a new system. I will also share my experience using this approach to migrate an AngularJS application to React.

Rewrite strategy vs Strangler Fig pattern

When an organization needs to migrate a legacy system to a new system, it has two main options: a rewrite strategy or the Strangler Fig pattern.

A rewrite strategy involves completely replacing the legacy system with the new system all at once. This approach can be attractive because it allows the organization to start fresh with a modern, fully-featured system. However, it can also be risky because it requires a significant investment of time and resources, and there is a risk of disruptions to the organization's existing operations during the migration process.

The Strangler Fig pattern, on the other hand, involves gradually replacing the legacy system with the new system by wrapping the new functionality around the old system. This approach allows the organization to migrate to the new system in a controlled, incremental way, reducing the risk of disruptions to its existing operations. However, it can also be more time-consuming and may require more resources than a rewrite strategy, as it involves maintaining both the legacy system and the new system during the migration process.

Advantages of a rewrite strategy

  • Allows the organization to start fresh with a modern, fully-featured system
  • May be faster and require fewer resources than the Strangler Fig pattern

Disadvantages of a rewrite strategy

  • Risky, as it requires a significant investment of time and resources
  • Risk of disruptions to the organization's existing operations during the migration process

Advantages of the Strangler Fig pattern

  • Allows the organization to migrate to the new system in a controlled, incremental way
  • Reduces the risk of disruptions to its existing operations

Strangler Fig pattern

First, let's define the Strangler Fig pattern. This is a software design pattern that involves gradually replacing a legacy system with a new system by wrapping the new functionality around the old system. This allows organizations to migrate to a new system without disrupting their existing operations or incurring the high costs of a complete system overhaul.

One potential use case for the Strangler Fig pattern is migrating a legacy application to a new technology stack. For example, an organization may have a monolithic Java-based application that it wants to migrate to a microservices architecture based on a newer language such as Go. In this situation, the organization can use the Strangler Fig pattern to wrap the new Go-based microservices around the legacy Java application, gradually replacing more and more of the legacy functionality over time.

Now, let's talk about microfrontends and how they can be used with the Strangler Fig pattern. Microfrontends is a software architecture pattern that involves breaking a monolithic frontend application into smaller, independent units that can be developed, deployed, and maintained independently. This allows organizations to adopt a more modular approach to frontend development, which can make it easier to migrate a legacy system to a new system using the Strangler Fig pattern.

I recently had the opportunity to use the Strangler Fig pattern and microfrontends to migrate an AngularJS application to React. The process involved implementing a small number of microfrontends around existing AngularJS components, which were built using React. We then gradually replaced more and more AngularJS components with microfrontends until the entire frontend application had been migrated to React.

microfrontend AngularJS & React with Bootstrap application

Using microfrontends in this way had several benefits. It allowed us to take a gradual, incremental approach to the migration, which reduced the risk of disruptions to our existing operations. It also allowed us to test the new microfrontends in production before fully committing to the migration, which helped us identify any issues or bugs before they became major problems.

In summary, the Strangler Fig pattern combined with microfrontends is a powerful tool for organizations looking to modernize their systems or migrate to a new technology stack. It allows them to do so in a controlled, incremental way, reducing the risk of disruptions and enabling them to take advantage of the latest technologies without sacrificing their existing operations.

I hope you found this information useful! Thank you for reading!