Facade design pattern jest jednym z tych wzorców, które są tak popularne i powszechnie używane, że nie zdajemy sobie sprawy iż może być to wzorzec projektowy. Nazwa tego wzorca wywodzi się z architektury. Facade, czyli po polsku fasada, oznacza frontową część budynku. Jest ona zazwyczaj bardzo reprezentatywna i znajdują się w niej drzwi przez które wejdziemy do środka. Patrząc na fasadę nie zastanawiamy się jeszcze co dokładnie może znajdować się w środku. Interesuje nas głównie to, czy łatwo będzie tam się dostać.
Dokładnie taką samą rolę odgrywa fasada w programowaniu… no prawie taką samą.
Czym jest fasada?
Fasada w programowaniu jest uproszczonym interfejsem do bardziej założonego, czasami wielowarstwowego systemu (bądź wielu systemów). Interfejs ten ma być prosty w zrozumieniu oraz w użyciu. Ma być tą reprezentatywną częścią naszego systemu / programu / biblioteki / itp.
Odbiegając jeszcze na chwilę od programowania (chodź zostając w świecie IT), fasadą komputera PC (oczywiście mówimy tutaj w bardzo dużym uproszczeniu) może być jego obudowa. Czy wiemy jak włączyć / wyłączyć komputer za pomocą przycisku na obudowie – pewnie że tak. Ale czy wiemy co dokładnie się dzieje po naciśnięciu tego przycisku – to już jest przed nami ukryte za fasadą. Na pewno dzieje się znacznie więcej niż tylko podłączenie / odłączenie zasilania.
Wracając już do ekosystem front end-owego, niemalże każdy zna i pewnie korzystał z biblioteki implementującej wzorzec fasady – jQuery.
Korzystanie z jQuery jest bardzo proste. Składnia jest czytelna i dość intuicyjna. Zmianę tekstu na przycisku możemy zrealizować za pomocą jednej linijki:
$( "button.continue" ).html( "Next Step..." ) // from jQuery docs
Logika schowana za tym selektorem jest dość złożona, wliczając w to np. jeszcze sprawdzanie wersji przeglądarki, itp. Natomiast interfejs który dostajemy do użytkowania może sugerować, iż jest to trywialna czynność.
Przykład
Wszystko to bardzo ładnie brzmi w teorii, ale napiszmy w takim razie naszą własną fasadę. Skorzystamy z klasyku – aplikacja ToDo. Stworzymy serwis za pomocą którego będziemy mogli stworzyć zadanie oraz oznaczyć je jako ukończone.
// Serwis służący do stworzenia i zarządzania zadaniami class TaskService { // konstruktor służący do stworzenia nowego zadania constructor(data) { this.name = data.name; this.priority = data.priority; this.project = data.project; this.user = data.user; this.completed = data.completed; } complete() { // logika sprawdzająca np. czy użytkownik może // oznaczyć task jako zakończony this.completed = true; console.log(`Kończenie zadania: "${this.name}"`); } setCompleteDate() { // zapiszmy czas zakończenia zadania. // Taka informacja zawsze jest przydatna this.completedDate = new Date(); console.log(`"${this.name}" zakończony dnia ${this.completedDate}`); } save() { // Zapiszmy w naszej bazie danych informacje o zakończeniu zadania // wymagane będzie obsłużenie akcji asynchronicznych // oraz potencjalnych błędów console.log(`Aktualizacja zadania: "${this.name}"`); } notifyCompletion() { // pokażmy na ekranie użytkownika (UI) informację o tym, // że task został zapisany, // bądź poinformujmy o ewentualnych błędach console.log( `${this.user} został powiadomiony o zakończeniu zadania "${this.name}"` ); } } // Fasada naszego serwisu - udostępniamy jedną metodę // za pomocą której obsłużymy wszystkie podzadania związane // z ukończeniem taska class TaskServiceFacade extends TaskService { completeAndNotify() { // cała logika związana z ukończeniem zadania this.complete(); this.setCompleteDate(); this.save(); this.notifyCompletion(); } } // Korzystamy z fasady - stworzenie zadania let mytask = new TaskServiceFacade({ name: "Sprawdzić nowe posty na frontstack.pl", priority: 1, project: "Edukacja", user: "Wojtek", completed: false }); // Ukończmy zadanie - callback, który może być uruchomiony np. // podczas "onClick" na przycisku "Zakończ" znajdującym się obok zadania console.log(mytask.completeAndNotify()); /** Konsola: **/ // Kończenie zadania: "Sprawdzić nowe posty na frontstack.pl" // "Sprawdzić nowe posty na frontstack.pl" zakończony dnia Thu Apr 23 2020 20:46:26 GMT+0200 (czas środkowoeuropejski letni) // Aktualizacja zadania: "Sprawdzić nowe posty na frontstack.pl" // Wojtek został powiadomiony o zakończeniu zadania "Sprawdzić nowe posty na frontstack.pl"
Mam nadzieję, że komentarze umieszczone w kodzie będą wystarczające, aby w pełni zrozumieć ten prosty przykład obrazujący jak Facade design pattern może być przez nas samodzielnie zaimplementowany.