Scaling UI Architecture in Plataforma-Visioner7

The Problem

As our frontend footprint in the Plataforma-Visioner7 project expanded, we encountered the classic "spaghetti state" dilemma. Our component interactions were becoming tightly coupled, making it increasingly difficult to track data flows and manage side effects in our Angular templates and service layers.

The Approach

To regain control, we initiated a refactoring effort focused on decoupling our UI components from the underlying business services by strictly adhering to Domain-Driven Design (DDD) principles and leveraging the Observer pattern.

Phase 1: Decoupling with Observables

Instead of direct service method calls, we shifted to reactive data streams. This allowed our components to stay agnostic of the implementation details of our data providers.

// Generic service using the Observer pattern
export class DataService {
  private stateSource = new BehaviorSubject<AppState>(initialState);
  public state$ = this.stateSource.asObservable();

  updateData(newData: Partial<AppState>) {
    this.stateSource.next({ ...this.stateSource.value, ...newData });
  }
}

Phase 2: Domain-Driven UI Structure

We organized our TypeScript files and HTML components into bounded contexts. This approach ensures that a change in the user-profile module doesn't accidentally trigger side effects in the dashboard display logic.

Phase 3: Style Encapsulation

To ensure consistency while maintaining the new architecture, we leveraged CSS View Encapsulation. By scoping styles directly to the component, we eliminated the risk of global style leakage:

/* scoped styles in component.css */
:host {
  display: block;
  padding: 1rem;
  border: 1px solid var(--border-color);
}

Final Numbers

Key Insight

By treating the UI as a series of independent observers consuming domain streams, we turned a fragile codebase into a modular system. If you feel like your components know too much about your services, start by moving state management into a shared observable stream.

Generated with Gitvlg.com