Najnowsze ulepszenia w Angular 17: wszystko, co musisz wiedzieć

Z badań przeprowadzonych przez Statista wynika, że ​​Angular jest najczęściej używanym frameworkiem do tworzenia stron internetowych, z którego korzysta 17,46% respondentów ^[i] . Aby utrzymać tę pozycję, poprawić wydajność i uprościć kodowanie, zespół Angular wypuścił 11 września 2023 roku nową wersję – Angular 17.

Odnowiony framework Angular kieruje się wizją Sarah Drashner, dyrektor ds. inżynierii w Google i szefowej zespołu Angular. Wnosi stopniowe ulepszenia, zapewniając kompatybilność wsteczną, jednocześnie dopasowując się do najnowszych trendów w frameworkach front-end.

Dzięki Angular 17 firmy i programiści mogą sobie wyobrazić lepsze doświadczenia programistyczne. W tym przypadku nowa składnia przepływu sterowania, ulepszona obsługa renderowania po stronie serwera (SSR), turbodoładowany interfejs CLI przez esbuild i inne aktualizacje przyczyniają się do płynniejszego i bardziej dynamicznego przepływu prac programistycznych.

W tym poście na blogu możesz odkodować nowe ulepszenia i aktualizacje w środowisku programistycznym Angular 17. Zrozumiesz także, dlaczego programiści powinni z niego korzystać, ułatwiając współpracę, zachęcając do ponownego wykorzystania kodu i zapewniając tworzenie skalowalnych i łatwych w utrzymaniu aplikacji internetowych.

Zaczynajmy!

Kluczowe funkcje i ulepszenia w Angular 17

1. Dokumentacja z myślą o przyszłości

Angular 17 wprowadza znaczące ulepszenia do swojej dokumentacji wraz z rozwojem nowego domu na angular.dev. Ta zmiana obejmuje odnowioną strukturę, zaktualizowane przewodniki, wzbogaconą zawartość i najnowocześniejszą platformę, która umożliwia interaktywną podróż edukacyjną w zakresie Angular i Angular Command Line Interface (CLI).

Wersja beta angular.dev wyznacza początek nowej ery, a w planach jest uczynienie z niej domyślnej witryny Angular w wersji 18. Najważniejszym elementem jest WebContainers, umożliwiający użytkownikom wykorzystanie mocy Angular CLI bezpośrednio w nowoczesnej przeglądarce internetowej. To dodatkowo zapewnia przyszłościowe i wciągające doświadczenie w zakresie dokumentacji.

2. Wbudowany przepływ sterowania

W Angular 17 godnym uwagi ulepszeniem jest wprowadzenie nowej składni bloków kontrolnych, zastępującej tradycyjne dyrektywy strukturalne, takie jak *ngIf, *ngFor i *ngSwitch. Ta ewolucja zapewnia programistom większą elastyczność i lepszą czytelność kodu szablonu.

Na przykład bloki @if i @else zapewniają czystszy sposób warunkowego renderowania treści przy użyciu wyrażeń logicznych. Blok @for upraszcza iterację po kolekcjach, umożliwiając bardziej wyrazisty i zwięzły kod. Dodatkowo bloki @switch, @case i @default ułatwiają efektywny przepływ sterowania, usprawniając obsługę wielu warunków.

Aby uwzględnić te ulepszenia, programiści mogą migrować istniejące szablony, korzystając z dostarczonego schematu. Doprowadzi to do bardziej nowoczesnego i usprawnionego podejścia do tworzenia szablonów w Angular 17.

3. Wbudowana pętla @for

Wbudowana funkcja pętli @for w Angular 17 zapewnia znaczną poprawę zarówno doświadczenia programisty, jak i szybkości renderowania. Ta składnia rozwiązuje problem wąskiego gardła wydajności spotykanego w aplikacjach korzystających z *ngFor, nakazując użycie „track” w celu skutecznego wykrywania zmian. Zapewnia także szybszy proces renderowania.

W przeciwieństwie do swojego poprzednika, funkcja „śledzenia” jest płynnie wbudowana jako wyrażenie w szablonie, eliminując potrzebę stosowania dodatkowej metody w klasie komponentu. Warto zauważyć, że wbudowana pętla @for zapewnia również wygodny skrót do obsługi kolekcji zawierających zerowe elementy za pomocą opcjonalnego bloku @empty. Ta funkcja nie tylko usprawnia rozwój, ale także znacznie zwiększa wydajność aplikacji Angular, co stanowi godny uwagi kamień milowy w ewolucji frameworka.

4. Widoki odroczone

W Angular 17 wprowadzono znaczące ulepszenie zwane Deferrable Views w odpowiedzi na prośbę społeczności Angular o intuicyjny mechanizm leniwego ładowania komponentów, dyrektyw i potoków.

Ta nowa funkcja ma na celu uczynienie procesu odroczonego ładowania zależności bardziej intuicyjnym i wygodnym. Widoki odroczone umożliwiają programistom deklaratywne leniwe ładowanie części szablonów do czasu, aż będą potrzebne, optymalizując początkowy rozmiar pakietu i skracając początkowy czas ładowania aplikacji. Osiąga się to poprzez zastosowanie w szablonach nowej składni przepływu sterowania „@-syntax”.

Ponieważ widoki odroczone zapewniają wbudowane i zarządzane rozwiązania do odroczonego ładowania, programiści mogą wyrazić swoje zamiary bez konieczności zarządzania szczegółowymi importami dynamicznymi, obserwatorami skrzyżowań lub procedurami obsługi zdarzeń. Ta funkcja obsługuje również pobieranie wstępne w celu szybszej dostępności zasobów.

Co więcej, programiści mogą używać zintegrowanych wyzwalaczy i niestandardowych warunków, aby określić, kiedy i jak powinno nastąpić odroczone ładowanie. Dodatkowo widoki odroczone redukują standardowy kod, automatycznie obsługując zarządzanie zależnościami za kulisami.

5. Ulepszone renderowanie po stronie serwera (SSR)

Możliwości renderowania po stronie serwera Angulara 17 umożliwiają programistom podniesienie wydajności aplikacji i komfortu użytkownika. Funkcja Hydration Boost usprawnia proces nawadniania JavaScript po stronie klienta, minimalizując migotanie i zapewniając płynniejsze przejście do interaktywnych stron internetowych.

Angular 17 przyjmuje również ustandaryzowany format modułów EcmaScript (ESM) dla SSR, upraszczając kompilacje i zwiększając kompatybilność z popularnymi narzędziami. Dodatkowo koncentruje się na zmniejszaniu rozmiarów pakietów SSR poprzez techniki dzielenia kodu, co prowadzi do szybszych odpowiedzi serwera i lepszej optymalizacji wyszukiwarek. Te udoskonalenia pozycjonują Angulara 17 jako atrakcyjny wybór do tworzenia wydajnych i przyjaznych SEO aplikacji internetowych.

6. Stabilny sygnał

Angular 17 wprowadza przełomowe osiągnięcie w postaci stabilizacji sygnałów, kluczowego narzędzia dla entuzjastów reaktywności. Porzucając etykietę „podgląd programisty”, Signals jest teraz solidnym rozwiązaniem do zarządzania stanem i ułatwiania aktualizacji komponentów.

Integracja sygnałów z funkcją Change Detection.OnPush zapewnia poziom precyzji. Zapewnia to odświeżanie komponentów tylko wtedy, gdy zmienia się ich specyficzny sygnał, optymalizując wydajność poprzez unikanie niepotrzebnych ponownych renderowań. Wycofanie metody mutacji na rzecz niezmiennych aktualizacji dodatkowo zwiększa przewidywalność i czystość w utrzymywaniu historii stanu. Podczas gdy w centrum uwagi znajduje się Signals, Effects, wciąż w wersji zapoznawczej dla programistów, zapewnia wgląd w przyszłość zarządzania stanem Angulara, prezentując potężne możliwości operacji asynchronicznych.

Zasadniczo Angular 17 zapewnia programistom udoskonalony zestaw narzędzi, w tym stabilne sygnały, integrację OnPush, niezmienne aktualizacje i ewoluujący potencjał efektów. To ostatecznie sprzyja tworzeniu dobrze zorganizowanych aplikacji.

7. Budowanie wydajności za pomocą esbuild

Przyjęcie esbuild w Angular 17 oznacza znaczący krok w zwiększaniu wydajności kompilacji projektów Angular. Pierwotnie bazujący na Webpacku, Angular CLI przeszedł na wykorzystanie esbuild, nowszego narzędzia słynącego z przyjaznego dla użytkownika charakteru i niezwykłej szybkości, mogącego pochwalić się ponad 20 000 pobrań tygodniowo.

Integracja esbuild została zaimplementowana w Angular 16 jako wersja zapoznawcza dla programistów, a teraz osiągnęła stabilną implementację w Angular 17. Ta integracja stała się domyślnym kreatorem dla nowych projektów za pośrednictwem Konstruktora aplikacji. W przypadku istniejących projektów zachęca się programistów do rozważenia przejścia na esbuild poprzez aktualizację wpisu konstruktora w pliku angular.json.

Dzięki tej integracji zarówno operacje ngserver, jak i ng build wykazują znaczny wzrost szybkości, wykorzystując serwer Vite dev do wydajnego tworzenia pakietów npm tylko wtedy, gdy jest to konieczne. Włączenie przez zespół CLI różnych optymalizacji wydajności dodatkowo przyczynia się do przyspieszenia procesu kompilacji, przy czym ng build często osiąga poprawę szybkości od 2 do 4 razy. To przejście podkreśla zaangażowanie Angulara w zapewnianie programistom narzędzi, które nie tylko upraszczają przepływ pracy, ale także znacznie zwiększają wydajność tworzenia projektów.

8. Samodzielne komponenty

„Samodzielne komponenty” to przełomowa funkcja w Angular 17, która umożliwia tworzenie i wykorzystywanie komponentów bez potrzeby stosowania modułu nadrzędnego. W tej zmianie paradygmatu komponent główny, którego przykładem jest „AppComponent”, jest oznaczany jako samodzielny przy użyciu właściwości „standalone: ​​true” w dekoratorze komponentów. Ten atrybut oznacza, że ​​komponent działa niezależnie od modułu nadrzędnego. Co więcej, zamiast polegać na module, komponent wykorzystuje tablicę „imports”, aby wprowadzić niezbędne zależności, takie jak moduł routera.

Następnie do zainicjowania aplikacji wykorzystywana jest funkcja „bootstrapApplication”, co demonstruje odejście od tradycyjnego podejścia skoncentrowanego na NgModule. Nowo odkryta elastyczność samodzielnych komponentów ułatwia modułowy i zamknięty styl programowania, pokazując zaangażowanie Angulara w ewolucję i ulepszanie architektury komponentów.

Jak przeprowadzić migrację do Angular 17?

Aby zaktualizować istniejącą aplikację Angular do wersji 17, wykonaj następujące kroki:

• Najpierw globalnie zaktualizuj Angular CLI do wersji 17 za pomocą polecenia „npm install -g @angular/cli@17”.

• Następnie zaktualizuj swoje podstawowe pakiety Angular, uruchamiając „ng update @angular/core”.

• Jeśli używasz dodatkowych pakietów Angular, zaktualizuj je indywidualnie, używając kodu, takiego jak „ng update @angular/material” dla Angular Material.

• Następnie dokładnie przetestuj swoją aplikację, aby po aktualizacjach upewnić się, że działa zgodnie z oczekiwaniami.

Oto kilka wskazówek, które możesz zastosować w tym miejscu: uaktualnianie do mniejszych wersji pomiędzy głównymi aktualizacjami, tworzenie kopii zapasowej kodu i bazy danych przed aktualizacją oraz sprawdzanie zgodności bibliotek innych firm. Powinieneś także zapoznać się z dokumentacją Angular i forami społeczności, aby uzyskać pomoc, jeśli podczas procesu aktualizacji pojawią się problemy. Te usprawnione kroki zapewnią płynne przejście do najnowszej wersji Angulara, minimalizując jednocześnie potencjalne wyzwania.

Gotowy do tworzenia solidnych, bogatych w funkcje i nowoczesnych aplikacji za pomocą Angular? Porozmawiaj z naszymi ekspertami!

Bibliografia:

^[i] Statysta