Engineering Digital
Transformation with
Intelligence
We transform businesses through software innovation and intelligent systems. We enable digital transformation by combining deep engineering capabilities with a strong understanding of business, operational, and industry-specific realities.
Energy & Utilities
Modernising a mission-critical operations platform without disrupting 300 plant operators
AngularJS 1.6 → React 19 with TypeScript | Energy and Utilities
Compliant
Unsupported dependencies eliminated
~30%
Lower maintenance cost
1.4s
Page load (down from 3.2s)
At A Glance
Industry
Platform
Coverage
From
To
Scope
Energy & Utilities
management
Core Operator Workflows Modernized
AngularJS 1.6, Webpack 2, Karma, Grunt
React 19, TypeScript, Vite 5, Vitest
5 of 8 operator workflows migrated
TL;DR
An energy and utilities operator relied on a mission-critical plant operations dashboard serving 300+ operators. The platform provided real-time equipment monitoring, alarm management, shift handover coordination, and operational reporting. Built on AngularJS 1.6 (EOL December 2021), the application had become a compliance risk under PCI DSS 4.0.1, EU CRA, and DORA.
The core operator workflows were migrated to React 19 with TypeScript while both frameworks ran side by side in production. The build pipeline (Webpack 2, Grunt, Karma, JSHint) was modernised in parallel to Vite 5, Vitest, and ESLint. Page loads dropped from 3.2s to 1.4s. Bundle size fell 45%. Zero security vulnerabilities remained in the software inventory.
An energy and utilities operator relied on a mission-critical plant operations dashboard serving 300+ operators across multiple sites. The custom-built platform provided real-time equipment monitoring, alarm management, shift handover coordination, and operational reporting. It was the primary interface operators used to track equipment health, acknowledge alarms, coordinate between shifts, and generate production reports.
The application was built on AngularJS 1.6 with roughly 50,000 lines of untyped JavaScript, managing state through $scope and $rootScope broadcasts across 28 routes and 47 REST API endpoints, 6 of them real-time WebSocket feeds.
The build toolchain told its own story: Webpack 2.6, Grunt with 800 lines of custom configuration, Karma with Jasmine for a test suite that covered 3% of the codebase, and JSHint for linting. The entire infrastructure was a decade old. When the unsupported platform became a compliance risk, the organisation needed a modernisation strategy that would not disrupt plant operations.
AngularJS 1.x lost official support in December 2021. By 2025, the regulatory landscape had caught up: PCI DSS 4.0.1, the EU Cyber Resilience Act, and DORA all required software inventory disclosure and vulnerability remediation. An unsupported framework in the inventory was no longer technical debt. It was an audit finding that could block compliance certification.
The operations team also needed a mobile-ready version for field use, a capability the existing platform could not support. The status quo had run out of road.
The Problem
The engineering leadership needed to modernise a mission-critical operations platform without disrupting 300 operators or risking compliance certification. They faced a scope question that most migration estimates get wrong: replacing AngularJS with React is the visible part. The invisible part is everything that grew up around it: the build toolchain, the test infrastructure, the deployment pipeline, and the 40 cross-component event broadcasts that wired the application together through $rootScope.
A migration estimate that covers only the framework swap is missing 30 to 50 percent of the realistic scope. The build pipeline and test infrastructure are the invisible half.
Why this was hard
The dashboard showed live operational data to plant operators. Any disruption, even a momentary rendering glitch during a shift handover, could delay alarm response. Both the old and new frameworks had to run side by side in production, with each operator capability cutting over independently, validated against a known-good baseline before going live.
The hardest single component was a 1,200-line real-time alarm table with custom row rendering, inline acknowledgement buttons, and virtual scrolling. No automated conversion tool could handle it. It required manual engineering to rewrite using modern table and virtualisation libraries.
The Solution Approach
A quality baseline came first: 142 visual snapshots captured via Playwright across every screen state, every API response recorded, and both old and new versions run side by side against live WebSocket feeds for 72 hours to validate rendering parity.
The migration was organised around operator capabilities rather than code modules:
Each capability was migrated to React 19 with TypeScript, validated against the quality baseline, and cut over independently in production. Both frameworks coexisted through module federation, with a custom bridge service replacing the 40 legacy event broadcasts one capability at a time.
The build pipeline modernised in parallel with the framework: Webpack 2 to Vite 5, Karma to Vitest, JSHint to ESLint with TypeScript-aware rules. This is the work that most migration estimates miss, and it accounts for nearly half the maintenance cost reduction.
Outcomes Achieved
Compliance risk eliminated
- Eliminated unsupported software dependencies and cleared a key compliance obstacle for PCI DSS 4.0.1 and EU Cyber Resilience Act requirements.
Maintenance effort reduced
- Maintenance cost fell by approximately 30%, with frontend modernisation and build pipeline improvements accounting for nearly half of the reduction.
Improved performance and user experience
- Improved application responsiveness by reducing frontend footprint by 45% (620 KB to 340 KB) and reducing page load times from 3.2 seconds to 1.4 seconds.
Mobile-ready operations platform
- Delivered a mobile-ready operator experience, enabling field personnel to access operational information within 60 days of go-live.
Modernised engineering platform
- Modernised the engineering platform around React and TypeScript, establishing a repeatable migration pattern and a modern developer experience for the team going forward.
Frequently Asked Questions
What is the realistic scope of a legacy frontend migration beyond the framework swap?
A migration estimate that covers only the framework swap is missing 30 to 50 percent of the realistic scope. The build pipeline (task runners, bundlers, test frameworks, linters) and the test infrastructure (visual regression, contract tests, performance budgets) account for roughly half the ongoing maintenance burden. Migrations that scope only the framework typically need a second engagement within 24 months to address the pipeline.
How does the quality baseline prevent regressions during a side-by-side migration?
The quality baseline captures the current system behaviour before any migration code is written: visual snapshots of every screen state, API response recordings, and real-time data rendering comparisons between old and new versions. Each operator capability is validated against this baseline before it goes live. Any deviation from the known-good state is caught before it reaches production.
Can a legacy frontend migration add mobile support alongside the framework change?
Yes, but the mobile capability should be planned alongside the migration, not added afterwards. When the framework changes from AngularJS to React with TypeScript, the responsive layout work is a natural extension of the component rewrite. Adding mobile after the migration is complete means touching every component a second time.
At A Glance
Industry
Platform
Coverage
From
To
Scope
Energy & Utilities
management
Core Operator Workflows Modernized
AngularJS 1.6, Webpack 2, Karma, Grunt
React 19, TypeScript, Vite 5, Vitest
5 of 8 operator workflows migrated