Nowy frontend Angular

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.