Styleguide dla TYPO3

Dlaczego Styleguide to najważniejsze rozszerzenie QA dla programistów szablonów TYPO3

Rozwój szablonów w TYPO3 ma systematyczny problem z jakością: programiści testują swoje szablony Fluid z danymi, które aktualnie istnieją na stronie. Ale elementy treści mają dziesiątki wariantów - nagłówki z podtytułem i bez, bloki tekstowe z 3 słowami lub 3 akapitami, obrazy w pionie i poziomie, tabele z 2 lub 20 kolumnami. Kto sprawdza tylko aktualną stronę, pomija skrajne przypadki, które ujawniają się dopiero po uruchomieniu.

Rozszerzenie Styleguide rozwiązuje ten problem, automatycznie wyświetlając wszystkie elementy treści systemu TYPO3 w każdej dostępnej konfiguracji na jednej stronie. Dzięki temu programista od razu widzi, czy jego CSS i szablony prawidłowo obsługują wszystkie warianty.

Typowe scenariusze zastosowań

Rozwój szablonów przy projektach relaunch. Firma zleca relaunch TYPO3 z nowym Corporate Design. Programista frontend tworzy szablony Fluid dla wszystkich elementów treści. Bez Styleguide musi dla każdego elementu tworzyć dane testowe w backendzie - proces trwający godziny przy ponad 30 elementach. Styleguide automatycznie generuje wszystkie dane testowe: elementy tekstowe o różnych długościach, obrazy o różnych proporcjach, listy, tabele, formularze. Programista otwiera URL i widzi wszystko na pierwszy rzut oka.

Testy regresji po aktualizacjach TYPO3. Aktualizacja TYPO3 z v11 na v12 subtelnie zmienia renderowanie poszczególnych elementów treści. Element Textmedia nagle renderuje dodatkowy wrapper-div, który łamie layout CSS. Bez Styleguide to wychodzi dopiero, gdy redaktor zgłosi błąd na stronie live. Z Styleguide programista po aktualizacji od razu widzi, które elementy się zmieniły.

Uzgadnianie między zespołem projektowym a deweloperskim. Designerzy dostarczają makiety Figma dla 10 elementów treści. Ale jak wyglądają pozostałe 25 standardowych elementów w nowym designie? Styleguide czyni tę lukę widoczną.

Architektura techniczna

Styleguide to oficjalne rozszerzenie TYPO3 Core System Extension, dostarczane z kodem źródłowym TYPO3. Musi tylko zostać aktywowane w Extension Manager. Rozszerzenie działa na dwóch poziomach: generator TCA analizuje definicje Table Configuration Array wszystkich zarejestrowanych elementów treści i generuje z nich rekordy testowe. Moduł backendowy pozwala administratorowi generować, aktualizować i usuwać dane testowe. Strona frontendowa wyświetla wszystkie wygenerowane elementy treści w layoucie frontendowym.

Styleguide nie ma zewnętrznych zależności. Jako rozszerzenie Core jest automatycznie aktualizowane z każdą aktualizacją TYPO3 i zawsze kompatybilne z daną wersją.

Częste problemy i rozwiązania

Strona Styleguide wyświetla puste obszary. Dane testowe zostały wygenerowane, ale strona frontendowa nie pokazuje wszystkich elementów. Przyczyna: SysFolder z danymi testowymi nie jest prawidłowo skonfigurowany jako punkt startowy lub brakuje konfiguracji TypoScript. Rozwiązanie: sprawdzenie w module backendowym, czy drzewo stron jest prawidłowo założone.

Brak obrazów w wygenerowanych danych testowych. Styleguide próbuje dołączyć obrazy testowe przez FAL. Jeśli folder Fileadmin jest pusty, pola obrazów pozostają puste. Rozwiązanie: ręczne przesłanie co najmniej jednego obrazu do Fileadmin przed generowaniem danych testowych.

Problemy z wydajnością strony Styleguide. Gdy wszystkie elementy treści są renderowane na jednej stronie, czas ładowania przy złożonych szablonach może wynosić 10 do 15 sekund. Rozwiązanie: aktywacja Styleguide tylko na środowisku deweloperskim lub staging, nigdy na systemie live.

Migracja i kompatybilność wersji

Styleguide jest dostępne jako Core System Extension od TYPO3 v8 i jest automatycznie aktualizowane z każdą wersją TYPO3. Nie ma oddzielnych numerów wersji ani problemów z kompatybilnością.

Przy aktualizacji TYPO3 dane testowe Styleguide powinny być wygenerowane na nowo. Stare dane testowe mogą być niespójne na nowym systemie, ponieważ definicje TCA zmieniają się między wersjami TYPO3.

Gosign integruje Styleguide w każdy relaunch TYPO3 jako stały element procesu QA. Strona Styleguide jest tworzona na środowisku staging jako permanentna referencja i służy zespołowi projektowemu jako URL akceptacji. Zmiany w szablonach Fluid lub CSS stają się tam natychmiast widoczne, bez konieczności tworzenia treści testowej na poszczególnych stronach.