Wiedza Babel, 23 maja 2018 Pauza in Garden, Kraków

1. Tworzenie front-endowych bibliotek komponentów
ŁUKASZ OSTROWSKI
Wiedza Babel, Kraków 22 maja 2018

2. AGENDA
1: Czym są biblioteki UI w programowaniu?
2: Po co je tworzyć?
3: Przykłady gotowych rozwiązań
4: Jak tworzyć własne biblioteki
5: Podsumowanie
Wiedza Babel, Kraków 22 maja 2018

3. Czym są biblioteki UI w programowaniu?
??
?Wiedza Babel, Kraków 22 maja 2018

4. Czym są biblioteki UI w programowaniu?
🎨 Implementacja pattern library designu,
gotowa do użycia w aplikacji.
🔧 Zestaw reużywalnych komponentów
i zasad wizualnych, z których składa
się finalny produkt.
💻 Abstrakcja pozwalająca programiście
tworzyć logikę i funkcjonalność,
zamiast wyglądu.
Wiedza Babel, Kraków 22 maja 2018

5. Przykładowy template z komponentami UI
<div>,<form><div>, <label>, <input>,<p>
<div>, <select>, <option>, <label>
Wiedza Babel, Kraków 22 maja 2018

6. Przykładowy template z komponentami UI
Importujemy komponenty z
zewnętrznej biblioteki. Mogą pochodzić
z osobnego projektu, teamu albo open
source.
Wiedza Babel, Kraków 22 maja 2018

7. Przykładowy template z komponentami UI
Nie interesuje nas jak wygląda input.
Nie piszemy CSS, jedynie
wprowadzamy parametry.
Oprócz wyglądu możemy otrzymać też
logikę - np walidację.
Wiedza Babel, Kraków 22 maja 2018

8. Przykładowy template z komponentami UI
Czasami komponenty zależą od innych
komponentów. Zawsze potrzebujemy
dokumentację.
Wiedza Babel, Kraków 22 maja 2018

9. Przykładowy template z komponentami UI
Im bardziej złożona biblioteka, tym
więcej parametrów i konfiguracji
udostępnia.
Wiedza Babel, Kraków 22 maja 2018

10. No ale po co je tworzyć?
Wiedza Babel, Kraków 22 maja 2018

11. No ale po co je tworzyć?
👷
TWORZYĆ
⌛
POŚWIĘCAĆ CZAS
💸WYDAWAĆ PIENIĄDZE
<=> <=>
Wiedza Babel, Kraków 22 maja 2018

12. No ale po co je tworzyć?
STANDARYZACJA
🎉 Projekt otrzymuje jednolite style i zachowania
💸 Unikniemy przypadków tworzenia tego samego elementu
dwa razy (np. przez dwie osoby).
⌛ Nie da się skalować bez standaryzacji. Mając gotowe inputy i
przyciski, formularze składamy z gotowych klocków w
ekspresowym tempie!
Wiedza Babel, Kraków 22 maja 2018

13. No ale po co je tworzyć?
CZAS
💵 Przygotowana raz, będzie wykorzystywana do końca trwania
projektu - a może nawet w wielu różnych.
🔧 Im większa biblioteka UI, tym mniej czasu developer spędza na
klepaniu styli - zaczyna używać komponentów jak klocków do
składania widoków.
😇 Zmiana komponentu propaguje się w całym projekcie - nie
trzeba ręcznie zmieniać wielu miejsc w kodzie.
🏢 Onboarding nowych ludzi do projektu jest szybszy, bo mogą
zapoznać się z warstwą wizualną na osobnej płaszczyźnie.
Wiedza Babel, Kraków 22 maja 2018

14. No ale po co je tworzyć?
JAKOŚĆ
🚚 Biblioteka UI tworzona powinna być poza kontekstem głównej
aplikacji. Dzięki temu zespół za nią odpowiedzialny dba, by była
przenośna i reużywalna.
📝 Użycie biblioteki UI wymaga dokumentacji, co pozytywnie
wpływa na jakość kodu.
📚 Biblioteka może (i powinna) być rozwijana niezależnie, więc
można przeznaczyć zespołowi więcej czasu w razie potrzeby, bez
narzutu produktu.
Wiedza Babel, Kraków 22 maja 2018

15. No ale po co je tworzyć?
DX (developer experience)
👼 Mniej przeklinania.
📤 Cały UI w jednym miejscu.
🎨 Abstrakcja pozwalająca tworzyć dobry UI nawet miernym
developerom.
⌛ Nie trzeba ręcznie implementować popularnych rozwiązań
(modale, walidacje, burger-menu etc).
Wiedza Babel, Kraków 22 maja 2018

16. No ale po co je tworzyć?
KOMUNIKACJA
🎨 Design team może dbać o aktualizacje biblioteki
front-endowej względem ich styleguide-u UI.
💻 Designerzy mogą sami commitować aktualizacje w CSS/
HTML bez wchodzenia do „twardego” kodu.
🏆 Testerom łatwiej testować (wąski zakres odpowiedzialności
kodu).
📝 Biblioteka zawiera dokumentację, nowi deweloperzy mogą
zapoznać się z warstwą wizualną zanim wejdą do projektu.
Wiedza Babel, Kraków 22 maja 2018

17. No ale po co je tworzyć?
Dodatkowo - multiplatformowość
Tworząc platformę na web, iOS, Android, każdy team musi
implementować te same komponenty od nowa. Utrzymanie
niezależnej biblioteki (i teamu za nią odpowiedzialnego) pozwala
bezboleśnie aktualizować i rozszerzać UI.
Wiedza Babel, Kraków 22 maja 2018

18. Przykłady i inspiracje
Przykładowe rozwiązania open source
TO JEST GOOGLE MATERIAL 😮
Wiedza Babel, Kraków 22 maja 2018

19. Material Design
Google Material Design
Wiedza Babel, Kraków 22 maja 2018

20. Material Design
Cechy MD
📱 Dostępny na wszystkie sensowne platformy.
🆗 Dojrzały, kompletny, zarówno dla designu jak developera
🆒 Implementacje w React, Angular itd.
👴 Popularny i wizualnie zrozumiały dla usera.
💨 Darmowy, szybki, świetnie nadaje się na hackatony, back office.
🔩 Względnie customizowalny.
Wiedza Babel, Kraków 22 maja 2018

21. Semantic UI, Bootstrap
Cechy Semantic UI czy Bootstrap
📃 Bardziej zestaw klas CSS i pomniejszej logiki jak modale.
🆒 Posiada implementacje w Angular, React.
👎 Przyspiesza prace w małych projektach, utrudnia w dużych.
Wiedza Babel, Kraków 22 maja 2018

22. STORYBOOK
Jak stworzyć własną bibliotekę?
Framework do tworzenia wizualnych dokumentacji dla naszych bibliotek.
Umożliwia podgląd naszych komponentów.
Umożliwia interakcję z naszymi komponentami.
Wiedza Babel, Kraków 22 maja 2018

23. Jak wygląda taki storybook?
Wiedza Babel, Kraków 22 maja 2018

24. Jak wygląda taki storybook?
Wiedza Babel, Kraków 22 maja 2018

25. Jak wygląda taki storybook?
Przykładowy kod dla „story”
Wiedza Babel, Kraków 22 maja 2018

26. Jak wygląda taki storybook?
Dlaczego warto znać te frameworki
💻 Działają jako niezależny od naszej aplikacji proces.
Dostarczają wyizolowane środowisko do osadzania naszych
komponentów.
📝 Udostępniają narzędzia do dokumentacji, interakcji, podglądu
kodu, wersjonowania itd.
🔌 Rozszerzalne, dużo pluginów.
Wiedza Babel, Kraków 22 maja 2018

27. Tworzenie własnych bibliotek - narzędzia
Narzędzia do tworzenia
własnych bibliotek UI
Storybook
Styleguidist
Wiedza Babel, Kraków 22 maja 2018

28. Podsumowanie
Zalety:
- Szybkość developmentu
- Jakość kodu
- Developer Experience
- Skalowalność
Wady:
- Trzeba pisać dokumentacje
¯_(ツ)_/¯
- Utrudnia pisanie „na odwal
się”
- Teamy są zależne od siebie
(o ile mamy więcej teamów)
- Wymaga więcej czasu (w
teorii)
Wiedza Babel, Kraków 22 maja 2018

29. THX BYE
Wiedza Babel, Kraków 22 maja 2018

30. Q&A
Wiedza Babel, Kraków 22 maja 2018