// case study - frontend modernization

Frontend Modularisation and Modernization.

A subsidiary of a large international enterprise approached us with a daunting challenge. Over a period of 15 years they had added feature upon feature to their ever-expanding and highly successful product. It had become an unmaintainable tangle of Python Django, Angular.JS and various other short lived experiments over the years. Now they received the assignment from their mother company to modernize and implement a common design language. Bosun teamed up with their platform engineering team to develop a workflow that would allow them to automate the preparation of modules with modernized ported functionality.

Workstream
Frontend architecture
Focus
Modules and boundaries
Reviewers
Platform Engineers
Status
Migration Initiated
// story arc

From fragile frontend changes to bounded feature work.

Upgrading the frontend to a modular, maintainable architecture with a common design language across the product is a monumental undertaking crossing multiple teams and many stakeholders. The various teams developing the frontend have their own goals and priorities driven by sales objectives and do not have time to spare for maintenance work. Our goal was to make it easy for a team to quickly port over all functionality within a described domain into a new module, so that the team could easily evaluate the impact and validate the preserved functionality while making visual adjustments to the new module.

Problem

Coupled UI surface

Feature code, shared state, and infrastructure concerns have grown together, making small changes expensive to reason about.

Approach

Extract, port, and validate

The agentic workflows identify boundaries, extract shared user stories and API surface, port functionality into a new module, validate and fix regressions, and submit compact pull requests.

Outcome

Self-contained modules with clear API boundaries

Frontend teams maintain isolated modules with clear API boundaries, making it easier to understand and modify feature areas without affecting unrelated code.

// impact

Clean DevEX, Clean UX.

Within a short pilot phase, Bosun engineers went in and integrated the Bosun platform to operate on-premises at an international enterprise on a huge monolithic codebase. They delivered a set of workflows that kickstarted a large scale frontend migration, meeting the challenge of modernizing a legacy codebase without disrupting ongoing development. The teams tasked with implementing new features can now quickly migrate their domains to the new modular architecture and instantly be more productive and deliver a more consistent, beautiful and intuitive user experience.

Reduced overhead
The Bosun platform empowered the platform team to initiate a migration without mobilising the entire engineering force.
Control and granularity
Bosun workflows allow the organization to pace the migration into easily managable and repeatable steps.
Quality and reliability
By splitting an software transformation up into workflow steps we could gradually improve quality and reliability.
Make frontend work
reviewable again.