SPA injection

Published: Apr 13, 2021
Apr 2021

The strangler fig pattern is often the default strategy for legacy modernization, where the new code wraps around the old and slowly absorbs the ability to handle all the needed functionality. That sort of "outside-in" approach works well for a number of legacy systems, but now that we've had enough experience with single-page applications (SPA) for them to become legacy systems themselves, we're seeing the opposite "inside-out" approach used to replace them. Instead of wrapping the legacy system, we instead embed the beginning of the new SPA into the HTML document containing the old one and let it slowly expand in functionality. The SPA frameworks don't even need to be the same as long as users can tolerate the performance hit of the increased page size (e.g., embedding a new React app inside an old AngularJS one). SPA injection allows you to iteratively remove the old SPA until the new one completely takes over. Whereas a strangler fig can be viewed as a type of parasite that uses the host tree's stable external surface to support itself until it takes root and the host itself dies, this approach is more like injecting an outside agent into the host, relying on functionality of the original SPA until it can completely take over.