Renesans Angulara: Czy rzeczywiście jest tak cudowny?

Jesteśmy w trakcie renesansu Angulara. W wersji 17 nadeszły duże zmiany, między innymi nowe logo. W wersji 18 spodziewamy się jeszcze więcej zmian. Ja nazywam się Aleksander Lubych. Ja nazywam się Jakub Pawlak. To jest Subiektywny Frontend i dzisiaj porozmawiamy o tym, co Angular dla nas przygotował, jeżeli chodzi o najnowsze wersje i co się tak naprawdę z nim dzieje. Zapraszamy. Renesans Angulara. No i co? Co z tym Angularem? No, był renesans. Był renesans. Myślę, że są duże zmiany, na przykład największa zmiana moim zdaniem w siedemnastce to jest logo.

Logo. O, proszę bardzo. I teraz jak sobie spojrzymy na oficjalny artykuł na blog poście od Angulara, to możemy zobaczyć coś takiego. Wow. Renesans. No i oprócz logo jeszcze nowa strona angular.dev. O właśnie, o właśnie. A co tam się kryje? Więcej animacji. Uwaga, uwaga. Wow. Renesans. Renesans. To mi się podoba. O to chodzi. To już nie jest ten Angular nudny, czerwony, teraz jest fioletowy gradient. No właśnie. I teraz spójrzmy sobie może jak to wygląda. O nie. Jakub Jakub jak to ma się dobrze sprzedawać w dzisiejszych czasach?

Nie. Popatrz na to. Z tylu widzisz tu jakąkolwiek animację? Nie ma animacji, nie ma gradientów. Słabo. Nic tu nie ma. Nic. Jest jakaś dokumentacja, którą widziałem milion razy, w której się nauczyłem milion rzeczy. Ale nie ma ani jednej animacji. Dobra, dobra, śmiejemy się trochę z Renesansem Angulara, ale prawdę powiedziawszy, Renesans Angulara myślę, że jest trochę prawdą. Trochę, ale nie do końca, bo oczywiście to jest marketingowy chwyt, że wow, wow, robimy Renesans, bo Angular już od jakiegoś czasu funduje nam dosyć częste... I duże. Więc Angular już jakiś czas rozwija się szybko i w porównaniu do Reacta, który ma dosyć wolne te wydania, Angular stał się taki trochę niestabilny, ja bym powiedział.

Te zmiany z wersji na wersję są przeogromne, więc dla kogoś, kto chce być na bieżąco i chce mieć najnowszą wersję, to wymaga sporo pracy. Bo jedna rzecz, Angular ma wsteczne wsparcie. Oni bardzo dużą uwagę przywiązują do tego, żeby jednak nie popsuć kodu, który już istnieje i mają też migrację i to jest super. Ale nadal update Angulara, jeśli tych zmian jest sporo, to po prostu jest ciężka sprawa. I mimo tego, że są wprowadzone nowe rzeczy, no to właśnie wydaje mi się, że dzisiaj byśmy porozmawiali o tym, czy to dobrze, czy to niedobrze, że tych rzeczy jest tak dużo. No i w jakim kierunku Angular zmierza?

No dobra, to w takim razie zacznijmy od postawienia sobie ważnego pytania. Czy Angular staje się Reactem? No i co ty o tym myślisz? Nie wiem. Nie wiem, bo... Angular faktycznie odrabia lekcje i trochę zaczyna nadganiać konkurencję, bo konkurencja zaczęła bawić się takimi rzeczami jak Hydration. Może nie zaczęła, ale bardzo długo korzystała ze składni JSX, które implementują logikę i templatki i Angular troszkę w tę stronę skręca. Oczywiście wydanie signalsów, które były

Po prostu konferencja NG Poland to była... Same signals. To powinno być, to było signals Poland. To była konferencja Signals Poland, zresztą już nawet prowadzący kolejne prezentacje w Signalsach się z tego nawet śmiali, ale to była duża rzecz i to będzie duża rzecz i myślę, że Angular po prostu nadgania te braki, które konkurencja miała, na przykład SSR, czyli Server Side Rendering. No, nadganiamy. Tak, ale co warto wspomnieć, to jest to, że w Angularze szesnastce chyba weszły stand-alone.

Tak. I to jest istotne, bo bardzo wiele pretensji ma się do Angulara, że są moduły. A, fu! Osobiście ja w Angularze siedzę bardzo długo i dla mnie moduły są dosyć oczywistą sprawą, ale dla osoby, która wchodzi w Angulara, moduły... O co tu chodzi? Ja mam mieć moduł, skoro ja chcę mieć ten komponent. Dokładnie i tutaj wchodzimy w uproszczenie składni. Jak wspomniałeś o tych signalsach, to możemy też dodać, że skoro są signalsy i możemy reagować bardziej punktowo na zmiany, nie musimy... I to jest jedna z takich rzeczy. To jest coś, co po prostu niszczy ludzi, którzy chcą wejść w Angulara.

To znaczy nikogo nie obchodzi ten zon, ale on tam jest. I on będzie ci Odświeżać całe widoki, wszystko co tak naprawdę się dzieje. Wiadomo, możemy tam sobie troszeczkę magii rzucić, jeżeli chodzi o on push i tak dalej, odpitać różne gałęzie w drzewie. No ale ten ng-zone jest i teraz jeżeli masz Angular 16 i budujesz od początku tą aplikację, to możesz się pozbyć całkowicie. No co więcej, raczej wystartujesz już z siedemnastką, a zaraz w zasadzie z osiemnastką. I ciekawe co tam w tej osiemnasty będzie. Więc wydaje mi się, że może Angular nie staje się nowym Reactem, bo to dalej będzie Angular. Angular ma konkretne use case, konkretne zastosowania, ale myślę, że próg wejścia będzie trochę niższy, ale czy to będzie to miało też negatywny efekt, ale o tym za chwilę.

Tak jest. Co jest ciekawe? Wspomniałeś wcześniej, że Angular patrzy dość mocno w stronę SSR. I to jest dość ciekawe, ponieważ niedawno powstał taki framework, który się nazywa Quick. To jest on napisany przez Miszko. Ten Quick namieszał troszeczkę. Bo może zaczniemy od tego, kim jest Miszko. No właśnie. Miszko jest panem, który rozwijał przez 12 lat Angulara. Tego Angulara, którego znamy. Czyli bardzo długo siedział w bebechach naszego frameworku. No i on w pewnym momencie odszedł i powiedział, że dobra, trzeba stworzyć coś szybszego. I właśnie stworzył Quicka. I ten Quick jest naprawdę ciekawym frameworkiem, bo jest mocno skoncentrowany na performance, na tym, żeby strona renderowała się jak najszybciej.

I ten JS jest w takim zakresie, jaki jest potrzebny, żeby wykonać daną akcję na stronie. Czyli bardzo potężne narzędzie. Dobra, wszystko super. Ale czy Ty używasz Angulara z SSR-em? Czy kiedykolwiek użyłeś? Podjąłem próbę. No właśnie, ja uważam, że to jest fakt. Ale Jakub, poczekaj, poczekaj, ale właśnie dlatego nie używałem tego SSR-a, bo nie jest to takie proste w Angularze w tej chwili, żeby tego SSR-a zapiąć. Bo nie chciałem tracić czasu na to, żeby zapiąć SSR-a w Angularze. No tak, tylko że SSR ma konkretne zadanie i konkretny cel, ale dla aplikacji, która... Jakby nie będzie ładowana, nie będzie generowana estetycznie, SEO jest w ogóle bez znaczenia, tylko bo i tak musisz się zalogować i masz aplikację, gdzie jest logika, która jest ukryta zalogowanym.

To ten SSL, no co on tam daje? Oczywiście no fajnie dostać ten HTML na dzień dobry, ale de facto ja osobiście uważam, że dla Angulara to w ogóle nie jest deal breaker. Nie, jeżeli powiemy sobie tak, wszystkie aplikacje, które budujemy w tej chwili będą miały rozmiar 50 kilobajtów w transferze dla klienta. Ale problem jest taki, że nasze aplikacje tylko rosną z czasem. I teraz co się stanie, jak dojdziemy w pewnym momencie do momentu, w którym po prostu już tego kodu jest tak dużo i tego JS-a tak dużo wypluwamy, że ten SSR będzie potrzebny. Czyli rozumiem, że Angularowe aplikacje będą rosły, rosły, rosły, rosły. W pewnym momencie będą już tak duże, że ludzie stwierdzą, że dobra...

Nie ma opcji, nie utrzymamy tego, przepisujemy. I tutaj wjeżdża QUIC. Nie, znaczy mi bardziej chodzi o to, dlaczego Angular zaczął patrzeć w stronę SSR. Oczywiście nie mówię, że jakby QUIC był głównym powodem, tylko głównym powodem jest to, że my jednak tego kodu produkujemy bardzo dużo. No tak. I oni musieli coś z tym zrobić, żeby pójść w kierunku performance'u, po prostu żeby tego... Kody ładować mniej, a nie więcej. No i tutaj też wjechały w Angularze jakby dyrektywa defer, czyli deferable views, więc mamy komponenty, które możemy załadować dopiero dynamicznie i to nie wymaga już w zasadzie SSR-a, ale jest mega super fajne i na to trochę czekam z naszym update'em Angulara.

Bo to może być naprawdę dużo, bo po prostu nie będziemy ładowali tego kodu, którego nie używamy. Właśnie to jest istotne, że ten DFIR daje Ci tak naprawdę możliwość lazy loadowania kodu, czyli jak masz fragment. Tak i właśnie fragmentów, bo teraz mieliśmy lazy loading, czyli możemy sobie jakiegoś tam adresu konkretnej funkcjonalności doładować. Tak. Ale co jeśli ten nasz widok jest gigantyczny i ma strasznie dużo migi, to możemy po prostu sobie to opóźnić. To jest super. Tak, to jest świetne. Więc Angular to robi dobrze i w bardzo dobrym kierunku idzie. Co ciekawe, oni też się połączyli z Wizz teraz. Słyszałeś o tym? Tak. No to jest też pod performance. Tak, to jest stanowczo pod performance, no bo Wizz zasila YouTube'a. YouTube'a i jeszcze parę innych ładnych rzeczy, dokładnie wyszukiwarkę, więc oni twórcy Angulara i z deweloperami Uiza po prostu ogarnęli, że robią często podobne rzeczy, więc może by się połączyli, no i się łączą.

Zresztą Signalse bodajże chyba są z Wiza zapożyczone. Tak, dokładnie, dokładnie tak. Tak naprawdę to nie. Więc to się już dzieje. I ja tutaj wspomniałem o tym, że no dobra Angular fajnie rozwija się, czyli mamy te nowe rzeczy, nowe w ogóle control flow, czyli te właśnie nowe dyrektywy, które dajemy w templatkach. Zmiana paradygmatu na programowanie funkcyjne, standalone, Signalsy. Zoneless. Mnóstwo fajnych rzeczy. A co z Legacy Codem? Wiesz co chcę powiedzieć, jakby zmierzam do tego, że fajnie, super dla nowych projektów, ja się super cieszę i nie mogę się doczekać, ale właśnie nie mogę się doczekać update'u Angulara, które duże projekty robią rzadko, bo jest to bardzo kosztowny proces, więc to nie jest tak, że Angular wypuszcza nową wersję i już wszyscy są zaktualizowani, bo jak sobie wejdziecie w statystyki npmowe,

To mnóstwo użytkowników Angulara dalej instaluje starsze wersje. To niemożliwe. I to nie jest tak, że to nie jest po prostu takie bezkosztowe. Czyli te wszystkie zmiany powodują to, że one są super. Zaczniemy je wdrażać, zaczniemy ich używać. Ale jeśli mamy teraz duży projekt i dodamy do tego to, co powstaje, to nagle chcieliśmy obniżyć próg wejścia do projektu i mamy nowego dewelopera, który wszedł w osiemnastkę, po prostu sweet. Po prostu kursik poszedł, jeden, drugi, Angular 18. Eric z JS nie był potrzebny, no bo były signalsy. Wchodzi na grubo, ja ogarniam te signalsy, modułów nie ma standalone i teraz...

Dependency Injection. Moduły. I chciałbym zwrócić właśnie twoją uwagę i waszą też uwagę, że ten Renesans Angulara jest super, jest fajny, jest tam naprawdę dużo fajnych rzeczy, ale pamiętajcie o tym, że trzeba też odrobić swoją lekcję teraz, swoją część tego fajnego procesu Renesansu Angulara, czyli trzeba zaktualizować swój kod. No problemo.

Nie przepiszemy ich, więc one tam zostaną. I teraz Angular w pewnym momencie powie, że no dobra, sayonara, wycofujemy wsparcie. I dlatego trzeba się na to przygotować, że te zmiany też mogą, po prostu mówią nam od razu i zapala, powinna nam się zapalić taka troszkę, no może taka żółciutka jeszcze lampka, że trzeba spłacać dług technologiczny, który zaciągnęliśmy, bo oczywiście Angular słoń jest tego długiego wsparcia, super, ale w pewnym momencie to wsparcie się skończy. Zdecydowanie, a co ciekawe jeszcze chciałem dodać, Angular szykuje pewną przepiękę na Material 3. I to będzie bomba.

Nawet dla projektów, w których ja pracowałem, w których ja pracuję, gdzie wszystko jest oparte na Material 2. Wyobraź sobie, ktoś pracuje nad Design Systemem. Ten Design System robi na przykład przez rok i potem wychodzi Angular 18 i tam jest Material 3. I to jest w ogóle ciekawa sprawa, bo material w wersji 3, który wygląda zupełnie inaczej. No dobra, zupełnie to jest może trochę przesadzone stwierdzenie. Wygląda inaczej niż material 2. Wszedł w wersji 17.2 bodajże, czyli to nie był breaking change. I moim zdaniem to jest breaking change. Ale stop, stop, stop, stop.

To on wszedł w preview, to jest opcja. To nie jest tak, że to 17.2 od razu... Czyli jak postawisz Angularową aplikację, projekt, nowy, świeży, 17.2, to będziesz miał dwójeczkę. Ale będziesz miał opcję. Czyli musisz zrobić po prostu świadomą decyzję, że wchodzimy w matematykę. Ok, dokładnie. Czyli to nie jest tak, że nagle jest przypinka, tylko to jest po prostu opcja, którą masz 11.2. Ok, bo materialowa strona tak nie wygląda, że tak to działa, po prostu jest material.angular i nagle dostajemy trójkę i wygląda wszystko inaczej. To ciekawe, widzisz? Tutaj jak się przełączamy. No tak, tylko musisz się przełączyć na starą wersję. Teraz jest 17.3.6 i już widzimy, że to jest trójeczka, ale tutaj jak przejdziesz do... Czekaj... No ale właśnie, jakby to jest dla mnie trochę niejasne, że...

Tak jak mówiłeś, że są przygotowane design systemy, duże projekty. I to potrzeba czasu i Angular będzie nam tego czasu dawał dosyć mało, bo robią po prostu update'a co pół roku. Często dużo zmian i my się musimy w tym wszystkim połapać, więc taki apel, żeby się w tym łapać. Tak i odrabiać tą lekcję i to co się da faktycznie spłacić ten dług technologiczny albo przynajmniej zaplanować, że to trzeba będzie poprawić, zrefaktorować, no żeby się nie obudzić, że za dwa lata po prostu zostaniemy na jakiejś wersji i będzie trudno zmigrować. Oczywiście Angular na 100% prowadzi skrypty migracyjne, ale wiemy jak to się kończy przy większych projektach. To nie zawsze działa z automatu.

A jeszcze jak nie ma testów jednostkowych, a mamy skomplikowany komponent, serwis albo komponent, który ma półtora tysiąca linijek. A zdarzają się takie kwiatki. Coś to siak. Na co nie możesz się doczekać? W osiemnaste? No, na co? Ja się obawiam, że w osiemnaste wejdzie ta zmiana dotycząca materiala. Ja trochę się nie mogę na nią doczekać. Na osiemnastkę czy na zmianę? Na zmianę. Bo w zasadzie bardzo fajnie wygląda ten nowy materiał. Ja osobiście się nie mogę doczekać, ale to jest rzecz, która weszła już w siedemnastce, bardziej to w kontekście tego renesansu Angulara. To jest...

Dodany jakby do Angularowego inspektora został dodany inspektor do Dependency Injection. To jest coś na co czekam, bo serwisy i injektowanie tych serwisów na różnych poziomów, a dużej aplikacji Angularowej, no prawdę. Tego brakowało bardzo. Console logowanie tego, debugowanie, o Jezu, to jest straszne. Mówili o tym na konferencji pierwszy raz rok temu. To niekoniecznie jest osiemnastka, bo to jest już w siedemnastce, ale to jest rzecz, na którą ja się osobiście naprawdę nie mogę doczekać, bo my właśnie, no nie zawsze możesz się od razu zaktualizować na siedemnastkę, ale może coś w osiemnastce jest, na co ty czekasz.

Przyszliśmy do tego, że nie ma oficjalnej listy zmian jeszcze w osiemnastce. Więc trudno powiedzieć tak naprawdę, co będzie. Czekamy na pierwsze informacje o tym, co wejdzie w 18. Ale czekam na kontynuację, jeżeli chodzi o deferrables. Też czekam trochę na to, żeby te injectory w komponentach i serwisach można było jeszcze prościej sobie dociągać. Bo też o tym wspomnieli na konferencji rok temu. I mam nadzieję, że to też niebawem się pojawi, bo to będzie spore uproszczenie. Jak przewidujesz przyszłość w takim razie? Przejdźmy do szklanej kuli. Jak widzisz renesans Angulara?

Ja jestem podekscytowany ogólnie, pomimo dużego narzekania, żeby była jasność. My troszeczkę się śmiejemy z tego, ale to dlatego, bo te zmiany są po prostu dla nas duże. Tak, bo mówimy to z naszego subiektywnego punktu widzenia rzeczy, którymi się zajmujemy. Bo my tą angularową, ten angularowy update będziemy ciągnąć zaraz. I to jest po prostu duża rzecz i trzeba się wtedy naczytać, napocić i mnóstwo jeszcze rzeczy wychodzi po drodze, które oczywiście mamy ten migration guide i tam sobie możemy wyklikać fajnie, fajnie, tylko jest mnóstwo rzeczy, które okazuje się, że nie są udokumentowane. I są rzeczy, które wylatują. Są rzeczy, które się gdzieś zmieniły.

Są jakieś takie drobne, malutkie rzeczy, które gdzieś się przesunęły. Na przykład Webpack. Przecież Webpacka już nie ma. Webpack wylatuje, mamy sbuilda, module federation. I co teraz? No i co teraz? No przecież to jest fundament dla nas, nie? No i dokładnie. I co dalej? Jak dalej żyć? Więc moim zdaniem przyszłość renesansu rysuje się tak, że ten Angular faktycznie nabiera tego tempa. Jeśli się jeszcze zmerczują z tym Wizem, to w ogóle będzie super szybko. I brzmi to fajnie. Brzmi to naprawdę zachęcająco. Ale i też przerażająco. No właśnie. Mi się bardzo podobał ogólnie ten kierunek, który został obrany. Dużo uproszczeń też dla deweloperów powstaje w Angularze.