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.

Practice

1.

What is the main purpose of using a Facade Service in Angular?

easy

A. To directly manipulate the DOM from services

B. To replace Angular modules with a single service

C. To simplify component code by hiding complex service logic behind simple methods

D. To create multiple instances of services for each component

Solution

1. Step 1: Understand the role of Facade Service

   A Facade Service acts as a simple interface hiding complex logic from components.

2. Step 2: Identify the benefit in Angular components

   This pattern keeps components clean and easier to maintain by centralizing service calls.

3. Final Answer:

   To simplify component code by hiding complex service logic behind simple methods -> Option C

4. Quick Check:

   Facade Service purpose = Simplify logic [OK]

Hint: Facade hides complexity behind simple methods [OK]

Common Mistakes:

• Thinking Facade replaces Angular modules
• Believing Facade manipulates DOM directly
• Assuming Facade creates multiple service instances

2.

Which of the following is the correct way to inject a facade service MyFacadeService into an Angular component constructor?

easy

A. constructor(private myFacadeService: MyFacadeService) {}

B. constructor(public MyFacadeService) {}

C. constructor(myFacadeService: new MyFacadeService()) {}

D. constructor(private myFacadeService = MyFacadeService) {}

Solution

1. Step 1: Recall Angular dependency injection syntax

   Angular injects services via constructor parameters with access modifiers and type annotations.

2. Step 2: Match correct syntax

   constructor(private myFacadeService: MyFacadeService) {} uses private and type MyFacadeService, which is correct.

3. Final Answer:

   constructor(private myFacadeService: MyFacadeService) {} -> Option A

4. Quick Check:

   Inject service with private + type [OK]

Hint: Use private and type in constructor for injection [OK]

Common Mistakes:

• Omitting access modifier (private/public)
• Using new keyword inside constructor parameters
• Assigning service without type annotation

3.

Given this facade service method:

getUserName(): Observable<string> {
  return this.userService.getUser().pipe(
    map(user => user.name)
  );
}

What will the component receive when subscribing to getUserName()?

medium

A. A synchronous string value of the user's name

B. An observable emitting the entire user object

C. A promise resolving to the user's name

D. An observable emitting the user's name as a string

Solution

1. Step 1: Analyze the facade method return type

   The method returns an Observable<string> by mapping the user object to user.name.

2. Step 2: Understand what subscribing receives

   Subscribing to this Observable emits the user's name string asynchronously.

3. Final Answer:

   An observable emitting the user's name as a string -> Option D

4. Quick Check:

   Facade returns Observable of user name [OK]

Hint: Facade returns Observable mapped to user name [OK]

Common Mistakes:

• Confusing Observable with Promise
• Expecting synchronous value instead of Observable
• Assuming entire user object is emitted

4.

Identify the error in this facade service method:

fetchData() {
  this.apiService.getData().subscribe(data => {
    this.data = data;
  });
  return this.data;
}

medium

A. Using arrow function inside subscribe is invalid syntax

B. Returns data before subscription completes, causing undefined result

C. Subscription should be inside component, not service

D. Missing return type annotation causes compile error

Solution

1. Step 1: Understand asynchronous subscription

   The subscribe callback runs later, so this.data is not set immediately.

2. Step 2: Identify return timing issue

   The method returns this.data immediately, likely undefined before data arrives.

3. Final Answer:

   Returns data before subscription completes, causing undefined result -> Option B

4. Quick Check:

   Async subscribe returns undefined early [OK]

Hint: Return inside subscribe or use Observable return [OK]

Common Mistakes:

• Returning data before async call finishes
• Thinking arrow functions are invalid in subscribe
• Believing subscription must be in component only

5.

You want to create a facade service that combines data from UserService and SettingsService and exposes a single observable userSettings$. Which approach correctly implements this?

class UserSettingsFacade {
  userSettings$: Observable<UserSettings>;

  constructor(private userService: UserService, private settingsService: SettingsService) {
    // Fill in here
  }
}

hard

A. this.userSettings$ = combineLatest([this.userService.getUser(), this.settingsService.getSettings()]).pipe(map(([user, settings]) => ({ user, settings })));

B. this.userSettings$ = this.userService.getUser().pipe(map(user => this.settingsService.getSettings()));

C. this.userSettings$ = this.userService.getUser() + this.settingsService.getSettings();

D. this.userSettings$ = forkJoin(this.userService.getUser(), this.settingsService.getSettings());

Solution

1. Step 1: Combine multiple observables correctly

   Use combineLatest to emit latest values from both observables together.

2. Step 2: Map combined values into single object

   Use map operator to create an object with user and settings properties.

3. Final Answer:

   this.userSettings$ = combineLatest([this.userService.getUser(), this.settingsService.getSettings()]).pipe(map(([user, settings]) => ({ user, settings }))); -> Option A

4. Quick Check:

   Use combineLatest + map to merge observables [OK]

Hint: Use combineLatest and map to merge observables [OK]

Common Mistakes:

• Using + operator to add observables
• Mapping one observable to another observable instead of values
• Using forkJoin which waits for all to complete once