Micro Frontend Migration(Angular to React) Proposal

1. Overview

This document proposes migrating Zeppelin’s front-end architecture from a single Angular-based monolithic application (zeppelin-web-angular) to a Micro Frontend Architecture (MFA).
The migration will start with an Angular upgrade (v9 → v12) to enable Webpack 5, followed by a pilot micro frontend for the Published Note feature.
The ultimate goal is to support modular development, and incremental migration(Published Note Result → Paragraph → Notebook → TBD) to React.

2. Motivation

2-1. Current State

Currently, zeppelin-web-angular is implemented as a single Angular 9 application bundled with Webpack 4.

While this setup simplifies initial development, it has significant limitations:

• Difficult upgrade path — Angular 9’s dependency on Webpack 4 prevents use of Module Federation.

• Inflexibility in adopting React — migration blocked at the framework level.

2-2. Motivation for Change

Migrating to a Micro Frontend Architecture will:

• Enable progressive React adoption without a full rewrite

• Improve build performance and release velocity

• Reduce technical debt and circular dependencies

3. Current Architecture Analysis

3-1. Monolithic Angular Structure

• Angular 9 + Webpack 4

• Shared global state and routing

• Centralized dependency injection context

• Feature modules are tightly coupled and directly import each other

3-2. Identified Pain Points

4. Proposed Architecture

4-1. High-Level Design

The new architecture adopts Webpack Module Federation for runtime composition.
Each major Zeppelin feature becomes a standalone Micro Frontend (MFE), loaded dynamically by a Core Shell host.

4-2. Technology Stack

4-3. Module Federation Example

Remote (Published UI)

new ModuleFederationPlugin({ name: 'published', filename: 'remoteEntry.js', exposes: { './PublishedApp': './src/PublishedApp.tsx', }, shared: ['react', 'react-dom'], });

5. Phased Implementation Plan

Phase 1 — Angular 12 Upgrade & Webpack 5 Migration

Objective: Enable Webpack 5 to support Module Federation and modern build tooling.

Steps:

1. Upgrade @angular/core, @angular/cli, and dependencies to v12.

2. Update build pipeline to use Webpack 5 (required for federation).

3. Validate backward compatibility of existing Angular modules.

4. Ensure all existing E2E and integration tests (./mvnw verify) pass.

5. Prepare core-shell to act as a Module Federation host.

Phase 1.5 — Pilot Migration: Published UI

Rationale:
The Published Note module (/#/notebook/{id}/public) is read-only, isolated, and minimally coupled.
It’s the safest area to validate Micro Frontend architecture with minimal user impact.

Scope:

Steps:

1. Create published-ui package exposing PublishedApp via Module Federation.

2. Integrate remote entry into core-shell (Angular 12 host).

3. Add feature flag mfePublishedEnabled to toggle MFE usage.

4. Validate rendering, routing, and performance.

5. Deploy incrementally, keeping Angular fallback during the pilot.

Phase 2 — Notebook & Interpreter Modules

After successful validation of the pilot:

• Extract notebook-ui into independent MFEs.

• Maintain shared state and events through a lightweight EventBus.

• Begin migration of internal logic from Angular components to React progressively.

Phase 3 — Credential, System, and Home Modules

• Convert remaining Angular modules using the same MFE pattern.

• Optimize build pipelines for incremental MFE builds.

Phase 4 — Cleanup and Optimization

• Remove deprecated Angular modules.

• Simplify CI/CD and test infrastructure for modular builds.

• Drop mfePublishedEnabled and related feature flags once migration stabilizes.

6. Verification Plan

1. Build Verification:
   Ensure all MFEs build independently and integrate successfully into the host shell.

2. Functional Verification:
   Validate all E2E tests pass and user flows remain intact.

3. Performance Validation:
   Measure build times, bundle sizes, and load times before/after migration.

4. Rollout Control:
   Gradual activation of MFEs via feature flags to ensure safe rollout.

7. Long-Term Vision

• Each Zeppelin UI module becomes independently deployable.

• Gradual migration from Angular to React without breaking compatibility.

• Reduced build times, lower coupling, and improved scalability.

8. Summary

This plan introduces a two-step foundation for the Zeppelin Web modernization:

1. Upgrade to Angular 12 (Webpack 5) — enabling Module Federation.

2. Pilot Micro Frontend (Published UI) — safely validating the new architecture.

After the pilot, subsequent modules can be incrementally migrated, leading Zeppelin to a fully modular and framework-flexible front-end ecosystem.