[NEW] Szukaj pracy anonimowo — sprawdź szczegóły
Close
Angular v20: stabilizacja reactivity, nowe API i pożegnanie ze strukturalnymi dyrektywami

Angular v20: stabilizacja reactivity, nowe API i pożegnanie ze strukturalnymi dyrektywami

Zespół Angular ogłosił premierę wersji 20, skupiając się na stabilizacji istniejących funkcji, wsparciu dla GenAI, usprawnieniu debugowania oraz dalszym odchodzeniu od Zone.js. Wśród najważniejszych zmian znalazły się nowe eksperymentalne API, rozbudowane wsparcie dla renderowania po stronie serwera oraz aktualizacje stylu i diagnostyki, – informuje Angular Blog.

Stabilne Signals, nowe API i koniec dla *ngIf

Zespół Angular sfinalizował prace nad systemem reaktywności opartym na Signals, który od wersji 16 był dostępny w trybie preview. Obecnie funkcje signal, computed, input oraz view queries uzyskały status stabilny, a dołączyły do nich effect, linkedSignal i toSignal.

Wersja 20 wprowadza również eksperymentalne API oparte na Signals do zarządzania stanem asynchronicznym: resource oraz httpResource. Przykład wykorzystania resource do pobierania danych użytkownika:

const userId: Signal<string> = getUserId();
const userResource = resource({
  params: () => ({id: userId()}),
  loader: ({request, abortSignal}): Promise<User> => {
    return fetch(`users/${request.id}`, {signal: abortSignal});
  },
});

Równolegle wprowadzono nową wersję httpResource, pozwalającą na bezpośrednie wykorzystanie sygnałów w szablonach:

@Component({
  template: `{{ userResource.value() | json }}`
})
class UserProfile {
  userId = signal(1);
  userResource = httpResource<User>(() => 
    `https://example.com/v1/users/${this.userId()}`
  );
}

Zespół ogłosił także formalne rozpoczęcie procesu wycofywania dyrektyw strukturalnych *ngIf, *ngFor i *ngSwitch na rzecz nowej składni wprowadzonej w Angular 17. Przejście na nowy system wspiera komenda:

ng generate @angular/core:control-flow

Zoneless, SSR i ulepszenia DevTools

W Angular v20 tryb zoneless uzyskał status developer preview. Dzięki provideZonelessChangeDetection() i nowemu systemowi obsługi błędów w Node.js oraz przeglądarce możliwe jest działanie bez zależności od biblioteki Zone.js:

bootstrapApplication(AppComponent, {providers: [
  provideZonelessChangeDetection(),
  provideBrowserGlobalErrorListeners()
]});

Wydanie zawiera także stabilną wersję incremental hydration, umożliwiającą stopniowe pobieranie i aktywację komponentów:

@defer (hydrate on viewport) {
  <shopping-cart/>
}

Dodano także obsługę konfiguracji trybu renderowania na poziomie trasy (route-level rendering mode). Dla przykładu:

export const routeConfig: ServerRoute = [
  { path: '/login', mode: RenderMode.Server },
  { path: '/dashboard', mode: RenderMode.Client },
  {
    path: '/product/:id',
    mode: RenderMode.Prerender,
    async getPrerenderParams() {
      const dataService = inject(ProductService);
      const ids = await dataService.getIds();
      return ids.map(id => ({ id }));
    }
  }
];

Zespół Angular wspólnie z Firebase App Hosting przygotował narzędzia do łatwego wdrażania aplikacji SSR, SSG i CSR w chmurze Google Cloud.

Debugowanie, styl i wsparcie dla GenAI

W Angular v20 dodano wsparcie dla profilowania aplikacji bezpośrednio w Chrome DevTools dzięki integracji z Performance Panel. Po uruchomieniu ng.enableProfiling() możliwe jest śledzenie cykli renderowania, detekcji zmian i uruchamiania zdarzeń na wspólnej osi czasu z kodem JavaScript.

Zespół wprowadził również:

  • aktualizacje stylu (brak domyślnych sufiksów klas i plików),
  • pełne wsparcie typów i diagnostyki dla @HostBinding i @HostListener,
  • nowe funkcje do dynamicznego tworzenia komponentów (createComponent, inputBinding, outputBinding),
  • rozszerzenia składni szablonów: **, in, literały szablonowe.

Wprowadzono także eksperymentalne wsparcie dla testów w vitest:

npm i vitest jsdom --save-dev

Wspierając rozwój aplikacji AI, Angular udostępnia plik llms.txt oraz przewodniki na angular.dev/ai. Celem jest zapewnienie zgodności kodu generowanego przez LLM z najnowszą składnią Angulara.

Na zakończenie zespół ogłosił konkurs na oficjalną maskotkę Angulara — propozycje obejmują postać w kształcie logo, a także warianty inspirowane rybą głębinową (anglerfish). Udział w głosowaniu i zgłaszaniu nazw możliwy jest przez formularz RFC.

Avatar
Maj 27

WhatsApp Web zyska nowy scentralizowany panel multimediów

Meta pracuje nad funkcją, która umożliwi użytkownikom WhatsApp Web przeglądanie i zarządzanie wszystkimi przesłanymi plikami multimedialnymi w jednym miejscu, bez potrzeby przeszukiwania pojedynczych rozmów, – informuje WABetaInfo.
0
Lut 9, 2024

Zwolnienia w branży IT na świecie. Z czym to jest związane i czy warto się martwić

W styczniu 2024 roku niemal co tydzień słyszeliśmy o redukcjach w firmach IT. Łącznie w sektorze technologicznym zwolniono prawie 30 tys. specjalistów, w tym wielu programistów.Redakcja DOU Polska postara się zbadać, co dzieje się na światowym rynku IT i kto powinien być najbardziej zaniepokojony.
0
Maj 3, 2023

IBM już wstrzymał zatrudnianie na stanowiska, które mogą zostać zastąpione przez sztuczną inteligencję

Chodzi o około 7 800 miejsc pracy.
0

Ta strona używa plików cookie, aby zapewnić Ci lepsze wrażenia podczas przeglądania.

Dowiedz się więcej o tym, jak używamy plików cookie i jak zmienić preferencje dotyczące plików cookie w naszej Polityka plików cookie.

Zmień ustawienia
Zapisz Akceptuj wszystkie cookies