AngularJS 1.X – Zalety i wady

AngularJs jest jednym z najpopularniejszych frameworków JavaScriptowych umożliwiającym tworzenie zarówno prostych jak i skomplikowanych aplikacji client side w oparciu o architekturę MVC.

W ciągu kilku lat okaże się czy jest kolejną zabawką wujka Google czy stabilnym i wspieranym produktem, w który warto inwestować czas i pieniądze, jednak z całą pewnością jest poważnym graczem na rynku i warto mu się bliżej przyjrzeć.

Dużo kontrowersji pojawiło się wraz z rozpoczęciem prac nad wersją 2.0 opartą o AtScript (rozszerzenie MS TypeScript), przewidującą całkowite przebudowanie frameworka i nową składnię. Nie jest to zbyt dobra informacja dla firm, które zainwestowały w duże projekty, wymagające utrzymania i rozwoju przez najbliższe lata, ponieważ nie można płynnie przeprowadzić migracji wersji 1.X do wersji drugiej. Na pocieszenie Google zapowiada możliwość mixowania obu wersji w ramach jednej aplikacji i supportu wersji 1.X.

W tym artykule skupię się na wersji 1.3, z którą miałem okazję pracować rok przy dwóch projektach. Jak każdy framework angularJS nie jest pozbawiony wad, toteż postaram się przedstawić dobre i ciemne strony mocy, z którymi warto się zapoznać przed rozpoczęciem prac i wyborze technologii.

Zalety AngularJS 1.X

Zastosowanie
Niewątpliwie możemy budować złożone aplikacje SPA zarówno webowe jak i mobilne, odciążając backend od renderowania kodu html a skupieniu się na operacjach biznesowych. Wykorzystując bootstrapp, css3 czy animacje możemy zaskoczyć klienta efektem „wow”.

Wstrzykiwanie zależności
Dependency Injection zdecydowanie ułatwia testowanie, umożliwia łatwe przekazywanie i współpracę komponentów w ramach złożonego systemu. Warto tu zwrócić na uwagę na kwestię minifikacji przy bezpośrednim przekazywaniu parametrów, która zmieniając nazwy, potrafi przerwać działanie aplikacji z racji specyfiki działania kontenera DI w wersji 1.X. Przy czym istnieje pewne mało eleganckie rozwiązanie tego problemu.

Dyrektywy i szablony
Dyrektywy, przyjmujące postać atrybutów DOM, są jednym z ciekawszych elementów frameworka, mogą być wielokrotnie używane zgodnie z zasadą DRY. Ponadto istnieje możliwość wykorzystania tych wbudowanych (np.ngClick, ngSubmit, ngShow, ngModel) jak i stworzenia własnych, począwszy od prostych walidacji na widoku, po budowanie złożonych komponentów wypełnionych logiką biznesową, co pozwala na odchudzenie kontrolerów.

Obustronne bindowanie
Dzięki tej funkcjonalności interfejs jest automatycznie uaktualniany pod wpływem zmian modelu danych użytkownika czy tych pochodzących z serwera bez konieczności bezpośredniej obsługi programisty. Zapewnia wygodę kosztem wydajności.

Współpraca z REST
Niewątpliwą zaleta jest wbudowana komunikacja REST za pomocą serwisów $http i $resource.

Współpraca z zewnętrznymi bibliotekami
AngularJS świetnie współpracuje z wieloma frameworkami między innymi: JQuery, UnderscoreJS czy Ionic framework.

Wady AngularJS 1.X

Wydajność
Prędkość nie jest mocną stroną angulara, niewątpliwie spora wadę stanowi natywny brak „Lazy loading” i konieczność ładowania wszystkich skryptów naraz przy starcie aplikacji! Póki co, możemy się ratować bundlingiem i minifikacją, ale jest to materiał na osobny artykuł. W kolejnych wersjach (1.5 i 2.0) ma powstać mechanizm routingu pozwalający na dołączanie skryptów pod konkretną sekcję aplikacji.
Niewątpliwy wpływ na zapotrzebowanie pamięci ma dodatkowa kopia każdego obiektu, która umożliwia porównanie w „dirty check”, przy czym kosztowne cykle „dirty check” dotyczą wszystkich danych powiązanych z widokiem.
Z całą pewnością powinniśmy się dwa razy zastanowić, rozpoczynając projekt o wysokich wymaganiach wydajnościowych. Zachęcam do zapoznania się z artykułem 11 tips to improve angularjs performance.

SEO i indeksowanie
WebCrawlery kiepsko radzą sobie z JavaScriptem, w celu pełnej indeksacji należy wykorzystać zewnętrzne narzędzia np. prerender.io, które zwrócą właściwy kod html.

Nauka i dokumentacja
Podstawy frameworka są stosunkowo proste, jednak skomplikowane procesy implikują wykorzystanie bardziej zaawansowanych technik i tu mogą pojawić się problemy. Istnieje ryzyko, że zaczynające swoją przygodę zespoły spalą czas na walkę z niuansami frameworka. Z dokumentacją jest coraz lepiej i w sieci pojawia się coraz więcej materiałów, jednak nie zawsze tak było, wejście na poziom eksperta wciąż jest wyzwaniem i wymaga dużego nakładu czasu.

Podsumowanie

Reasumując, wybór frameworka aplikacji SPA to kwestia kompromisów, na rynku istnieje ich wiele, między innymi: DurandalJS, KnockoutJS, Aurelia, React, Flux, BackboneJS, Ember.

Istotne jest, aby zrozumieć pozytywne i negatywne cechy każdego z nich i efektywnie je wykorzystać, tu niestety nie ma drogi na skróty. Z całą pewnością angularJS znajduje się w ścisłej czołówce królewskiej kategorii frameworków JavaScript, przy czym wersja 2.0 wzbudza szczególne emocje i oczekiwania jako produkt Google z bardzo dużą społecznością i wsparciem.

***

Więcej o Angular możesz dowiedzieć się również z innych artykułów naszych ekspertów.