Nowości w platformach JavaScript (maj 2024 r.)

Katie Hempenius
Katie Hempenius
X
Addy Osmani

Trudno jest nadążyć za wszystkimi nowościami w ramkach JavaScript. Ten dokument zawiera krótkie podsumowanie ostatnich wydarzeń w ekosystemie frameworków JavaScripta z ostatniego roku. Aby dowiedzieć się więcej o niektórych z tych tematów, obejrzyj wykład Navigating the JavaScript Frameworks Ecosystem z tegorocznego wydarzenia Google I/O.

Wykres porównujący funkcje frameworka

Jak widać na wykresie, platformy JavaScript mają podobne funkcje i architektury. Obejmują one architekturę opartą na komponentach, routing oparty na plikach i obsługę nowoczesnego SSR. Ta konwergencja pokazuje dojrzałość i ewolucję ekosystemu, ponieważ frameworki uczą się od siebie nawzajem i przejmują sprawdzone metody.

Jednocześnie wiele ostatnich trendów (takich jak komponenty serwera i różne podejścia do szczegółowej reaktywności) nadal odróżnia poszczególne frameworki. Aby ułatwić Ci zrozumienie tych trendów, omówimy je osobno w ramach poszczególnych platform.

Angular

Ostatnie wersje Angulara zawierały wiele istotnych zmian, w tym sygnały, opóźnione wyświetlenia, NgOptimizedImage, nieniszczące nawilżanie i częściowe nawilżanie. Oto niektóre z nich:

  • Sygnały: sygnały to podejście stosowane przez wiele frameworków (w tym obecnie Angular) do śledzenia stanu w aplikacji. Angular Signals może poprawić wydajność w czasie działania, w tym czas interakcji do kolejnego wyrenderowania (INP), przez zmniejszenie liczby obliczeń, które muszą być wykonywane podczas wykrywania zmian.
  • Widok z możliwością odroczenia: umożliwia odroczenie wczytywania określonych komponentów, dyrektyw i rury. Możesz na przykład opóźnić wczytywanie zależności do momentu, gdy treść znajdzie się w widoku lub gdy główny wątek nie jest zajęty.
  • NgOptimizedImage NgOptimizedImage to komponent obrazu dla Angulara, który automatyzuje stosowanie sprawdzonych metod ładowania obrazów.
  • Niedestruktywne nawilżanie: niedestruktywne nawilżanie rozwiązuje problem mignięcia, który występuje, gdy DOM aplikacji Angular renderowanych po stronie serwera jest ponownie tworzony po stronie klienta.
  • Częściowe nawodnienie: zespół Angular wkrótce udostępni deweloperom podgląd częściowego nawodnienia. W przypadku częściowego nawodnienia przeglądarka domyślnie nie wczytuje żadnego kodu JavaScriptu strony podczas jej renderowania. Zamiast tego określone części strony są aktualizowane, gdy użytkownik wchodzi z nią w interakcję.

Astro

Astro, nowoczesny kreator stron statycznych, wzbudza zainteresowanie dzięki innowacyjnemu podejściu do tworzenia stron internetowych. Z myślą o wydajności i wygodzie deweloperów Astro opublikowało kilka ciekawych funkcji i aktualizacji:

  • Astro Islands: Astro Islands umożliwia programistom tworzenie interaktywnych komponentów interfejsu użytkownika, które są odseparowane od reszty strony. Umożliwia to wydajne aktualizacje i optymalną wydajność.
  • Renderowanie hybrydowe: Astro obsługuje teraz renderowanie hybrydowe, które łączy zalety generowania statycznej witryny i renderowania po stronie serwera, zapewniając większą elastyczność.
  • Komponenty Image i Picture: Astro wprowadziło nowe komponenty Image i Picture, które upraszczają obsługę obrazów i zapewniają automatyczną optymalizację.
  • Obsługa przejść między widokami: Astro oferuje wbudowane wsparcie dla interfejsu API View Transitions, co umożliwia płynne przejścia między widokami.
  • Pasek narzędzi dewelopera Astro: pasek narzędzi dewelopera Astro zawiera potężny zestaw narzędzi do debugowania i optymalizowania aplikacji Astro.

React

W zeszłym roku wydanie komponentów serwera React wprowadziło nowe podejście do komponentów React. Od tamtej pory zespół React pracował nad różnymi nowymi funkcjami, w tym kompilatorem React i funkcjami akcji serwera, a także nad:

  • Składniki serwera: komponenty serwera React to komponenty, które pobierają dane i są renderowane na serwerze, zanim zostaną przesłane do klienta. Przenosi to zadanie renderowania na serwer i zmniejsza ilość kodu, który musi zostać wysłany do klienta.
  • Kompilator React: kompilator React to compiler, który może automatycznie zapamiętywać komponenty. Zwiększa to wydajność, ponieważ zmniejsza liczbę niepotrzebnych ponownych renderowań. Zespół Reacta poinformował, że deweloperzy będą mogli korzystać z kompilatora React bez wprowadzania zmian w kodzie.
  • Działania serwera: działania serwera umożliwiają komunikację między klientem a serwerem. Dzięki działaniom serwera możesz definiować funkcje po stronie serwera, które można wywoływać bezpośrednio z komponentów React, co eliminuje potrzebę ręcznego wywoływania interfejsów API i złożonego zarządzania stanem. Może to być szczególnie przydatne w przypadku takich operacji jak mutacje danych i przesyłanie formularzy.
  • Ładowanie zasobów: React pracował nad interfejsami API deklaratywnymi do wstępnego wczytywania i ładowania zasobów, takich jak skrypty, style, czcionki i obrazy.
  • Renderowanie poza ekranem: React pracował też nad renderowaniem poza ekranem. Renderowanie poza ekranem to nadchodząca funkcja w React, która umożliwia renderowanie ekranów w tle bez dodatkowego obciążenia wydajności. Możesz traktować ją jako wersję właściwości CSS content-visibility, która działa nie tylko w przypadku elementów DOM, ale też komponentów React.

Remiks

Remix, czyli pełny framework internetowy, zyskuje popularność wśród społeczności programistów. Remix skupia się na podstawach internetu i ułatwieniach dla deweloperów. Wprowadziliśmy kilka istotnych zmian:

  • Wersja Remix 2.0: we wrześniu 2023 r. została wydana wersja Remix 2.0, która wprowadziła znaczące ulepszenia i nowe funkcje.
  • Stabilna obsługa Vite: Remix oferuje teraz stabilną obsługę Vite, szybkiego i lekkiego narzędzia do kompilacji, które zapewnia szybsze kompilacje i lepszą wydajność.
  • Tryb SPA: Remix wprowadził tryb SPA, który umożliwia tworzenie witryn czysto statycznych bez konieczności korzystania z serwera JavaScript w produkcji. Dzięki temu deweloperzy mogą korzystać z potężnych funkcji Remixa, takich jak routing oparty na plikach czy automatyczne dzielenie kodu, zachowując przy tym prostotę wdrażania witryn statycznych.

Next.js

W maju 2023 r. wydaliśmy wersję Next.js 13.4, która wprowadziła stabilną obsługę komponentów serwera React, przesyłania strumieniowego i Suspense. Od tego czasu Next.js stale rozwija obsługę nowych interfejsów API React (np. działań serwera) i ulepsza środowisko deweloperów dzięki inicjatywom takim jak Turbopack. Inne ważne informacje:

  • App Router: App Router, który stał się stabilny w wersji Next.js 13.4, to nowy sposób strukturyzowania i zarządzania kierowaniem w aplikacjach Next.js. App Router jest wymagany do korzystania z nowych funkcji Next.js, takich jak wspólne układy i rutowanie zagnieżdżone, a także nowych interfejsów React, takich jak komponenty serwera React, zawieszenie i działania serwera w aplikacji Next.js.

  • Turbopack: obecnie eksperymentalne podejście do renderowania strony, które opiera się na interfejsie Suspense API w bibliotece React. Częściowe wyrenderowanie wstępnie renderuje stronę za pomocą statycznej powłoki ładowania. Jednak powłoka pozostawia „luki” na treści dynamiczne na stronie, które są wczytywane asynchronicznie. Daje to korzyści związane z wydajnością strony statycznej, która może być przechowywana w pamięci podręcznej, a jednocześnie umożliwia uwzględnianie danych dynamicznych w zawartości strony.

Vue

Najnowsza wersja Vue, 3.4, zawiera wiele ulepszeń wydajności. Zespół Vue pracuje też obecnie nad Vue Vapor, który również ma na celu poprawę wydajności. Oto kilka najważniejszych informacji o tym, co dzieje się w tej przestrzeni:

  • Vue 3.4: wersja na żywo: „w tym wydaniu znajdziesz całkowicie przebudowany parsujący, który jest dwa razy szybszy, szybszą kompilację SFC oraz przebudowany system reaktywności, który zwiększa wydajność ponownego przetwarzania”.
  • Tryb Vue Vapor: zespół Vue pracuje nad trybem Vapor, czyli opcjonalną strategią kompilacji ukierunkowaną na wydajność, która działa z elementami Vue Single File Components. Tryb parowania generuje kod, który jest wydajniejszy niż kod generowany obecnie przez kompilator Vue. Dodatkowo korzystanie z trybu Vapor ze wszystkimi komponentami eliminuje konieczność korzystania z DOM wirtualnego Vue (co zmniejsza rozmiar pakietu).
  • Vue 2 osiąga koniec okresu wsparcia: koniec okresu wsparcia dla Vue 2 nastąpił 31 grudnia 2023 r. Vue 2 jest jednak nadal dość szeroko używane: około 50% pobrań pakietu npm Vue dotyczy Vue 2.

Nuxt

Zespół Nuxt blisko jest do wydania Nuxt 4. Oprócz częstych wydań frameworku Nuxt w ciągu ostatniego roku ekosystem modułów Nuxt rozrósł się do prawie 220 modułów. Ostatnie zmiany w tej dziedzinie to m.in.:

Ciało stałe

Zespół Solid pracuje nad stabilną wersją 1.0 meta-frameworku SolidStart. SolidStart oferuje precyzyjną reakcję, routing izomorfizyczny i obsługę różnych trybów renderowania. Najważniejsze informacje:

  • Szczegółowa reaktywność: system reakcji Solid umożliwia dokładne aktualizacje i optymalną wydajność, co pozwala na wydajne renderowanie i zarządzanie stanem.
  • Izomorficzne kierowanie: SolidStart zapewnia ujednolicone podejście do kierowania, pozwalając deweloperom definiować trasy, które działają płynnie zarówno na kliencie, jak i na serwerze.
  • Elastyczne tryby renderowania: SolidStart obsługuje różne tryby renderowania, w tym renderowanie po stronie serwera, generowanie statycznej witryny i renderowanie po stronie klienta, co daje deweloperom możliwość wyboru najlepszego podejścia do ich aplikacji.

Svelte

W ciągu ostatniego roku zespół Svelte pracował nad nadchodzącą wersją Svelte 5, która będzie znacząca. Inne ważne informacje:

  • Wkrótce pojawi się Svelte 5: oprócz „przepisania kompilatora i środowiska wykonawczego Svelte” Svelte 5 wprowadza też pojęcie runów.
  • Ogłoszenie funkcji Runes: Runes to funkcja, która pojawi się w nadchodzącej wersji Svelte 5. „Runy zapewniają uniwersalną, precyzyjną reakcję... Dzięki runom reakcja wykracza poza granice plików .svelte... W Svelte 5 reaktywność jest obsługiwana przez sygnały, ale [w odróżnieniu od innych frameworków] w Svelte 5 sygnały są szczegółem implementacji, a nie elementem, z którym użytkownik wchodzi w bezpośrednią interakcję”.
  • Wydanie SvelteKit 2: SvelteKit to meta-framework dla Svelte. Funkcje dostępne w tej wersji to m.in. routing płytki i obsługa Vite 5.

Chrome Aurora

Chrome Aurora to zespół Google, który współpracuje z różnymi frameworkami internetowymi open source, aby zwiększać wygodę korzystania z internetu, zwłaszcza pod względem wydajności. Oto niektóre inicjatywy, w których uczestniczyliśmy w ciągu ostatniego roku:

Podsumowanie

Ekosystem frameworków JavaScripta rozwija się bardzo szybko, a każdy framework wprowadza własne innowacje i ulepszenia. Niezależnie od tego, czy interesują Cię najnowsze funkcje popularnych frameworków takich jak Angular, React czy Vue, czy też chcesz poznać nowsze opcje, takie jak Astro, Remix czy Solid, zawsze znajdziesz wiele ciekawych nowości, które warto śledzić.

Jako deweloperzy powinniśmy być na bieżąco z tymi nowościami, aby podejmować świadome decyzje dotyczące wyboru frameworka do naszych projektów. Dzięki znajomości mocnych stron i unikalnych funkcji poszczególnych frameworków możemy wybrać ten, który najlepiej odpowiada wymaganiom projektu i preferencjom programistycznym.

Mamy nadzieję, że ten przegląd pomoże Ci poznać obecny stan frameworków JavaScript. Aby dowiedzieć się więcej o tematach poruszanych w tym poście, obejrzyj towarzyszący mu wykład z Google I/O. Życzymy owocnego kodowania!