Z artykułu dowiesz się:
- Co to jest Storybook
- Jakie są korzyści z korzystania ze Storybooka
- Kto wykorzystuje Storybooka w codziennej pracy
- Jak stworzyć swoje pierwsze story
- Co zyskujemy, integrując Storybook z Chromatic
Co to jest Storybook?
Zacznijmy od początku. Storybook jest bezpłatnym narzędziem służącym do rozwijania komponentów w pełnej izolacji, a więc niezależnie od pozostałych i całej aplikacji. Poszczególne części aplikacji są budowane, testowane i dokumentowane bez żadnej ingerencji w resztę kodu, tak, jakby nie były z nimi w żaden sposób powiązane. Znajdują się w jednej szufladzie, egzystują razem, ale każdy z nich można w dowolnym momencie wyjąć i zrobić z nim, co się tylko chce. To ważna zaleta takiego podejścia, ponieważ dzięki temu można skoncentrować się na pojedynczych elementach, tworząc dla nich oddzielne scenariusze użycia. W ten sposób powstaje „instrukcja”, jak taki dany komponent ma się zachowywać w konkretnych sytuacjach. Poza tym nie ma potrzeby uruchamiania całej aplikacji w momencie pracy nad interaktywnymi elementami.
Storybook wykorzystuje się też w jeszcze jednym ważnym celu. Nie tylko służy do prezentacji gotowych komponentów, ale też jest źródłem wiedzy dla całego zespołu odnośnie poszczególnych komponentów biorących udział w projekcie. Ale właściwie po co każdemu członkowi zespołu taka wiedza? Każda nowa osoba czy też wcześniej niepracująca z daną aplikacją ma dostęp do informacji dotyczących poszczególnych elementów. Łatwiej jest jej je zrozumieć i przyswoić bez pomocy innych, co na pewno usprawnia pracę i etap wdrożenia nowych osób. Przyspiesza to również cały proces twórczy i minimalizuje ryzyko duplikacji kodu. W takich warunkach pracuje się zwyczajnie lepiej i wydajniej.
Dużą zaletą Storybooka jest bez wątpienia jego elastyczność. Można go zintegrować w wieloma popularnymi Frameworkami, w tym m.in. z Vue, React, Svelte czy Angular. To poszerza grono specjalistów, którzy mogą korzystać z tego narzędzia. Twórcom Storybooka o to właśnie chodziło, aby był on uniwersalny, dostępny i przydatny jak największej grupie użytkowników.
Korzystanie ze Storybooka. To może Ci się opłacić
Kto już korzystał lub cały czas pracuje na Storybook’u, ten doskonale rozumie, dlaczego to narzędzie cieszy się dużym zainteresowaniem i ma tak wielu zwolenników. Oprócz tego, że jest łatwe w obsłudze, to przede wszystkim przyspiesza i usprawnia pracę nad aplikacjami. To jego podstawowa zaleta i założenie, które udaje się mu przez cały czas z powodzeniem realizować. Storybook umożliwia izolowanie i testowanie pojedynczych komponentów. Programiści nie muszą uruchamiać całej aplikacji, aby sprawdzać działanie konkretnych elementów. Ma to wpływ na łatwiejsze debugowanie. Poza tym istnieje możliwość mockowania danych lub stanu komponentów w taki sposób, aby sprawdzić, jak zachowa się dany element.
Storybook świetnie sprawdza się też w roli kompletnej dokumentacji o poszczególnych komponentach aplikacji. Każdy element można zaprezentować w sposób przejrzysty i czytelny, zrozumiały nawet dla osoby, która ma pierwszy raz kontakt z podobnym komponentem i całą aplikacją. W wielu projektach każdy z członków zespołu ma przypisaną swoja rolę i pracuje nad innym elementem. O pozostałych nie musi posiadać aż tak obszernej wiedzy jak o swojej, jednak dla zrozumienia założenia całego projektu powinien „cokolwiek” o nich wiedzieć. Taka spójna dokumentacja ma przy tym pozytywny wpływ na komunikację wewnątrz zespołu i wzajemne zrozumienie swoich motywacji i aktualnie prowadzonych działań. Warto jest też pomyśleć o takim rozwiązaniu, jeśli z danych komponentów korzysta więcej niż jeden zespół.
Skoro już mamy bibliotekę komponentów, to dobrze jest ją maksymalnie wykorzystać i wycisnąć z niej jak najwięcej możliwości. Dzięki niej można osiągnąć spójne podejście do projektowania interfejsu. Cały zespół korzysta z tej samej bazy, ale może wykorzystywać poszczególne komponenty w różnych obszarach aplikacji, a nawet w zupełnie innych aplikacjach. W ten sposób eliminujemy potrzebę wielokrotnego tworzenia tych samych rozwiązań – skoro już coś powstało, to najlepiej jest to zapisać i pozostawić do wykorzystania później. To duża oszczędność czasu. Projekt tym samym nabiera spójności, poszczególne jego części łączą się ze sobą i tworzą jednolitą całość, nawet jeśli pracuje nad nimi wielu specjalistów i podzespołów.
Jeszcze jedno! Storybook sprzyja łatwemu testowaniu przypadków brzegowych. Przy jego pomocy można przygotować kilka stanów dla pojedynczego komponentu, uwzględniając przy tym przypadki brzegowe. Co to oznacza w praktyce? A no mianowicie to, że w każdym momencie możemy sprawdzić, czy konkretny komponent zachowuje się tak, jak powinien i my byśmy tego oczekiwali. Możemy kontrolować jego zachowanie bez potrzeby uruchamiania całej aplikacji.
Te wszystkie zalety pozwalają twierdzić, że Storybook jest narzędziem bardzo przydatnym przy projektowaniu aplikacji. Pozwala na realizację nieco innego podejścia do tworzenia interfejsów użytkownika w projektach IT.
Storybook w pracy specjalisty IT
No dobrze, ale właściwie kto korzysta ze Storybooka? Tak naprawdę jest to narzędzie dedykowane dla wielu różnych grup zaangażowanych w proces tworzenia aplikacji, a więc nie ograniczamy się tutaj tylko do jednego środowiska specjalistów. Wydawać by się mogło, że Storybook dedykowany jest tylko dla programistów, ale w rzeczywistości grupa docelowa jest znacznie szersza.
Największą grupą użytkowników są oczywiście programiści frontendowi. To właśnie oni zajmują się tworzeniem interfejsów użytkownika i to im narzędzie ułatwia izolowaną pracę nad poszczególnymi komponentami. Dla nich to też źródło wiedzy o tych elementami, wszystkie kluczowe informacje w jednym miejscu.
Druga grupa docelowa to UX/UI Desigerzy, czyli specjaliści odpowiedzialni za projektowanie interfejsu. Dzięki Storybook mogą oni zobaczyć, jak poszczególne elementy zachowują się w praktyce w konkretnych okolicznościach. Mogą na tej podstawie dopasować projekt do oczekiwań i preferencji użytkownika. Co więcej, mogą również sprawdzić, czy dany komponent został przez designera zaprojektowany w sposób kompatybilny z tym, jak zrobił to programista. Tutaj spójność koncepcji jest kluczowa.
Ze Storybooka korzystają też Product Managerowie. Wykorzystują go do wizualizacji postępów w projektach i rozwoju poszczególnych komponentów. W ten sposób sprawdzają, jak dane elementy ewoluują i się zmieniają na skutek podejmowanych prac. Pozwala to na szybsze podejmowanie decyzji dotyczących ewentualnych zmian w wyglądzie i funkcjonalnościach interfejsu. Co więcej, osoby bez obszernej wiedzy technicznej mogą w praktyce zobaczyć, jak poszczególne komponenty wyglądają. Oprócz tego Produkt Managerowie mogą wykorzystać Storybook w trakcie spotkań z klientem. W ten sposób mogą oni zaprezentować kilka komponentów jednocześnie i omówić już uzyskane efekty, jak również dalsze działania.
Ostatnia grupa, która korzysta ze Storybooka, to QA Testerzy. Chodzi o tworzenie testów interaktywnych komponentów. To pozwala im na szybką i trafną identyfikację błędów. Storybook można też zintegrować z popularnymi narzędziami tj. Cypress czy Playwright, na których pracują testerzy.
Jak stworzyć swoje pierwsze story?
To teraz kwestia praktyczna. Aby zacząć, najpierw trzeba zainstalować Storybooka, to jednak nie wymaga specjalnych umiejętności technicznych. Kiedy już mamy dostęp do narzędzia, możemy stworzyć swoje pierwsze story. Jest to funkcja, która opisuje sposób renderowania danego komponentu. Jest ona zapisana w formacie Component Story Format (CSF), a pliki kończą się na .stories.js lub .stories.ts. Podstawowe story można jednak udoskonalić, dodając koncepcję „args”. Pozwala ona na dynamiczne zmiany argumentów komponentów. W praktyce chodzi o to, że np. możemy zmienić kolor czy rozmiar przycisku. I to chyba tyle, jeśli chodzi o podstawy.
Integracja Storybook z Chromatic
Trzeba jednak mieć świadomość, że Storybook z czasem może już nie wystarczać. Istnieje ryzyko, że zmiany wprowadzane w komponentach bazowych mogą mieć wpływ na inne elementy aplikacji, a wychwycenie ich może okazać się trudnym zadaniem. W takiej sytuacji przydać się może Chromatic, czyli narzędzie, z którym Storybook można z łatwością zintegrować.
Jest to narzędzie pozwalające na automatyczne testowanie i wizualne sprawdzanie zmian. Można go dodać jako jeden z kroków w pipeline. Chromatic znajduje zastosowanie na różnych etapach integracji z Ci/CD. Można np. uruchomić testy UI, czyli automatyczne testowanie wizualne zmian wprowadzonych w kodzie. To pozwala na weryfikację nawet najmniejszych modyfikacji pod względem zgodności z poprzednimi wersjami interfejsu. Poza tym Chromatic sprawdzi się też do automatycznej weryfikacji nowych funkcji, zanim jeszcze trafią one do docelowego użytkownika. W ten sposób minimalizuje się ryzyko niezgodności w interfejsie użytkownika i wprowadzenia błędów do już działającej aplikacji.
Oznacza to, że zaczynając od Storybooka, warto jest zakładać, że w późniejszym czasie będzie konieczne uzupełnienie go o inne narzędzie. Storybook dostarcza środowisko do izolowanej pracy nad komponentami, dzięki czemu można je testować w sposób modułowy. Chromatic z kolei rozszerza tę możliwość o wizualne testowanie zmian, jakie wprowadzane są w interfejsie. Automatyzuje przy tym proces weryfikacji i eliminuje ryzyko wprowadzenia błędów do aplikacji.
Storybook pozwala wdrożyć koncepcję CDUI w życie, a to jest bardzo opłacalny krok dla usprawnienia pracy nad aplikacjami. Praca nad poszczególnymi komponentami w izolacji jest wygodniejsza i bardziej precyzyjna. Nie ma konieczności ingerowania w całą aplikację. Możemy sprawdzać tylko te elementy, które nas interesują. Kto korzysta, ten potwierdzi, że taka koncepcja projektowania i tworzenia interfejsów użytkownika naprawdę wymiata.
