Frontend Transformation Strategy

Migration approach, bridging architecture, and sequencing.

Frontend Transformation Strategy

From Angular Legacy to GlossUI-Driven Experience

We operate a mature B2B wholesale platform with ~392 Angular 14 components and 12,919 UI element instances. This strategy delivers visible improvements to users in weeks by strategically replacing Angular UI surfaces with GlossUI React components.

Key principles:

  • UX drives timing. We migrate the screens users struggle with most — first.
  • No Frankenstein. Users must never feel like they are switching between two applications.
  • GlossUI is the sole design language. Every new surface uses GlossUI.
  • Ship continuously. Each migration slice is an independent, reversible deployment.

UX Rules of Engagement

These rules govern every technical decision during the hybrid phase. If a technical approach violates any rule, it is rejected.

If a technical approach violates any rule, it is rejected

Click any rule to see its violation test

Migration Slices

Rather than migrating views by technical complexity, we target the highest user-pain, highest-value journeys first.

PrimeNGGlossUIinstances
p-table→UI.DataTable310
p-dropdown→UI.Select518
pInputText→UI.Input1,239
pButton→UI.Button1,435
p-dialog→UI.Dialog388
p-checkbox→UI.Checkbox283
Migration sequence
Replace order line-item table first (highest interaction density) → replace dropdowns and inputs in order form → replace finalization summary → keep Angular routing and services, only replace UI leaf nodes.

Click any slice to expand component swap details

Architecture Evolution

The migration follows a Strangler Fig pattern: new React surfaces wrap and gradually replace legacy Angular views until the legacy shell can be retired entirely.

Current
Iframe bridge
Navigation
Angular topbar + sidebar
Content
Angular routes (55 views)
iframe → React dashboard
Communication
postMessage (JWT + CSRF)
×Visible UX seam
Hybrid
Strangler fig
Navigation
React shell (GlossUI)
Content
Angular routes (shrinking)
GlossReactHost components
React routes (growing)
Communication
State bridge (in-process)
—Softened boundary
Target
Full GlossUI
Navigation
React shell (GlossUI)
Content
All routes → React/GlossUI
Communication
Native React state
✓No framework boundary

Zero Angular templates served to users

The navigation shell replaces two separate navigation systems (Angular topbar + sidebar, React dashboard nav) with a single React-rendered shell while Angular continues to own the content area routing.

React shell (GlossUI)
TopbarSearchCompany switcherProfile
Sidebar
UI.Menu

Route config maps each path to Angular or React router

Angular content
Existing routes
/orders/*/retailers/*/billing/*
(shrinking)
React content
Migrated routes
/dashboard/*/reports/*/settings/*
(growing)

Angular routing unchanged — only the visual shell moves to React

Component Replacement Strategy

Each PrimeNG component is replaced by its GlossUI equivalent in place, following the Strangler Fig pattern. Each phase is individually reversible.

The full component-by-component mapping and readiness status is tracked in the Component Audit.

Angular / PrimeNG
GlossUI via bridge
Full React page
A
Legacy
PrimeNG renders in Angular template

Status quo. All UI is Angular + PrimeNG. No React involvement in this view.

Angular route
PrimeNG table
PrimeNG form
B
Swap
GlossReactHost renders GlossUI equivalent

Same data, same events. GlossUI component replaces PrimeNG in-place via the bridge wrapper. Angular still owns the route.

Angular route
UI.DataTable
PrimeNG form
↺ Reversible — one template line to restore PrimeNG
C
Replace
Full React page replaces Angular route

All components in this view are now GlossUI. The route moves from Angular router to React router.

React route
UI.DataTable
GlossUI form
↺ Reversible — route config toggles framework
D
Remove
Angular route deleted

Legacy code removed. This view is pure React/GlossUI. Repeat for every route.

React route
UI.DataTable
GlossUI form
✓ Final — legacy code removed

Phase Sequencing & Dependencies

Three parallel tracks converge at Shell Deployment before migration slice execution begins. The Angular upgrade runs as a parallel infrastructure track, not on the critical path.

Critical path
Dependency
Parallel track
Critical path
Bridge → Shell → Slice 1
Total estimated
8–13 weeks to Slice 1
Angular upgrade
Parallel, not blocking

Risk Register

RiskSeverityLikelihoodPhaseMitigation
GlossReactHost bridge has Zone.js interference
Zone.js patches async APIs globally. React components inside Angular may trigger unexpected change detection cycles, causing performance degradation or infinite loops.
Highbridge-pocPOC validates isolation patterns first. Fallback: Custom Elements approach.
MUI bundle cost makes Angular app too heavy
Adding React + GlossUI dependencies to the existing Angular bundle may push initial load times past acceptable thresholds.
Mediumslice-1Tree-shake aggressively. Load MUI chunks lazily per route. Monitor bundle size per slice.
State bridge introduces race conditions
Bidirectional state synchronization between Angular services and React state can produce timing-dependent bugs that are hard to reproduce.
Highbridge-pocUnidirectional data flow (Angular to React props). React never mutates Angular state directly.
Navigation shell breaks Angular routing
A React-rendered navigation shell may conflict with Angular Router, breaking deep links and back-button behavior.
Highnav-shellAngular router untouched — shell only controls the visual chrome. Content area routing unchanged.
Visual softening CSS breaks PrimeNG components
Global CSS token overrides intended to harmonize the visual theme may interfere with PrimeNG component internals.
Mediumvisual-softeningScoped token overrides only. No !important. Visual QA pass on all 55 views.
Team capacity — building GlossUI while migrating
The team must simultaneously build new GlossUI components and migrate existing Angular views, creating competing priorities.
High--Prioritize migration-blocking components only. Defer catalog completion.
3% test coverage means regressions go unnoticed
Extremely low test coverage in the Angular codebase means migration changes can break existing functionality without any automated signal.
High--Add E2E tests for critical paths (order flow, auth, entity CRUD) before migration slices ship.
PrimeNG overlay z-index conflicts with GlossUI portals
PrimeNG overlays (dropdowns, dialogs, tooltips) and GlossUI portals may fight for z-index supremacy, causing visual layering bugs.
Mediumslice-1GlossUI portals render to document.body at z-index 9000+. PrimeNG overlays stay below.