@master6 powodów dla których warto poznać Angulara

6 powodów dla których warto poznać Angulara

09.12.2017 | aktual.: 10.12.2017 16:24

UDOSTĘPNIJ

Angular jest to frontendowy framework, służący do budowania stron określanych mianem single page application. W prostych słowach, cała mechanika strony ładowana jest na raz, po czym następuje już tylko wymiana samych danych z serwerem (o ile dana strona tego wymaga).

Dzięki takiemu rozwiązaniu, nie musimy w kółko przesyłać wspólnych partii kodu HTML (np.: menu główne) podczas nawigacji po stronie. Strona tego typu przypomina w konstrukcji aplikacje jakie znamy z telefonów komórkowych. Przykładem takiej witryny może być serwis transakcyjny mBanku (chociaż ten akurat nie jest napisany przy pomocy Angulara).

Wpis ten skierowany jest głównie do osób które mają do czynienia z pracą frontend dewelopera, z uwagi na poruszane kwestie techniczne. Postaram się przedstawić Wam powody, dla których po ponad roku czasu pracy z tym frameworkiem, uważam że jest on wart uwagi. Jeśli wcześniej pracowałeś chociażby z jQuery, to tym bardziej znajdziesz tutaj wiele odniesień jak pewne problemy w Angularze rozwiązuje się znacznie prościej, lub takowe w ogóle nie występują.

1. Manipulacja DOMem, system szablonów

To co pierwsze rzuca się w oczy, to sposób budowana strony (a w zasadzie komponentów) w Angularze. Dostajemy do dyspozycji system szablonów (bazujący na HTMLu), wyposażony w metody do wyświetlania danych oraz instrukcje sterujące (jak IF, ELSE, SWITCH, FOR). Zatem jeśli zachodzi potrzeba wyświetlenia bloku w zależności od stanu pewnej zmiennej, jest to bardzo proste i przyjemne:

<div *ngIf="notifications > 0">
    Masz {{ notifications }} nowych powiadomień
</div>

To pewnie kwestia indywidualnego podejścia do czytelności kodu, nie miej nie zachodzi tutaj potrzeba wstrzykiwania JSa w kod HTML, nie musimy się gimnastykować z .append() czy też przełączaniem klasy CSS.

Warto też nadmienić, że taki angularowy IF, całkowicie wyrzuca z drzewka DOM dany fragment kodu, jeśli warunek nie jest spełniony. Ma to swoje plusy jeśli chodzi o wydajność oraz podejście do pisania styli.

2. Data binding

Data binding to mechanizm odpowiedzialny za powiązanie wartości zmiennej z miejscem w kodzie HTML, w którym ta zmienna została użyta. W praktyce oznacza to, że jakakolwiek modyfikacja zmiennej występującej w szablonie, pociąga za sobą automatyczne odświeżenie tej wartości w oknie przeglądarki.

Odnosząc się do przykładu z punktu wyżej, jeśli zmienna notifications początkowo posiadała wartość 0 i wykonamy taki kod:

this.notifications = 4;

to spowoduje to samoczynne wstrzyknięcie znacznika w stronę, wraz z stosownym komunikatem w jego wnętrzu.

Zatem jeśli nasza aplikacja komunikuje się z serwerem za pomocą API, wówczas po odebraniu danych, wystarczy je przypisać do zmiennych użytych w szablonie a zawartość strony dostosuje się samoistnie. Wyobraźcie sobie ile trzeba by się nagimnastykować w jQuery (że o czystym JSie nie wspomnę) aby osiągnąć coś takiego.

Data binding działa również w drugą stronę, tj. potrafi synchronizować zawartość zmiennej z polem tekstowym na stronie. Synchronizacja taka może być zarówno jednostronna (jak w w/w przykładzie), jak i dwustronna.

3. TypeScript, kompilacja

W Angularze mechanikę aplikacji piszemy w języku TypeScript. Jest to modyfikacja JavaScriptu dodająca głównie typowanie zmiennych, oraz pewne elementy ES6, których normalnie użyć byśmy nie mogli z uwagi na wsparcie dla starszych przeglądarek (np.: funkcje strzałkowe, klasy). Całość, aby mogła być uruchomiona w przeglądarce, jest kompilowana do JavaScriptu zgodnego z zadaną wersja ECMAScript (zwykle w wersji 5).

Proces kompilacji jest pewnym minusem, nie miej w dobie pre procesorów CSS nie jest też niczym nowym. Z drugiej jednak strony, otwiera przed nami sporo nowych możliwości jak właśnie elementy ES6 oraz typowanie.

Określanie typów zmiennych pozwala na zapanowanie nad kodem i łatwiejsze wyszukiwanie ewentualnych błędów już na etapie kompilacji. Jeśli spróbujemy przypisać wartość typu string do zmiennej typu number, kompilator nam na to nie pozwoli. W bardziej rozległych projektach, gdzie następuje wymiana danych między serwisami, API, komponentami, jest to nieoceniony mechanizm.

4. Kompaktowanie, podział na moduły

Następstwem procesu kompilacji jest wyplucie kilku plików wynikowych (JS oraz CSS), w skład których wchodzi cała nasza aplikacja. Ma to ogromny wpływ na czas ładowania strony, gdyż liczba requestów jest ograniczona do minimum (nie licząc zasobów graficznych). Same poruszanie się po tak przygotowanej stronie również jest błyskawiczne, gdyż proces nawigacji odbywa się po stronie klienta, a nie polega na wysłaniu żądania do serwera. Oczywiście na dane pobierane AJAXem przyjdzie nam dalej poczekać.

W przypadku sporych aplikacji, mamy możliwość podzielenia całego kodu na moduły. Wówczas, takowe ładowane są dopiero wtedy gdy zajdzie taka potrzeba - użytkownik przejdzie na podstronę tego wymagającą.

5. Dependiency injection

Angular wykorzystuje i umożliwia nam bardzo łatwe korzystanie z tego wzorca projektowego. Wstrzykiwanie zależności odbywa się poprzez konstruktor klasy komponentu/serwisu.

Wstrzykiwanymi obiektami są w głównej mierze serwisy które odpowiadają za wymianę danych z zewnętrznym API. Nie mniej nie jesteśmy ograniczeni tylko do tego, wszystko zależne od charakteru aplikacji.

6. RxJS

Reactive Extensions for JavaScript, bo tak brzmi pełna nazwa biblioteki, jest zespołem narzędzi umożliwiającym nam programowanie asynchroniczne oraz oparte na zdarzeniach. Jest to oczywiście zupełnie niezależna biblioteka, i nic nie stoi na przeszkodzie aby korzystać z niej w zewnętrznych projektach. To co wiąże ją z Angularem, to to, że wszystkie asynchroniczne mechanizmy Angulara korzystają z RxJSa i wystawiają nam obiekty jego typu (Observable - taki krewny Promise'a).

Mówiąc bardziej obrazowo, RxJS pozwala podpiąć się pod pewne asynchroniczne źródło danych (np.: żądanie HTTP) i subskrybować dane które z niego wychodzą (wykonać zadaną funkcję gdy to nastąpi). Po drodze jednak, możemy modyfikować przepływ tych danych, spinając ze sobą jedną bądź więcej funkcji modyfikujących (odniesienie do programowanie funkcyjnego będzie tutaj bardzo na miejscu).

Elastyczność w modyfikowaniu strumieni danych jest ogromna i znajdziemy tu praktycznie wszystko od podstawowych operacji filtrowania, mapowania a skończywszy na przełączeniu strumieni, łączeniu czy oczekiwaniu na kilka niezależnych.

Drobny przykład tego, jak z pozoru skomplikowane operacje można dzięki RxJS zawrzeć dosłownie w kilku liniach kodu:

this.route.params
    .pipe(
        map((params: Params) => params['id']),
        switchMap((id: number) => this.itemsService.get(id))
    )
    .subscribe(
        (items: Item[]) => this.items = items	
    );

Podłączamy się pod strumień parametrów adresu URL, oczekując na zmianę. W pierwszej fazie wyłuskujemy tylko parametr który nas interesuje (map), przełączamy się na kolejny strumień który odpytuje API naszego serwisu podając mu wcześniej pobrane ID (switchMap). W końcu, gdy dostaniemy odpowiedź, przypisujemy dane do zmiennej - które z kolei dzięki data binding od razu są wstrzykiwane w widok.

Wadą RxJSa jest jednak to że początkowo trudno go zrozumieć, pojąć przepływ danych - osobiście troszkę się z tym borykałem.

#tylkoangular

Zaintrygowany? Super! Mam nadzieję że udało mi się Twoją osobę co najmniej zaciekawić, a najlepiej pchnąć do działania, w poznawaniu zagadnień związanych z single page application.

Sam Angular jest obecnie zdobywającym coraz to większą popularność frameworkiem. Wiele innych rozwiązań programistycznych korzysta również z Angulara, jak np.: NativeScript, będący frameworkiem służącym do pisania aplikacji na systemy Android oraz iOS. Zatem benefity płynące z poznania tej techniki są naprawdę szerokie.