Premiera Angulara 17 to jego prawdziwy renesans

Wiele osób ogłosiło, że wypuszczeniem Angulara w wersji 17 nastał jego renesans. W ciągu ostatnich 18 miesięcy zespół Angulara skupił się na wprowadzaniu licznych ulepszeń, modernizacji frameworka oraz zapewnieniu, że wszystko co robią, jest podparte realnymi potrzebami developerów. To zdecydowanie był okres intensywnej pracy. Można nawet powiedzieć, że rewitalizacji Angulara, by dostosować go do współczesnych wymagań.

Kierunek, w którym zmierza Angular z wydaniem wersji 17 wskazuje, że ważne było zarówno codzienne doświadczenie programistów, jak i wydajność aplikacji w Angularze. Zobaczmy więc, co przynosi nowa wersja.

Nowa składnia kontroli przepływu w szablonach

Pierwszą ważną cechą Angulara 17 jest wprowadzenie nowej składni kontroli przepływu w szablonach. Ta składnia upraszcza sposób, w jaki deweloperzy mogą tworzyć dynamiczne struktury oparte na logice warunkowej lub iterować po kolekcjach bezpośrednio w szablonie Angulara.

W poprzednich wersjach Angulara ta funkcja głównie zależała od dyrektyw strukturalnych takich jak *ngIf i *ngFor. Choć nadal są dostępne i działają ja dawniej, Angular 17 wprowadza bardziej intuicyjne konstrukcje podobne do JavaScriptu. To redukuje boilerplate i potencjalnie poprawia wydajność wykrywania zmian poprzez dążenie do Angulara bez Zone w przyszłości.

Zobaczmy więc jak wygląda nowa składnia. Zamiast używać *ngFor, można teraz użyć konstrukcji @for z opcjonalnym blokiem @empty:

@for (let item of items)
{
  <li>{{item.name}}</li>
}
@empty
{
  <li>Nie znaleziono przedmiotów.</li>
}

Wygląda to podobne do składni for...of w JavaScript, z którą raczej każdy jest zaznajomiony. Blok @empty jest podobny do bloku else i będzie renderowany, jeśli kolekcja jest pusta. Bardzo podobne konstrukcje są teraz dostępne dla renderowania warunkowego. Podobnie do *ngIf, *ngElse i *ngSwitchCase, Angular 17 wprowadza @if, @else, @switch, @case i @default.

Celem tych aktualizacji jest nie tylko przyniesienie znajomej składni do szablonów Angulara, ale także optymalizacja wydajności poprzez umożliwienie bardziej szczegółowego wykrywania zmian.

Co więcej, przejście na nową składnię ułatwia skrypt migracji automatycznej, który można uruchomić za pomocą:

ng update @angular/core --migrate-only control-flow-syntax

Opóźnione ładowanie

Opóźnione ładowanie z nową dyrektywą @defer jest łatwiejsze niż kiedykolwiek. Ta funkcja jest narzędziem do optymalizacji wydajności, które pozwala deweloperom na odłożenie ładowania i renderowania komponentów lub części strony internetowej do momentu wystąpienia określonego warunku lub zdarzenia.

@defer pozwala oznaczyć blok HTML do ładowania leniwego. Na przykład:

@defer (na viewport) {
  <app-recommendations [productGroup]="product().productGroup">
  </app-recommendations>
}

@placeholder {
  <app-ghost-products></app-ghost-products>
}

W powyższym przykładzie komponent <app-recommendations> nie zostanie natychmiast stworzony podczas ładowania strony. Zamiast tego załaduje się, gdy użytkownik przewinie stronę i znajdzie się w widocznym viewporcie. Jest tu też dyrektywa @placeholde. Tak, jest dokładnie tak jak myślisz. Zastępcza treść będzie wyświetlana do czasu załadowania treści zadeklarowanej przez @defer.

Ponadto @defer może wstępnie załadować niezbędne pakiety w tle, aby były gotowe, gdy będą potrzebne.

Wydajność kompilacji z esbuild i Vite

Angular 17 zintegrował esbuild i Vite jako domyślną opcję w Angular CLI, zastępując Webpack przy generowaniu pakietów. esbuild to popularne narzędzie do tworzenia pakietów i minimalizacji, które zyskuje na popularności dzięki bardzo przyzwoitym czasom kompilacji i łatwości użycia.

Kombinacja Vite i esbuild może prowadzić do poprawy czasu kompilacji o 67% i poprawy szybkości o 87% w ng build oraz o 80% szybszego ng serve. Miło.

Renderowanie po stronie serwera (SSR) z nowym Application Builder

Angular 17 upraszcza konfigurację SSR za pomocą przełącznika --ssr, który może być używany podczas generowania nowego projektu za pomocą Angular CLI. Wsparcie dla SSR jest ułatwione przez nowy pakiet @angular/ssr, który jest oficjalnym następcą projektu wspieranego przez społeczność Angular Universal.

Ogólnie SSR w projektach Angulara jest łatwiejsza, bo nowy system budowania tworzy pakiety zarówno dla serwera, jak i dla klienta.

Dalsze ulepszenia

Oprócz głównych aktualizacji Angular 17 przynosi kilka innych mniejszych, ale znaczących ulepszeń. Jednym z godnych uwagi jest wsparcie dla API przejść między widokami (view transitions) w Angular Router, umożliwiające developerom tworzenie bardziej złożonych i płynnych przejść między widokami lub komponentami kierowanymi w ich aplikacjach.

Nowe logo, dokumentacja i samouczki

Zespół Angulara ciężko pracował nie tylko nad kodem, ale także nad marką. Po pierwsze Angular ma nowe logo i całkowicie odnowioną stronę internetową. Ich celem było uczynienie Angulara bardziej atrakcyjnym, modnym i stylowym.

Nowa strona internetowa to nie tylko wygląd. Chodzi o to, by Angular był przyjazny dla developerów. Dokumentacja została znacznie uproszczona, aby zapewnić dobrze napisane przewodniki po każdym koncepcie frameworka.

Zespół Angulara położył duży nacisk na edukację i łatwość nauki poprzez nową stroną internetową Angular.dev. Wprowadzili samouczki, które są interaktywnymi narzędziami do nauki, pozwalającymi użytkownikom pracować z Angularem bezpośrednio w ich przeglądarkach internetowych. Te narzędzia są obsługiwane przez WebContainers, dzięki czemu stanowią wygodne narzędzie do nauki podstawowych pojęć Angulara w praktyce.

Ponadto, Angular.dev zawiera sekcję "plac zabaw", gdzie użytkownicy mogą eksperymentować z najnowszymi funkcjami i koncepcjami Angulara. Zawiera ona szablony, które użytkownicy mogą używać jako punkty wyjścia, w tym przykłady nowych funkcji, takich jak te omówione powyżej. Jest tam nawet mini gra zaprojektowana tak, aby pokazać możliwości Angulara v17, dodając element zabawy do procesu nauki.

Czy renesans potrwa dłużej?

Wprowadzenie nowych funkcji i brandingu w Angularze 17 to strategiczny ruch, mający na celu wzmocnienie jego pozycji rynkowej i zmniejszenie dystansu między Angularem a Reactem. React cieszy się ogromną popularnością dzięki swojej prostocie, architekturze opartej na komponentach i silnemu wsparciu społeczności. Ostatnie lata to stopniowy odwrót od Angulara i umocnienie pozycji Reacta. Może wersja 17 pozwoli odwrócić ten trend?

Aby to się stało, "Renesans Angulara" musi oznaczać coś więcej, niż chwytliwe hasło. Musi przekładać się na rzeczywiste ulepszenia, które zadowolą zarówno obecnych, jak i potencjalnych programistów. Jeżeli uda się to dostarczać systematycznie, może to zachęcić deweloperów do ponownego rozważenia Angulara jako atrakcyjnej alternatywy dla nowoczesnych frameworków webowych. Zmiany te, jeśli zostaną pozytywnie przyjęte, mogą przyczynić się do zwiększenia zaufania i zainteresowania w społeczności deweloperów, co z kolei może doprowadzić do odrodzenia popularności Angulara.