Strona główna / Artykuły / Wzorzec state machine dla front-end developera

Wzorzec state machine dla front-end developera

Maszyny stanu to wynalazek sprzed kilkunastu lat, który przeżywa swoją drugą młodość na front-endzie. Jak zastosować go w praktyce?

Marcin Czarkowski

2021-07-12

Zarządzanie stanem i jego transformacje to najtrudniejszy element utrzymywania złożonych aplikacji front-endowych. O ile w przypadku prostych założeń wystarczające będą flagi takie jak "isModified" czy "isLoading", o tyle w przypadku bardziej złożonych projektów taka organizacja kodu nie wystarczy.

Mówiąc o stanie aplikacji front-endowej najczęściej zajmujemy się jego snapshotami, czyli migawkami z danego etapu życia aplikacji. Nasz komponent zazwyczaj bywa w stanie "ładowania", "błędu" lub "gotowości" i wszystkie te przypadki jesteśmy w stanie dość łatwo zdefiniować. Problem pojawia się jednak w momencie kiedy liczba wszystkich wariacji zaczyna drastycznie rosnąć, a do tego część przypadków wzajemnie się wyklucza, tak jak wyklucza się stan przedmiotów z życia codziennego.

Wyobraźmy sobie zamodelowanie stanu samochodu, który najpierw musi zostać uruchomiony, zanim zaczniemy nim jechać. Nie można go też zgasić, jeśli wcześniej bezczynnie stał na parkingu. Nie możemy włączyć kierunkowskazów dopóki nie przekręcimy kluczyka powodując przepływ prądu pomiędzy poszczególnymi komponentami.

Jak możesz się domyślać, modelowanie złożonej logiki biznesowej to problem wymagający wejścia na kolejny poziom. Tylko jak to zrobić?

W dzisiejszym odcinku na kanale Przeprogramowani mamy dla ciebie odpowiedź - prezentujemy ci alternatywę do prostych flag typu boolean, którą jest wzorzec maszyny stanu. Jest to wzorzec który powstał na długo przed popularnymi frameworkami front-endowymi, jednak aktualnie przeżywa drugą młodość, a my postanowiliśmy przyjrzeć mu się z bliska.

Zapraszamy na film!