Angular – podstawowe informacje

Od jakiegoś czasu pracuję w projekcie gdzie w warstwie front-endowej wykorzystywany jest Angular w wersji 1.5. Nową wersją biblioteki (2.x) za bardzo się nie interesowałem. Bardzo długo była w wersjach pre-releasowych i dynamicznie się zmieniała. Po wydaniu oficjalnej wersji też jakoś od razu się nie rzuciłem aby ją sprawdzić. Przecież to javascript… Tutaj codziennie wychodzi jakiś nowy framework 😉

Ostatnio jednak miałem okazję uczestniczyć w dobrze przeprowadzonym szkoleniu z Angulara wersji >= 2. Podczas szkolenia zrobiłem sporą ilość notatek, które chciałbym jakoś „oszlifować” i podzielić się nimi na blogu.

Nazewnictwo i wersjonowanie

Jak to bywa w świecie programowania, nazewnictwo to ważna kwestia, dlatego też o tym na samym początku. Szkolenie w którym uczestniczyłem, wcale nie było z Angulara w wersji 2, lecz z wersji 4. Tak… Ostatnio modne stało sie to przeskakiwanie numerka wersji (np. PHP). Szczerze mówiąc nawet nie wiedziałem, że tak szybko zdecydowano się na podbicie wersji i na samym początku trochę się zdziwiłem. Jednak wszystkie wątpliwości szybko zostały rozwiane.

Angular 2 od Angulara 1 różni się tym, że to tak na prawdę zupełnie inny framework 😉 Niezbędne jest jakieś rozróżnienie obu tych wersji, ale twórcy chcieli odejść od silnego przywiązania do numerków. Zastosowano więc taki manewr, że biblioteka od wersji 2.x nazywać się będzie po prostu Angular, a starsze wersje (1.x) to AngularJS.

Dodatkowo wprowadzono zasadę, że co pół roku powinna pojawić się nowa główna wersja (Marzec/Wrzesień). Aktualnie mamy marzec więc oczekiwana jest wersja 4, następnie 5, 6 itd.

TypeScript

Sporo o nim słyszałem, ale w praktyce to moje pierwsze zderzenie z tym językiem. Cały Angular napisany został w TypeScript i zaleca się jego używania także podczas tworzenia aplikacji, a zyskamy dzięki temu sporo korzyści.

Dla mnie to bardzo dobra opcja i cieszę się, że javascript też może wyglądać jak normalny język programowania.

Angular CLI & automatyzacja

Nowa wersja Angulara wprowadza coś co już jest znane z innych języków i frameworków – interfejs wiersza poleceń, (ja chociażby kojarzę coś podobnego z Ruby on Rails). Przy pomocy komend w konsoli można przyspieszyć budowę aplikacji

• ng new [name] – można utworzyć nową aplikację,
• ng generate [component] [name] – zamiast component można użyć dowolny element jak dyrektywa, interfejs itp.,
• ng serve – uruchamia aplikację domyślnie na porcie 4200

Większość podstawowych ustawień dostępnych jest w pliku .angular-cli.json w głównym katalogu projektu, który stanowi konfigurację dla webpacka. Można dorzucić dodatkowe zależności .js (np. *bootstrap), ustawić rozszerzenie dla styli (css, less, scss), wybrać narzędzia do testów i parę innych ciekawych opcji.

I teraz najlepsze… Podczas developmentun wszystko dzieje się samo w ekspresowym tempie. Wszystko, to znaczy, że kompilowanie plików, konkratenacje, minifikacje, a nawet watcher przeładowujący stronę po wykryciu zmian w kodzie – po prostu działa. Nie trzeba ustawiać i konfigurować takich narzędzi jak grunt czy gulp. Odpalamy ng serve i można skupić się na programowaniu, a webpack wszystko za nas ogarnie.

Komponenty

Komponent to podstawowy element aplikacji opartej na Angularze, jest to specjalny typ dyrektywy, który zawsze musi zawierać jakiś template. Założono, że aplikacje powinny składać się z drzewa komponentów. Wszystkie komponenty muszą znajdować się wewnątrz jednego głównego, który pełni rolę modułu.

Komponenty powinny zawierać wszystkie pliki, które go dotyczą (taką strukturę generuje tworzenie elementów za pomocą komendy ng generate ..., której warto używać szczególnie na początku przygody z Angularem aby szybciej poznać zalecaną strukturę aplikacji). Tak więc podstawowo po utworzeniu przykładowego komponentu o nazwie example, zawiera on pliki:

• example.component.html,
• example.component.ts,
• example.component.scss,
• example.component.spec.ts.

Osobiście nie do końca podoba mi się takie wymieszanie plików (.css razem z .ts), ale być może to kwestia przyzwyczajnia.

Po stronie HTMLa

Nie zrezygnowano z wstrzykiwania elementów Angulara lub dyrektyw w pliki html, jednak na pierwszy rzut oka trochę wygląda to na mocno zagmatwane… Dla niektórych elementów używamy gwiazdek, dla innych zwykłych nawiasów, a jeszcze dla innych kwadratowych. Hmm? * Przekazywanie własności do elementu z komponentu odbywa się przy pomocy kwadratowego nawiasu

<img [src]="MyImgSrc">

• Przekazywanie wartości z elementu do komponentu (np. event binding) za pomoca okrągłych nawiasów

<button (click)="onSave()">Save</button>

• Dla dyrektyw strukturalnych używana jest gwiazdka, która nazwana jest ładnie lukrem składniowym, np:

<div *ngIf="hero" >{{hero.name}}</div>

Nie zmieniło się wykorzystanie filtrów, chociaż teraz nazwyne są jako pipelines.

Rxjs

Ostatnią bardzo istotną kwestią, która pojawi się w każdej aplikacji opartej o Angular to wykorzystanie biblioteki RxJS i jeśli ktoś jej nie zna to prędzej czy później będzie potrzebne zgłębienie wiedzy na ten temat, zrezygnowano z promisów na rzecz programowania reaktywnego.

Przydatne linki:

• RxMarbles
• Darmowy kurs

Podsumowanie

Nowy Angular to potężne narzędzie do budowania aplikacji w warstwie front-endowej. Osobiście dostrzegam niewielkie podobieństwa do jego pierwszej wersji, jednak trzeba zauważyć, że jest to mimo wszystko zupełnie inna biblioteka. Mam nadzieję, że świat javascriptowy w końcu trochę się zatrzyma i nie będzie tak dynamicznie zrywać kompatybilności wstecznej jak ma to miejsce teraz. Trochę to wygląda Hype Driven Development 😉

Wdrożenie dużej aplikacji opartej o tak spore narzędzie wiąże się ze sporym nakładem czasu na naukę wielu nowych rzeczy, nie tylko związanych z samymi dobrymi praktykami panującymi w Angulrze, ale również z wykorzystywanymi tutaj dodatkowymi elementami takimi jak wspomniane TypeScript czy RxJS. Czas to pieniądze, a firmy nie lubią inwestować w niestabilne rozwiązania.

Nie wydaje mi się, że wieszczony przez fanatyków biblioteki React.js koniec Angulara jest bliski, ponieważ obecnie wydaje się to bardzo dojrzałe narzędzie, które po prostu jest dobrze zrobione. Jeśli tylko autorzy będą starali się rozszerzać i poprawiać obecne funkcjonalności, a nie wymyślać po raz kolejny całkowicie nowego frameworka to myślę, że Angular odniesie spory sukces.