[NEW] Search for a job anonymously — check the details
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
Jul 11

N-iX otworzyła nowe biuro w Warszawie

Ukraińska firma IT N-iX otworzyła nowe biuro w Warszawie. Funkcjonuje ono jako hub i jest przewidziane na 30–40 stanowisk pracy.
0
May 6

TikTok ukarany przez UE grzywną w wysokości 530 mln euro. Grozi zawieszenie transferów danych do Chin

Unia Europejska nałożyła na TikToka karę w wysokości 530 mln euro za naruszenia w zakresie ochrony danych użytkowników — informuje agencja Reuters, powołując się na irlandzki urząd ochrony danych osobowych (DPC). Regulator ostrzega też, że jeśli firma nie dostosuje się do unijnego prawa w ciągu sześciu miesięcy, transfer danych do Chin zostanie zawieszony.
0
Feb 19

Ceny SSD mogą spadać do połowy 2025 roku – producenci ograniczają produkcję

Na rynku pamięci NAND i dysków SSD utrzymuje się nadwyżka podaży, co zmusza producentów do redukcji produkcji. Analitycy przewidują, że doprowadzi to do dalszego spadku cen w nadchodzących miesiącach – informuje The Register.
0

This site uses cookies to offer you a better browsing experience.

Find out more on how we use cookies and how to change cookie preferences in our Cookies Policy.

Customize
Save Accept all cookies