21 paź 2024
3 min

Wzorzec Fasady w Angularze

Czym jest Fasada (wzorzec projektowy)?

Wzorzec fasady (ang. Facade Pattern) to strukturalny wzorzec projektowy, który zapewnia uproszczony interfejs do złożonego systemu lub zestawu podsystemów. Dostarczając jeden punkt wejścia, fasada ukrywa skomplikowane szczegóły dotyczące komponentów lub podsystemów, prezentując klientowi prosty interfejs do wykorzystania. Fasada nie enkapsuluje funkcjonalności, lecz deleguje zadania do odpowiednich klas, dzięki czemu klienci nie muszą zmagać się z niepotrzebną złożonością.

Kiedy i dlaczego warto używać fasady?

Wzorzec Fasady jest szczególnie przydatny w sytuacjach, gdzie kluczowe znaczenie ma zarządzanie złożonością i promowanie czystej architektury. Poniżej przedstawiono kilka sytuacji, w których wzorzec Fasady może być bardzo korzystny:

  • Uproszczenie złożonych podsystemów: Użyj fasady, gdy Twoja aplikacja zawiera wiele złożonych podsystemów. Fasada ukrywa zawiłości, zapewniając prosty interfejs, co ułatwia korzystanie i zrozumienie kodu od strony klienta.
  • Redukcja zależności: Jeśli komponenty są mocno powiązane z wieloma usługami, fasada może rozdzielić te zależności, czyniąc kod bardziej elastycznym i łatwiejszym do utrzymania.
  • Poprawa organizacji kodu: W dużych projektach fasada centralizuje interakcje z podsystemami w spójny interfejs, co zwiększa czytelność i łatwość utrzymania.
  • Polepszenie testowalności: Fasady upraszczają testowanie, pozwalając na mockowanie jednej fasady zamiast wielu usług, co sprawia, że testy są bardziej niezawodne i mniej skomplikowane.
  • Enkapsulacja problemów na styku różnych obszarów: Użyj fasady do zarządzania problemami takimi jak logowanie lub uwierzytelnianie w jednym miejscu, zapewniając spójne zastosowanie w różnych podsystemach.
  • Zapewnienie stabilnego API: Jeśli podsystemy zmieniają się w czasie, fasada oferuje stabilny interfejs dla klientów, chroniąc ich przed zmianami wewnętrznymi.

Podsumowując, warto używać wzorca fasady do uproszczenia złożonych interakcji, zmniejszenia powiązań oraz poprawy testowalności kodu.

Fasada w Angularze

W Angularze wdrożenie wzorca fasady polega na stworzeniu serwisu (fasady), który współpracuje z różnymi innymi serwisami lub logiką zarządzania stanem (ang. state management). Serwis fasady działa jako jedyny punkt kontaktowy dla komponentów, zapewniając czysty i prosty interfejs API, który ukrywa złożoności wewnętrznego systemu.

W poniższym przykładzie, serwis CartFacade abstrahuje złożoności interakcji z NgRx store. Udostępnia metody takie jak addProductToCart, które ukrywa szczegóły wysyłania akcji do store i zarządzania stanem.

@Injectable({ providedIn: 'root' })
export class CartFacade {
  private readonly store = inject(Store);

  addProductToCart(productId: string, quantity?: number): void {
    const action = cartActions.addProductToCart({
      payload: {
        productId,
        quantity: quantity || 1,
      },
    });
    this.store.dispatch(action);
  }
}

Komponenty, z poziomu których dodajemy przedmioty do koszyka, mogą to robić bez wiedzy o istnieniu NgRx Store i potrzeby bezpośredniego wysyłania akcji. To oddzielenie zadań zapewnia, że komponenty nie tylko są prostsze i bardziej skoncentrowane na swoich głównych zadaniach, ale także łatwiejsze w utrzymaniu i mniej podatne na błędy związane z bezpośrednimi operacjami zarządzania stanem. Korzystając z fasady, szczegóły zarządzania stanem są ukryte, co pozwala pracować z czystszym i bardziej przejrzystym API, które nie ujawnia złożoności leżącej u podstaw architektury NgRx. Takie podejście znacząco zwiększa skalowalność i możliwości utrzymania aplikacji, przestrzegając zasad dobrej architektury oprogramowania poprzez izolowanie logiki biznesowej od komponentów UI.

Podsumowanie:

Wzorzec fasady jest cennym narzędziem w rozwoju Angularowych aplikacji, pomagającym zarządzać złożonością poprzez dostarczenie prostego, jednolitego interfejsu do podsystemu lub zestawu serwisów. Poprzez enkapsulację logiki biznesowej, interakcji z serwisami oraz zarządzania stanem w fasadzie, deweloperzy mogą znacząco zredukować złożoność w komponentach, poprawić utrzymanie kodu oraz zwiększyć testowalność. W dużych Angularowych aplikacjach, gdzie komponenty często współpracują z wieloma serwisami lub zarządzają skomplikowanym stanem, zastosowanie wzorca fasady może prowadzić do bardziej zorganizowanego, skalowalnego i łatwego w utrzymaniu kodu. Jest to wzorzec projektowy, który nie tylko poprawia doświadczenia deweloperów, ale również przyczynia się do budowy solidnych, czystych i wydajnych Angularowych aplikacji.

Najczęściej zadawane pytania

Jak zaimplementować wzorzec fasady w Angularze?

Stwórz serwis oznaczony @Injectable({ providedIn: 'root' }), który wstrzykuje Store przez inject(Store) i udostępnia metody domenowe, np. addProductToCart. Metoda buduje akcję i wysyła ją przez store.dispatch(). Komponenty wstrzykują wtedy fasadę zamiast Store, dzięki czemu nie znają szczegółów NgRx ani struktury akcji.

Kiedy warto użyć wzorca fasady w dużym projekcie Angular?

Warto ją użyć, gdy aplikacja zawiera wiele złożonych podsystemów, komponenty są mocno powiązane z wieloma usługami albo potrzebujesz scentralizowanej obsługi zagadnień, np. logowania lub uwierzytelniania. Fasada daje też stabilne API, które chroni klientów przed zmianami wewnętrznymi, gdy podsystemy ewoluują w czasie.

Jak przetestować komponent korzystający z fasady w Angularze?

Komponent zależy wtedy od jednej fasady zamiast od wielu serwisów, więc w testach mockujesz tylko fasadę. Nie musisz konfigurować każdej usługi osobno ani znać szczegółów wysyłania akcji do store. Dzięki temu testy są prostsze, mniej skomplikowane i bardziej niezawodne.

Czy fasada w Angularze zastępuje NgRx Store?

Nie, fasada nie zastępuje NgRx Store, lecz działa jako warstwa nad nim. Komponenty komunikują się z CartFacade, a ta wysyła akcje do store i ukrywa szczegóły zarządzania stanem. Store nadal odpowiada za stan aplikacji, a fasada upraszcza sposób korzystania z niego.

Jak wzorzec fasady zmniejsza zależności między komponentami a serwisami?

Fasada rozdziela zależności między komponentami a usługami, dzięki czemu kod jest bardziej elastyczny i łatwiejszy w utrzymaniu. Komponent wywołuje jedną metodę fasady zamiast koordynować kilka serwisów. Zmiany wewnątrz podsystemów nie wymuszają wtedy zmian w komponentach UI.

Podziel się artykułem

Zapisz się na nasz newsletter

Dołącz do community Angular.love i bądź na bieżąco z trendami.