Tag: frontend

Angular wprowadził w ostatnim czasie liczne nowości, z których wciąż nie wszyscy programiści korzystają. Zobacz jak usprawnić swój development w 2025 roku. Zespół Angulara nie zwalnia tempa, a z każdą kolejną aktualizacją framework zyskuje na elastyczności i wydajności. Dziś zaczniemy od zmian, które pojawiły się w Angular 17, ale wkrótce pojawią się kolejne wpisy z następnymi funkcjonalnościami. Tym razem największy nacisk położono na optymalizację oraz usprawnienia dotyczące zarządzania przepływem aplikacji. Z nowościami, takimi jak zmodernizowany mechanizm sterowania przepływem (control-flow) czy opóźnione ładowanie treści (deferred loading), Angular 17 staje się jeszcze bardziej wydajny i łatwiejszy w użyciu. Przyjrzyjmy się bliżej tym wszystkim nowościom i sprawdźmy, jak mogą one wpłynąć na pracę z frameworkiem. Wydanie 17 z pewnością jest przełomowe. Nowe Otwarcie – Angular Renaissance Angular 17 to nie tylko zmiany techniczne, ale także nowa identyfikacja wizualna. Tuż przed premierą nowej wersji odbyło się wydarzenie Angular Renaissance, podczas którego zaprezentowano zupełnie nowy branding frameworka. Było to pierwsze tego typu wydarzenie od początku istnienia Angulara i miało na celu zademonstrowanie nowoczesnego podejścia zarówno do samego frameworka, jak i jego społeczności. Zmieniona została cała paleta kolorystyczna, a znane nam czerwone logo zostało odświeżone – przybrało nowocześniejszy, bardziej minimalistyczny wygląd, zachowując jednak kształt tarczy, który jest symbolem związanym z AngularJS. Ten rebranding to nie tylko zmiana estetyki, ale też sygnał, że Angular stawia na przyszłościowe rozwiązania. Dodatkowo, odświeżona została oficjalna strona angular.dev, która teraz oferuje nową wersję dokumentacji, przykłady oparte na standalone API, tutoriale przeprowadzające przez najważniejsze elementy frameworka oraz playground do testowania kodu bezpośrednio w przeglądarce. Ulepszona strona ma na celu jeszcze większe wsparcie dla deweloperów, oferując nie tylko instrukcje, ale i narzędzia do nauki oraz eksperymentowania z nowymi funkcjami Angulara. Nowy Mechanizm Control Flow Jedną z najważniejszych i najbardziej zauważalnych nowości w Angular 17 jest wprowadzenie nowego systemu control flow w templatkach. Jest to fundamentalna zmiana, która w przyszłości wyprze dotychczasowe dyrektywy strukturalne, takie jak ngIf, ngFor czy ngSwitch. Nowa składnia opiera się na konstrukcji blokowej block, a jej działanie przypomina znaną z języka JavaScript strukturę. Dzięki nowemu podejściu można łatwiej kontrolować sposób wyświetlania treści w zależności od warunków. Oto jak wygląda nowa składnia: If @if (time } @case 'banana' { } @default { } } Loop @for (item of items; track item.id) { {{ item.name }} } @empty { No items... } To właśnie przy pętlach Angular 17 wprowadza najwięcej usprawnień. Nowy blok @empty pozwala na wyświetlanie treści w przypadku, gdy lista jest pusta. Dodatkowo, użycie trackBy w pętli nie wymaga już pisania dodatkowych funkcji – wystarczy wskazać unikalny klucz obiektu, co automatycznie optymalizuje proces renderowania listy. W Angularze 17, obok nowych bloków, wciąż pozostają stare dyrektywy, ale zespół Angulara jasno wskazuje, że w przyszłości staną się one przestarzałe. Proces migracji do nowego control-flow został uproszczony i można go zautomatyzować za pomocą poniższej komendy: ng generate @angular/core:control-flow Co jeszcze z nowości w Angular 17? Deferred Loading – Opóźnione Ładowanie Kolejną dużą zmianą w Angularze 17 jest deferred loading, czyli mechanizm opóźnionego ładowania wybranych elementów na stronie. To funkcja, która bezpośrednio wpływa na wydajność aplikacji, umożliwiając zredukowanie początkowego rozmiaru paczki. Dzięki @defer, możemy precyzyjnie kontrolować, kiedy wybrane elementy mają być załadowane, co może szczególnie pomóc w przypadku użytkowników z wolniejszym internetem. Przykład składni @defer: @defer (when condition) { } On Możemy też używać wyzwalaczy, które określają, kiedy element zostanie załadowany. Wyzwalacze mogą reagować na interakcje użytkownika (kliknięcia, najechanie myszką), czy też pojawienie się elementu w widoku użytkownika: @defer (on interaction) { } Typy wyzwalaczy: Idle – ładowanie następuje, gdy przeglądarka przechodzi w stan bezczynności. Interaction – wyzwalacz aktywowany przez działania użytkownika (np. kliknięcie, najechanie myszką). Timer(x) – element jest ładowany po określonym czasie. Hover – ładowanie, gdy użytkownik najeżdża myszką na element. Viewport – aktywacja, gdy element pojawia się w widoku użytkownika. Ładowanie zawartości odbywa się jednorazowo – po załadowaniu nie można cofnąć tej operacji, dlatego warto przemyśleć, kiedy dokładnie powinno nastąpić ładowanie danego elementu. Prefetch Funkcja prefetch umożliwia oddzielenie procesu pobierania zawartości od jej renderowania. Wykorzystuje wyzwalacze, takie jak idle, aby pobrać zależności wcześniej, co poprawia UX poprzez szybsze ładowanie wcześniej pobranych danych. Przykład: @defer (on interaction; prefetch on idle) { } Bloki Opcjonalne @placeholder – treść tymczasowa, wyświetlana do momentu załadowania zawartości. @defer (when condition) { } @placeholder (minimum 2s) { There will be deferred content. } @loading – treść wyświetlana podczas ładowania zależności. @defer { } @loading (after 100ms; minimum 1s) { Content is loading... } @loading pozwala na zdefiniowanie minimalnego czasu widoczności i opóźnienia przed pojawieniem się loadera. @error – renderowana treść w przypadku niepowodzenia ładowania. @defer (timeout 1s) { } @error { Failed to load the deferred component

Error: {{ $error.message }}

} Blok @error oferuje opcję ustalenia limitu czasu ładowania (timeout), a zmienna $error zawiera szczegóły błędu. Sygnały nareszcie w stable Sygnały to funkcja, która pojawiła się w Angularze 16 w ramach eksperymentu, a teraz została uznana za stabilny element frameworka. Dzięki sygnałom, możliwe jest wywoływanie Change Detection jedynie dla jednego komponentu, co może znacząco zwiększyć wydajność aplikacji. Przykładem jest lokalne Change Detection, które ogranicza działanie tylko do komponentu, który faktycznie potrzebuje aktualizacji. Aby to zadziałało, wszystkie komponenty muszą mieć strategię OnPush. Przykładem nowości w Angularze 17 jest zmiana w funkcji defaultEquals, która teraz opiera się na Object.is(). Oznacza to, że zmodyfikowany obiekt bez zmiany referencji nie wywoła powiadomienia sygnałów o zmianie, co poprawia wydajność, ale wymaga dokładnego zrozumienia tego mechanizmu. Więcej napisaliśmy w naszym artykule o Angular Signals. Ulepszenia w SSR – Server-Side Rendering Server-side rendering (SSR) staje się coraz ważniejszym elementem Angulara. W Angularze 17 zespół wprowadził dalsze ulepszenia, w tym wyjście funkcji non-destructive hydration z fazy developer preview. Non-destructive hydration pozwala na podłączenie możliwości aplikacji SPA bez niszczenia drzewa DOM wyrenderowanego przez serwer. W praktyce oznacza to bardziej optymalne ładowanie stron, bez konieczności ponownego renderowania całego widoku. W przyszłości planowane jest również wprowadzenie partial hydration, które pozwoli na renderowanie tylko wybranych fragmentów strony po stronie serwera, podczas gdy reszta aplikacji będzie ładowana dynamicznie po stronie klienta. Dzięki temu możliwe będzie pełne wykorzystanie deferred loading w połączeniu z SSR, co znacząco wpłynie na czas ładowania aplikacji. Lepsze Budowanie Aplikacji z esbuild Angular 17 przynosi również znaczące usprawnienia w procesie budowania aplikacji. Dzięki esbuild, nowy builder obsługuje nie tylko aplikacje przeglądarkowe, ale również te korzystające z SSR oraz prerenderingu. Ujednolicony proces budowania eliminuje różnice wynikające z używania różnych narzędzi do kompilacji, co upraszcza zarządzanie projektem. Lazy-loading Animacji W nowej wersji frameworka wprowadzono lazy-loading animacji, co oznacza, że kod odpowiedzialny za animacje nie będzie ładowany od razu podczas startu aplikacji, lecz dopiero wtedy, gdy faktycznie będzie potrzebny. Dzięki temu zmniejszamy początkową wagę paczki nawet o 60 kB. Aby włączyć lazy-loading dla animacji, wystarczy zastąpić provideAnimations() funkcją provideAnimationsAsync() w sekcji providers: import { provideAnimationsAsync } from "@angular/platform-browser/animations/async"; bootstrapApplication(AppComponent, { providers: [ provideAnimationsAsync(), provideRouter(routes) ] }); Wsparcie dla View Transition API Angular 17 wprowadza także nowość w postaci View Transition API, które umożliwia tworzenie płynnych animacji przejść między różnymi widokami na stronie. Dzięki temu API możemy z łatwością tworzyć animacje pomiędzy różnymi stanami aplikacji. Konfiguracja tej funkcji jest bardzo prosta i ogranicza się do dodania withViewTransitions do routingu: import { provideRouter, withViewTransitions } from '@angular/router'; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes, withViewTransitions()) ] }); Inne Ważne Zmiany Warto również wspomnieć o innych nowościach, które pojawiły się w Angularze 17: Nowe aplikacje są domyślnie standalone i korzystają z Vite jako systemu budowania. Zakończono wsparcie dla Node 16 – minimalną wspieraną wersją jest teraz Node 18.13. Najniższa wspierana wersja TypeScripta to 5.2. Wprowadzono możliwość dodania styleUrl do dekoratora @Component, co pozwala na łatwiejsze zarządzanie stylami w komponentach. Angular DevTools zostały wzbogacone o funkcję przeglądania hierarchii injectorów, co ułatwia debugowanie. Podsumowanie nowości w Angular 17 Angular 17 przynosi wiele nowości i usprawnień, które znacząco wpłyną na sposób pracy z frameworkiem. Nowe mechanizmy sterowania przepływem, opóźnione ładowanie czy sygnały to tylko niektóre z kluczowych zmian. Migracja do nowego control-flow i pełne wsparcie SSR sprawiają, że Angular staje się jeszcze bardziej efektywny. Obserwuj nas - wkrótce pojawi się artykuł o zmianach wprowadzonych w Angular 18 oraz 19.