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

Katie Hempenius

Addy Osmani

Ciężko jest nadążyć za wszystkim, co dzieje się w przypadku struktur JavaScript. Ten dokument zawiera krótkie podsumowanie ostatnich zmian w ekosystemie platform JavaScript w ciągu ostatniego roku. Więcej informacji na ten temat znajdziesz w odpowiednim prezentacji Using the JavaScript Frameworks Ecosystem (Poruszanie się po ekosystemie platform JavaScript) z tegorocznej konferencji Google I/O.

Trendy i konwergencja platformy

Jak widać na wykresie, platformy JavaScript scalają się w wielu podobnych funkcjach i architekturach. Obejmują one architekturę opartą na komponentach, routing na podstawie plików i nowoczesną obsługę SSR. Ten zbieżność świadczy o dojrzałości i ewolucji ekosystemu, ponieważ platformy uczą się od siebie i stosują sprawdzone metody.

Jednocześnie niektóre najnowsze trendy (np. komponenty serwerów i różne podejścia do szczegółowej reaktywności) wyróżniają poszczególne platformy. Aby lepiej zrozumieć te trendy, analizujemy je stopniowo.

Angular

W ostatnich wersjach Angular wprowadzono wiele istotnych zmian, w tym sygnały, widoki z możliwością odroczenia, NgOptimziedImage, nawodnienie nieszkodliwe i częściowe nawodnienie. Najważniejsze funkcje:

• Sygnały: sygnały to metoda stosowana przez wiele platform (w tym obecnie Angular) do śledzenia stanu w aplikacji. Sygnały Angular mogą poprawić wydajność środowiska wykonawczego, w tym interakcje przy następnym wyrenderowaniu (INP), przez zmniejszenie liczby obliczeń, które muszą być wykonane podczas wykrywania zmian.
• Widoki z możliwością odroczenia: widoki odroczone umożliwiają opóźnienie wczytywania konkretnych komponentów, dyrektyw i pionów. Możesz na przykład opóźnić wczytywanie zależności do momentu, gdy treść znajdzie się w widocznym obszarze lub do momentu, gdy wątek główny będzie nieaktywny.
• NgOptimizedImage: to komponent obrazu dla Angular, który automatyzuje wdrażanie sprawdzonych metod ładowania obrazów.
• Nawodnienie nienaruszające: nieniszczące wody niwelują migotanie, które pojawiało się po odtworzeniu modelu DOM aplikacji Angular renderowanych po stronie serwera po stronie klienta.
• Częściowe nawodnienie: zespół Angular wkrótce opublikuje wersję deweloperską częściowego nawodnienia. W przypadku częściowego nawodnienia domyślnie przeglądarka nie wczytuje żadnego kodu JavaScript strony podczas jej renderowania. Zamiast tego określone części strony są nawodnione, gdy użytkownik wejdzie z nimi w interakcję.

Astro

Astro, nowoczesny, statyczny kreator witryn, zyskał popularność dzięki innowacyjnemu podejściu do tworzenia stron internetowych. Koncentrując się na wydajności i łatwości użytkowania, firma Astro udostępniła kilka ciekawych funkcji i aktualizacji:

• Wyspy astrologiczne: wyspy astro umożliwiają programistom tworzenie interaktywnych komponentów interfejsu, które są odizolowane od reszty strony. Zapewnia to skuteczne aktualizacje i optymalną wydajność.
• Renderowanie hybrydowe: Astro obsługuje teraz renderowanie hybrydowe, łącząc w sobie zalety generowania witryn statycznych i renderowania po stronie serwera, aby zapewnić większą elastyczność.
• Komponenty obraz i obraz: firma Astro wprowadziła nowe komponenty „Obraz” i „Obraz”, które upraszczają obsługę obrazów i zapewniają automatyczną optymalizację.
• Wyświetlanie obsługi przejść: Astro oferuje wbudowaną obsługę interfejsu View Transitions API, która umożliwia płynne przenoszenie stron.
• Astro Dev Toolbar: pasek narzędzi Astro Dev zawiera zaawansowany zestaw narzędzi do debugowania i optymalizacji aplikacji Astro.

Dodaj reakcję

W zeszłym roku podczas publikowania komponentów serwera React wprowadziliśmy nowe podejście do komponentów React. Od tego czasu zespół React pracował nad różnymi nowymi funkcjami, w tym nad kompilatorem React Compiler i działaniami serwera, a także nad:

• Komponenty serwera: komponenty serwera React to komponenty, które pobierają dane i są renderowane na serwerze przed przesłaniem ich strumieniowo do klienta. Renderowanie przenosi pracę na serwer i zmniejsza ilość kodu, który trzeba przesłać do klienta.
• Kompilator React: to kompilator, który może automatycznie zapamiętywać komponenty. Poprawia to wydajność przez zmniejszenie liczby zbędnych ponownych renderowania. Zespół React twierdzi, że deweloperzy będą mogli wdrożyć kompilator React bez wprowadzania żadnych zmian w kodzie.
• Działania serwer: działania serwer umożliwiają komunikację między serwerami. Działania serwera pozwalają zdefiniować funkcje po stronie serwera, które można wywoływać bezpośrednio z komponentów React, co eliminuje konieczność ręcznego wywoływania interfejsu API i skomplikowanego zarządzania stanem. Jest to szczególnie przydatne przy mutacjach danych i przesyłaniu formularzy.
• Wczytywanie zasobów: React pracuje nad deklaratywnymi interfejsami API do wstępnego wczytywania i wczytywania zasobów, takich jak skrypty, style, czcionki i obrazy.
• Renderowanie poza ekranem: zajęliśmy się również nad renderowaniem poza ekranem. Renderowanie poza ekranem to „nadchodząca funkcja React w zakresie renderowania ekranów w tle, która nie wymaga dodatkowego nakładu pracy. Możesz ją traktować jako wersję właściwości CSS content-visibility, która działa nie tylko z elementami DOM, ale też z komponentami React”.

Remiksowanie

Remix, czyli kompleksowa platforma internetowa, zyskuje popularność w społeczności programistów. Skupiliśmy się na podstawach tworzenia stron internetowych i większej wygodzie programistów, dlatego zespół Remix wprowadził kilka ważnych zmian:

• Remiks 2.0: wersja Remix 2.0, opublikowana we wrześniu 2023 r., zawiera istotne ulepszenia i nowe funkcje.
• Stabilna obsługa Vite: funkcja Remix zapewnia teraz stabilną obsługę Vite, szybkiego i lekkiego narzędzia do kompilacji. Zapewnia to szybsze kompilacje i większą wydajność.
• Tryb SPA: w remiksach wprowadziliśmy tryb SA, który umożliwia tworzenie wyłącznie statycznych witryn bez konieczności używania serwera JavaScript w środowisku produkcyjnym. Pozwala to programistom korzystać z zaawansowanych funkcji Remix, takich jak routing na podstawie plików czy automatyczne dzielenie kodu, przy jednoczesnym zachowaniu prostoty statycznego wdrażania witryny.

Next.js

Szczególnie warte uwagi było wydanie Next.js 13.4 w maju 2023 r., ponieważ wprowadziło stabilną obsługę komponentów serwera React, strumieniowania i napięcia. Od tego czasu Next.js będzie obsługiwać nowe interfejsy React API (np. Server Actions) oraz ulepszać środowisko programistyczne za pomocą takich inicjatyw jak Turbopack. Inne ważne informacje:

• router aplikacji: router aplikacji, który stał się stabilny w wersji Next.js 13.4, to nowy sposób tworzenia struktury routingu w aplikacjach Next.js i zarządzania nimi. Korzystanie z routera App Router jest wymagane do korzystania z nowych funkcji Next.js, takich jak udostępnione układy i zagnieżdżony routing, a także nowych interfejsów API React, takich jak komponenty serwera React, Suspense i działania serwera w aplikacji Next.js.

• Turbopack: obecnie eksperymentalne) podejście do renderowania stron, które jest oparte na interfejsie Suspense API firmy React. W ramach renderowania wstępnego strona jest renderowana za pomocą statycznej powłoki ładowania. Powłoka pozostawia jednak „dziury” dla zawartości dynamicznej na stronie, która jest wczytywana asynchronicznie. Zwiększa to wydajność strony statycznej, którą można zapisać w pamięci podręcznej, a jednocześnie umożliwia uwzględnienie danych dynamicznych w treści strony.

Vue

Najnowsza wersja Vue, Vue 3.4, zawiera szereg ulepszeń w zakresie wydajności. Vue pracuje też nad Vue Vapor, który jest również skoncentrowany na wydajności. Oto kilka najważniejszych informacji o tym, co się dzieje w tym pokoju:

• Wprowadzono wersję 3.4: funkcje obejmują „całkowicie przepisany parser, który jest 2 razy szybszy, szybsza kompilacja SFC i zrefaktoryzowany system reaktywności, który poprawia efektywność ponownego przetwarzania”.
• Tryb Vue Vapor: Vue korzysta z trybu Vapor, czyli opcjonalnej strategii kompilacji ukierunkowanej na wydajność, która działa z pojedynczymi komponentami plików Vue. Tryb Vapor generuje kod o większej wydajności niż kod obecnie generowany przez Vue Compiler. Dodatkowo użycie trybu Vapor ze wszystkimi komponentami eliminuje potrzebę korzystania z Vue Virtual DOM (co zmniejsza rozmiar pakietu).
• Vue 2 zbliża się do końca cyklu życia usługi Vue 2: koniec cyklu życia gry Vue 2 przypada na 31 grudnia 2023 r. Metoda Vue 2 jest jednak wciąż powszechnie używana – około 50% pobieranych pakietów Vue npm dotyczy Vue 2.

Nuxt

Nuxt zbliża się do premiery Nuxt 4. Oprócz częstych udostępniania platformy Nuxt w ciągu ostatniego roku ekosystem modułów Nuxt rozrósł się do prawie 220 modułów. Najnowsze ulepszenia w tym zakresie to m.in.:

• Wersje Nuxt 3.x: Nuxt zazwyczaj wysyła nowe pomniejsze wersje co miesiąc. Najważniejsze nowości w tych wersjach to obsługa wersji Vite 5, stron tylko z serwerem i klienta, obsługa środowiska Node.js po stronie klienta oraz natywnych strumieni danych z sieci. * Moduły Nuxt: najważniejsze nowości w ekosystemie Nuxt Modules to wydanie nowego modułu nuxt/fonts oraz wersje 1.0 nuxt/image i Nuxt DevTools. Nowe wersje modułów będą obejmowały nuxt/scripts, nuxt/hints, nuxt/a11y i nuxt/auth.
• Komponenty serwera (komponenty wysp): Nuxt cały czas rozszerza obsługę komponentów serwera (funkcja jest obecnie w fazie eksperymentalnej). W Nuxt komponenty renderowane przez serwer mogą być używane w witrynach statycznych, co pozwala zastosować architekturę wysp.

Ciało stałe

Zespół Solid pracuje nad stabilną wersją 1.0 swojej metaplatformowej wersji SolidStart. SolidStart oferuje szczegółową reaktywność, routing izomorficzny i obsługę różnych trybów renderowania. Najważniejsze funkcje:

• Szczegółowa reaktywność: system reaktywności aplikacji Solid umożliwia precyzyjne aktualizacje i optymalną wydajność, umożliwiając wydajne renderowanie i zarządzanie stanem.
• Routing izomorficzny: SolidStart zapewnia ujednolicone podejście do routingu, umożliwiając programistom definiowanie tras, które płynnie działają zarówno po stronie klienta, 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, dzięki czemu deweloperzy mogą wybrać najlepsze podejście do swoich aplikacji.

Srebrny

W zeszłym roku zespół Svelte koncentrował się na nadchodzącej wersji Svelte 5, która będzie miała duże znaczenie. Inne ważne informacje:

• Już wkrótce pojawi się aplikacja Svelte 5: oprócz przepisania kompilatora i środowiska wykonawczego Svelte, w Svelte 5 wprowadziliśmy również koncepcję runów.
• Ogłoszenie runów: runy to nadchodząca funkcja w Svelte 5. "Uruchomienia dają uniwersalną, szczegółową reakcję... W przypadku runów reaktywność wykracza poza granice plików .svelte... Reaktywność w Svelte 5 bazuje na sygnałach. Jednak [w przeciwieństwie do innych platform] w wersji Svelte 5 sygnały są ukrytymi szczegółami wdrożenia, a nie coś, z którym wchodzisz w interakcję bezpośrednio”.
• Wprowadzono SvelteKit 2: SvelteKit to metastruktura platformy Svelte. Funkcje dostępne w tej wersji obejmują routing z płytką i obsługę Vite 5.

Zorza polarna w Chrome

Chrome Aurora to zespół w Google, który współpracuje z różnymi platformami internetowymi typu open source, aby zwiększać wygodę użytkowników, a zwłaszcza wydajność w internecie. Oto niektóre z inicjatyw, w których pracowaliśmy w ubiegłym roku:

• Obrazy (next/image, NgOptimizedImage i nuxt/image)
• narzędzia do obsługi czcionek (next/font, nuxt/fonts i unjs/fontaine (wtyczka Vite));
• Wczytuję skrypt (next/script i nuxt/scripts)
• Ładowanie skryptów innych firm (następne/zewnętrzne, nuxt/innych firm oraz YouTube i komponenty Map Google firmy Angular)
• Renderowanie: (Angular SSR / hydration)

Podsumowanie

Ekosystem platformy JavaScript wciąż ewoluuje w szybkim tempie, a każda z nich ma własny zestaw innowacji i udoskonaleń. Niezależnie od tego, czy interesują Cię najnowsze funkcje znane Ci platform, np. Angular, React czy Vue, czy też chcesz poznać nowsze rozwiązania, takie jak Astro, Remix czy Solid, na pewno znajdziesz coś dla siebie.

Informacja o postępach pozwala nam podejmować przemyślane decyzje przy ustalaniu struktury naszych projektów. Znając mocne strony i unikalne funkcje każdej platformy, możemy wybrać tę, która najlepiej pasuje do naszych wymagań projektu i preferencji programistycznych.

Mamy nadzieję, że dzięki tym omówieniu poznasz bieżący stan platform JavaScript. Aby zgłębić tematy omówione w tym poście na blogu, zapoznaj się z towarzyszącą prezentacją z konferencji Google I/O. Miłego kodowania!