Facade service pattern in Angular - Performance & Optimization

Performance: Facade service pattern

MEDIUM IMPACT

This pattern affects the interaction complexity between components and services, impacting rendering speed and responsiveness by reducing redundant data fetching and change detection triggers.

Managing shared state and logic between multiple Angular components

Angular

export class FacadeService {
  private data$ = new BehaviorSubject<Data | null>(null);
  constructor(private http: HttpClient) {
    this.loadData();
  }
  private loadData() {
    this.http.get<Data>('/api/data').subscribe(data => this.data$.next(data));
  }
  getData() {
    return this.data$.asObservable();
  }
}

export class ComponentA {
  data$ = this.facade.getData();
  constructor(private facade: FacadeService) {}
}

export class ComponentB {
  data$ = this.facade.getData();
  constructor(private facade: FacadeService) {}
}

Facade centralizes data fetching and state, so HTTP request happens once and components share the same observable, reducing redundant updates.

📈 Performance GainSingle HTTP request and fewer change detection cycles, improving INP and reducing reflows.

Managing shared state and logic between multiple Angular components

Angular

export class ComponentA {
  constructor(private service: DataService) {}
  ngOnInit() {
    this.service.getData().subscribe(data => { /* update UI */ });
  }
}

export class ComponentB {
  constructor(private service: DataService) {}
  ngOnInit() {
    this.service.getData().subscribe(data => { /* update UI */ });
  }
}

@Injectable({providedIn: 'root'})
export class DataService {
  constructor(private http: HttpClient) {}
  getData() { return this.http.get('/api/data'); }
}

Each component independently calls the service, causing multiple HTTP requests and duplicated change detection cycles.

📉 Performance CostTriggers multiple HTTP requests and redundant reflows per component, increasing INP and blocking rendering.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple components call service independently	Multiple subscriptions causing repeated DOM updates	Multiple reflows triggered per component update	Higher paint cost due to frequent UI changes	[X] Bad
Facade service shares single data stream	Single subscription source with shared updates	Single reflow triggered for shared data update	Lower paint cost with batched UI updates	[OK] Good

Rendering Pipeline

Facade service centralizes data fetching and state management, reducing the number of HTTP requests and change detection triggers in components. This lowers the frequency of layout recalculations and paints caused by multiple independent updates.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout and Paint due to multiple component updates from independent service calls

Core Web Vital Affected

INP

This pattern affects the interaction complexity between components and services, impacting rendering speed and responsiveness by reducing redundant data fetching and change detection triggers.

Optimization Tips

1Centralize shared data fetching in a facade service to avoid duplicate HTTP calls.

2Use observables in the facade to share data streams with multiple components.

3Reducing redundant change detection cycles improves interaction responsiveness (INP).

Performance Quiz - 3 Questions

How does using a facade service pattern improve Angular app performance?

A It delays data fetching until user interaction.

B It increases the number of DOM nodes for better rendering.

C It reduces redundant HTTP requests and change detection cycles.

D It forces components to reload on every change.

DevTools: Performance

How to check: Record a performance profile while interacting with components. Look for multiple HTTP requests and repeated layout or paint events triggered by independent service calls.

What to look for: Fewer HTTP requests and reduced layout/paint events indicate good facade usage improving INP.