Angular 2 – odpalamy aplikację w przeglądarce

W poprzedniej części udało się skompilować pustą wciąż aplikację do JavaScript w formie przystępnej dla przeciętnej przeglądarki internetowej. Kolejny krok to jej uruchomienie w przeglądarce. Sprawdźmy więc co będzie nam do tego potrzebne?

shim.js

Shim’y to w świecie JS zestaw funkcji, które pośredniczą pomiędzy kodem JavaScript i API przeglądarki, na której dany kod jest wykonywany. Szczególne zastosowanie to sytuacje, w których twórca chce się upewnić, że ta sama aplikacja będzie zachowywać się tak samo i przewidywalnie na różnych platformach czy wersjach przeglądarek.
Jeżeli znajomy jest Ci wzorzec projektowy „adapter” to Shim jest jego podręcznikowym przykładem. Z reguły powstaje nowa warstwa abstrakcji, która pozwala na poprawną komunikację pomiędzy naszym kodem źródłowym, a różnymi wariacjami API przeglądarek internetowych. Dlaczego jest tu o tym mowa? Angular2 do działania wymaga tej bibliotek ze właśnie wspomnianych powyżej powodów – to samo zachownie pomiędzy różnymi platformami. Ja używam shim.js z paczki NPM o nazwie core-js.

Zone.js

Ta właśnie biblioteka wywołała u mnie największy znak zapytania gdy miałem pierwszy raz styczność z Ng2. Po co? Dlaczego? Za jakie grzechy? Czym to właściwie jest?
Udało mi się ustalić, że Angular opiera na tym rozwiązaniu rozbudowaną obsługę błędów oraz mechanizm synchronizacji danych z UI. Przyznam szczerze, że nie miałem do tej pory ochoty w to wnikać. Każdy przyzna chyba, że jak dotąd i tak przeszliśmy już kilka technologii i bibliotek żeby w ogóle zacząć tworzyć aplikację. Wróce do tego kiedyś, ale ciekawskim pozostawiam ten post: https://medium.com/@MertzAlertz/what-the-hell-is-zone-js-and-why-is-it-in-my-angular-2-6ff28bcf943e

System.js

Jest to biblioteka, której głównym zadaniem jest dynamiczne ładowanie modułów EcmaScript. W praktyce chodzi o doładowywanie plików js w czasie działania aplikacji. Najłatwiej można to zaobserwować otwierając Narzędzia Developer (np. F12 w Chrome) i zakładkę Network. W momencie gdy jakiś moduł jest wymagany przez aplikację, SystemJS „dociąga” go w tle i ładuje do aplikacji. AngularJS używa tej techniki w trybie kompilacji „Just In Time”, który to krótko opisałem w poprzednim poście. Nie do końca rozumiem dlaczego, ale System.js do działania potrzebuje odpowiedniego pluginu. Do wyboru są np. Babel, TypeScript lub używany przeze mnie Traceur.
Spójrzmy więc jak poskładać wymienione wyżej klocki w całość. Używając NPM lub Yarn dociągamy trzy potrzebne nam moduły:

> npm i core-js zone.js system.js –save

Ściągnięte moduły znajdują się teraz w folderze node_modules. Strona startowa naszej aplikacji będzie wyglądać więc następująco:

SystemJS wymaga pliku konfiguracyjnego. Co w nim znajdziemy? Rzućmy okiem:

W podstawowej formie plik ten mapuje „skróty” ścieżek do poszczególnych modułów NPM, które potem używamy importując je w poszczególnych komponentach naszej aplikacji. Ja określam jeszcze domyślne rozszerzenia ładowanych plików, więc gdy piszemy:

import {module} from ‚./module’

…to tak naprawdę biblioteka ładuje nam plik „module.js”. Te informacje również umieszczamy w pliku systemjs.config.js.

Mamy więc załadowane wszystkie potrzebne moduły, więc używając systemjs zaciągamy punkt startowy naszej aplikacji: main.js.
Aha, najważniejsze to oczywiście użycie naszego pierwszego komponentu wewnątrz znacznika <body>:

<localvan-app>Loading LocalVan…</localvan-app>

Co się teraz stanie? Aplikacja będzie wyświetlać „Loading…” do czasu aż użyty komponent zostanie załadowany i podmieni treść na coś innego.

To już naprawdę ostatni krok do uruchomienia aplikacji… Prawie. Jest jeszcze jeden. Ponieważ w grę wchodzi dynamiczne doładowanie plików *.js, nie wystarczy otworzyć naszego dokumentu html w przeglądarce bezpośrednio z dysku. Potrzebny będzie najprostszy serwer www. W tym miejscu proponuję jedno z dwóch rozwiązania.
Jako, że zawsze na mojej maszynie deweloperskiej mam zainstalowany PHP, to chętnie wykorzystuję wbudowany serwer. W folderze głównym projektu wpisuję komendę:

php -S localhost:80

Następnie otwieram przeglądarkę i wpisuję adres http://localhost i mój folder z aplikacją staje się folderem głównym naszego lokalnego serwera. Swoją drogą warto zwrócić uwage ile plików Angular2 doładowuje w międzyczasie!

Drugie rozwiązanie to promowany przez twórców Angulara moduł o nazwie http-server, który używając NodeJS stworzy nam dokładnie to samo. Równie dobrze można użyć starego (nie)dobrego XAMPPa czy każdego innegu pakietu serwerowego jeśli tylko wspiera HTTP.

Tak więc w dwóch długich krokach udało nam się stworzyć przykładową aplikację używając Angular2. Dla mnie było to dobre utrwalenie dotychczasowej wiedzy i mam nadzieję, że komuś z czytających również co nieco w tym temacie się rozjaśniło.

Zdaję się sprawę, że wiele szczegółów pominąłem ale nie jest to tutorial „krok po kroku” tylko raczej omówienie. W razie czego zapraszam do kontaktu, chętnie wszystko wyjaśnię. Kod, który buduję znajduje się oczywiście w repozytorium, więc zachęcam do eksperymentowania i dzielenia się wnioskami.