Ten rozdział powstał po to, aby przedstawić Ci dokładnie rozwiązania, które dostajesz we frontendzie w ramach nowej wersji
naszej aplikacji. Na początek omawiamy temat frameworka UI oraz zestawu komponentów, później podsumowujemy model stylizowania komponentów
przy pomocy css.
Materialize vs Angular Material
Budując aplikacje webowe w Angular, można wybrać co najmniej dwie drogi tworzenia widoków.
Jedną z opcji jest zastosowanie frameworka
Materialize. Druga opcja to użycie zestawu komponentów
dla mobilnych i stacjonarnych aplikacji, czyli
Angular Material w połączeniu z
Flexbox-em.
Dlaczego
Angular Material, a nie
Materialize? Powodów jest kilka.
- Materialize w wielu sytuacjach wymaga użycia jQuery, a tego każdy profesjonalny programista Angulara pragnie uniknąć.
To jest bardzo ważny punkt. Nie chcesz w kodzie komponentu wstawiać dziwnych kombinacji z użyciem jQuery,
żeby zrobić coś, co w samym Angularze z użyciem Materialize jest niewykonalne, a bez problemu
zrobisz to w Angular Material.
-
Materialize nie współpracuje dobrze z Reactive Forms, które są wygodne i szeroko używane w projektach.
Tak naprawdę w profesjonalnych projektach będziesz używał formularzy Reactive Forms na co dzień, dlatego
używamy ich w naszym kursie.
-
Bardziej złożone problemy (np. obsługa zakresów dat i wiązania relacją dat od i do) są trudne
do zrealizowania w Materialize. Także sam wybór komponentów jest tutaj mocno ograniczony.
Angular Material posiada więcej komponentów wagi ciężkiej (np. tabelki, drzewka, ale również więcej
opcji w kontekście komponentów dat i czasu).
-
Popularność na Stackshare wskazuje, że więcej projektów Angular jest realizowanych za pomocą Angular Material
niż z użyciem Materialize. Zgadza się to z naszym doświadczeniem. Do tej pory wszystkie projekty realizowane
w pracy przez nas lub naszych znajomych były i są wykonywane w Angular Material.
-
I wreszcie...Angular Material jest rozwijany przez ten sam team w Google, który rozwija Angulara.
Layout strony
Do budowy layoutu strony użyliśmy prostego i efektywnego rozwiązania wprowadzonego w samym
CSS.
Mowa oczywiście o
Flexbox.
Zaletą tego rozwiązania jest możliwość dowolnej adaptacji komponentów prostymi stylami css bez potrzeby zagłębiania się
w tajniki dodatkowych frameworków.
Dlaczego nie
Bootstrap?
Bootstrap to fajny framework, ale użycie go razem z
Angular Material jest złym pomysłem, ponieważ zarówno Bootstrap,
jak i Material stylują komponenty, na przykład przyciski, pola formularzy czy okna dialogowe.
Tym samym style tych samych elementów będą ze sobą kolidować i nawet jeśli uda nam się to na siłę poskładać,
to prędzej czy później stracimy kontrolę nad wyglądem komponentów.
Dobrym przykładem są tutaj pola formularza zawierające linie, na których wpisujemy tekst.
Stosując oba rozwiązania naraz, dostaniemy...dwie linie nieco rozjechane względem siebie, co wygląda,
jakby ten sam komponent został wstawiony w dwóch wersjach, nie do końca pasujących do siebie.
Style CSS czy SCSS
Oczywiście w każdym profesjonalnym projekcie stosuje się preprocesory styli, które po prostu dają nam dużo większe możliwości
i znaczną wygodę w implementacji skomplikowanych widoków. W Angularze na etapie tworzenia projektu decydujemy, czy chcemy
korzystać z czystych styli css, czy też z wybranego preprocesora styli. Można to później zmienić, ale bywa to problematyczne,
dlatego w trakcie tworzenia aplikacji wybraliśmy model z preprocesorem styli, ale...nie używamy jego składni.
Zatem mamy pliki
scss, a w nich czyste style css. Wynika to z tego, że chcemy, aby style były zrozumiałe również dla osób,
które nie korzystają na co dzień z preprocesorów (a wśród Javowców to się zdarza dość często).
Oczywiście style są uporządkowane i odpowiednio podzielone, także w razie potrzeby możesz z łatwością zamienić je na kod scss własnoręcznie.
Własna paleta barw
Teraz możesz w bardzo łatwy sposób dostosować wygląd aplikacji do swoich preferencji. Wystarczy zmienić kilka wpisów,
aby cieszyć się własną szatą graficzną. Na przykład, aby toolbar, pola edycyjne oraz przyciski wyglądały inaczej, wystarczy podmienić
wszystkie wystąpienia kolorów w plikach:
- header.component.scss
Kolor #87ceeb na #f1dba2.
- startappa-theme.scss
Kolor #4907A1 na #16277c.
- registration.component.scss
Kolor #000000 na #3488bb.
Efekt takiej zmiany będzie taki jak na poniższych zdjęciach.