By: Terry Rosen

Published: January 2022

As a business leader in the digital age, you may associate Application Modernization with costly, time-consuming projects that require reconstructing your entire technology stack. While a complete overhaul may be appropriate for some, it’s not a realistic mountain for most organizations to climb, and this halts many potential modernization efforts before they ever get off the ground.

Instead, we suggest starting simple by focusing on modernizing a key capability of the business. This may involve one or more applications but manages to keep the scope small while delivering immediate and iterative value for your investment.

In this article, we examine how this strategy can be applied to modernizing the user interface of a legacy web application.

One ROI-driven step at a time

Let's use a nation-wide healthcare testing laboratory as our example. They're a busy lab and need to build a platform that enables their patients to access their results online. One with a snappy, fresh user interface built with modern web aesthetics and interactivity.

Our health care company's current platform would not easily support the enhancement, this is a common challenge for any organization coming out of the early digital age. The on-prem infrastructure is often aging and costly to support, the codebase is monolithic, and release processes are slow. The bottom line is feature iteration simply cannot keep pace with their business needs.

Bringing key business capabilities to life

A common approach to introducing user interface enhancements is to build them within the existing legacy web application. However, this is a perfect opportunity to start the application modernization journey with a "micro-frontend" solution.

Micro-frontends can be built independently from the existing tech stack using the Strangler Fig approach, which starts by modernizing at the edges, iterating over time, and eventually strangling the legacy system out of existence.

Produce value without legacy friction

Strangler Fig provides many benefits over the traditional approach, with the focus of reducing friction in development, and ultimately, in time to market:

• Develop independently and in parallel with existing legacy application work.

• Test and release changes independently.

• Utilize modern programming languages, tools, and best practices.

• Bypass any skillset or resource limitations of the current development team.

• Harness the security, speed, and flexibility of cloud platforms & services.

Detaching from legacy systems enables us to use agile development practices which provide tangible results over shorter iterations, enabling stakeholders to monitor progress and catch any potential issues before they become a risk to budget and timelines.

Additionally, we can future-proof our technology stack to innovate and modernize again going forward, without the restrictions placed on us by legacy architectures.

Now the healthcare testing laboratory can develop, test, and release their new patient test results portal in a timeline of weeks or months (instead of years) and supply value to their customers while gently and safely removing their dependence on the legacy code and infrastructure.

A few points to keep in mind

While there are plenty of benefits to working outside of your legacy tech stack, there are also some considerations to plan for.

Maintaining a consistent user experience

To avoid disrupting the user experience, common website elements such as the header and footer navigation should remain the same when transitioning between old and new applications.

Options for implementing this include:

• Integrating the micro-frontend with a few lines of code into a new or existing page in the legacy application which uses the same header and footer.

• URL masking using a reverse proxy if the application needs to be hosted elsewhere, then repurposing the existing header/footer.

• Building a new header/footer as micro-frontends and integrating them into both applications.

Technical inventory management

Adding micro-frontends is effective, but also comes with an increase in the number of code repositories for your team to support. Without a proper strategy, this can cause added overhead for your development team.

Ready to get started?

If your business' modernization efforts have stalled due to budget, timeline, or resourcing concerns, hopefully, this article sheds light on an alternative path to moving ahead and gaining a faster return on investment.

Transitioning thin slices of your application portfolio is an effective way to innovate and introduce new business value, while at the same time reducing the cost and footprint of your aging legacy systems and attracting quality engineering talent.

At Build With Assembly, we have the knowledge and skills to make your modernization journey a success, along with proven methods for managing your technical inventory and ensuring maintenance processes are clear and efficient.

Read more about application modernization services, or get in touch.