W minionym roku zespół Angulara wprowadził standalone API jako część wersji deweloperskiej. Teraz prezentujemy nową, przełomową aktualizację Angulara w wersji 16, która przynosi znaczący postęp w obszarze reaktywności, renderowania po stronie serwera oraz nowych narzędzi. Wszystko jest rezultatem dziesiątek ulepszeń w odpowiedzi na sugestie użytkowników.
Rewolucja w reaktywności
W ramach wydania v16 prezentowana jest wersja deweloperska zupełnie nowego modelu reaktywności dla Angulara, który przynosi znaczące ulepszenia w zakresie wydajności i doświadczenia programistycznego.
Jest w pełni kompatybilny wstecz i interoperacyjny z obecnym systemem oraz umożliwia:
- Poprawiona wydajność w czasie rzeczywistym dzięki ograniczeniu obliczeń podczas wykrywania zmian. Po wdrożeniu sygnałów Angulara, spodziewamy się znaczącego poprawienia wskaźnika INP Core Web Vital w przypadku aplikacji opartych na sygnałach. Wprowadza prostszy model myślowy dotyczący reaktywności, który jasno określa zależności między widokiem a przepływem danych w całej aplikacji. Umożliwia bardziej dokładną reaktywność, co w przyszłych wersjach umożliwi nam monitorowanie zmian tylko w dotkniętych komponentach.
- Czyni Zone.js opcjonalnym w przyszłych wersjach, używając sygnałów do powiadamiania frameworka o zmianach w modelu. Dostarcza obliczenia właściwości bez kary za ponowne obliczenia w każdym cyklu wykrywania zmian.
- Umożliwia lepszą interoperacyjność z RxJS, przez przedstawienie planu wprowadzenia reaktywnych wejść.
- W wersji v16 znajdziesz nową bibliotekę sygnałów, która jest częścią @angular/core, a także pakiet interop dla RxJS - @angular/core/rxjs-interop.
Angular Signals
Biblioteka sygnałów Angulara pozwala na definiowanie reaktywnych wartości i wyrażanie zależności między nimi. Możesz dowiedzieć się więcej o właściwościach biblioteki w odpowiednim dokumencie RFC. Oto prosty przykład jej użycia w Angularze:
Powyższy fragment kodu tworzy obliczeniową wartość fullName, która zależy od sygnałów firstName i lastName. Deklarujemy również efekt, którego funkcja zwrotna zostanie uruchomiona za każdym razem, gdy zmienimy wartość któregoś z odczytywanych sygnałów - w tym przypadku fullName, co oznacza, że pośrednio zależy również od firstName i lastName.
Gdy ustawimy wartość firstName na "Mark", przeglądarka zarejestruje w konsoli:
Name changed: Mark Doe
Interoperalność z RxJS
Będziesz w stanie łatwo "podnieść" sygnały na observable za pomocą funkcji z pakietu @angular/core/rxjs-interop, który jest dostępny jako część wydania v16!
Oto, jak możesz przekształcić signal w observable:
.. a oto przykład przekształcenia observable w signal, aby uniknąć używania async pipe:
Często użytkownicy Angulara pragną zakończyć przepływ danych, gdy działanie związane z danym tematem dobiega końca. Poniższy wzorzec ilustruje to zjawisko i jest dość powszechny:
Nowy operator RxJS o nazwie takeUntilDestroyed został wprowadzony, upraszczając ten przykład do następującej formy:
Domyślnie ten operator będzie wstrzykiwać bieżący kontekst czyszczenia. Na przykład, w komponencie będzie używać cyklu życia komponentu.
takeUntilDestroyed jest szczególnie przydatny, gdy chcesz wiązać cykl życia obserwowalnego z cyklem życia konkretnego komponentu.
Renderowanie po stronie serwera i hybrydyzacja
Na podstawie corocznych badań deweloperów, renderowanie po stronie serwera wyłania się jako kluczowa możliwość usprawnienia w Angularze. W ostatnich kilku miesiącach team Angular nawiązał współpracę z zespołem Chrome Aurora w celu zwiększenia wydajności i poprawienia doświadczeń programistycznych w obszarze hybrydyzacji i renderowania po stronie serwera. I teraz dostępna jest wersja deweloperska pełnej hybrydyzacji, która nie zakłóca działania aplikacji.
Hybrydyzacja Angulara - nowa opcja. W nowej pełnej hybrydyzacji bez destrukcji Angular przestaje odtwarzać aplikację od podstaw. Framework identyfikuje istniejące węzły DOM, tworzy wewnętrzne struktury danych i przypisuje nasłuchiwaczy zdarzeń do tych węzłów.
Korzyści to:
- Brak migotania treści na stronie dla użytkowników końcowych.
- Lepsze wskaźniki Web Core Vitals w pewnych scenariuszach.
- Architektura przygotowana na przyszłość, umożliwiająca ładowanie kodu o drobnej granulacji za pomocą elementów, które dostarczymy później w tym roku. Obecnie widoczne jest to w postaci progresywnego opóźniania hybrydyzacji tras.
- Łatwa integracja z istniejącymi aplikacjami, w zaledwie kilku linijkach kodu.
- Inkrementalne przyjęcie hybrydyzacji z atrybutem ngSkipHydration w szablonach komponentów wykonujących ręczne manipulacje DOM.
W wczesnych testach zobaczyliśmy nawet do 45% poprawy Largest Contentful Paint dzięki pełnej hybrydyzacji!
Aby rozpocząć, wystarczy dodać kilka linijek kodu do pliku main.ts:
Nowe funkcje renderowania po stronie serwera
W wydaniu v16 została dokonana aktualizacja schematu rozszerzania ng dla Angular Universal, co teraz umożliwia dodanie renderowania po stronie serwera do projektów wykorzystujących samodzielne API. Ponadto, obsługujemy teraz bardziej rygorystyczną politykę zabezpieczeń zawartości.
Ulepszenia narzędzi dla standalone components, dyrektyw i pipes
W celu wsparcia deweloperów w procesie przenoszenia swoich aplikacji na samodzielne API, zostały opracowane schematy migracji oraz przewodnik dotyczący migracji do standalone API. Gdy znajdujesz się w katalogu projektu, wykonaj następującą komendę:
Schematy dokonają przekształceń w Twoim kodzie, usuną niepotrzebne klasy NgModules i zmienią sposób uruchamiania projektu na użycie standalone API.
Konfiguracja Zone.js
Dodano konfigurację Zone.js za pomocą nowego API bootstrapApplication w przypadku korzystania z standalone API.
Dodaliśmy tę opcję, która pozwala na konfigurację Zone.js przy użyciu nowego API provideZoneChangeDetection:
Rozwijanie narzędzi deweloperskich
Kilka najważniejszych funkcji z Angular CLI i usługi języka.
Wersja deweloperska systemu budowy opartego na esbuild
W Wersji 16 Angulara system budowy oparty na esbuild wchodzi w fazę deweloperskiego podglądu! Wcześniejsze testy wykazały poprawę wydajności budowy produkcyjnej o ponad 72%.
Teraz w ng serve będzie użyty Vite jako serwer deweloperski, a esbuild zasila zarówno proces deweloperski, jak i produkcję!
Aby włączyć to funkcję należy w angular.json:
Lepsze testowanie jednostkowe z Jest i Web Test Runner
Dodano eksperymentalne wsparcie dla Jesta, a w przyszłych wersją możliwa jest migracja z Karma na Web Test Runner
Usprawnienie doświadczenia programisty
Wymagane inputy
W wersji 16 możesz teraz oznaczyć dane wejściowe jako wymagane:
Przekazywanie danych routera jako danych wejściowych dla komponentu
Teraz możesz przekazywać następujące dane jako dane wejściowe do komponentu routingu:
- Parametry ścieżki
- Parametry zapytania
- Dane z lokalizacji
Możesz włączyć tę funkcję, korzystając z withComponentInputBinding jako części dostarczanego routera.
Elastyczny ngOnDestroy
Hooki cyklu życia Angulara zapewniają wiele możliwości do podłączenia się do różnych momentów wykonywania twojej aplikacji. Jedną z okazji w ciągu lat było umożliwienie większej elastyczności, na przykład dostępu do OnDestroy jako observowalnej funkcji.
W wersji 16 wprowadzono możliwość wstrzyknięcia OnDestroy, co daje programistom większą elastyczność, o którą prosili. Ta nowa funkcja umożliwia wstrzyknięcie DestroyRef odpowiadającego komponentowi, dyrektywie, usłudze lub w pipe, a także rejestrację hooka onDestroy. DestroyRef można wstrzyknąć w dowolnym miejscu w kontekście wstrzykiwania, nawet poza komponentem, w takim przypadku hooka onDestroy zostanie uruchomiony, gdy zostanie zniszczony odpowiedni wstrzykiwacz.
Tagi samozamykające się
Dodano samozamykające tagi, oto przykład:
