Przyszłość jest dzisiaj, czyli Next.js 13 | Frontend Weekly vol. 110

1. Next.js Conf 🚀

Vercel to jedna z najlepiej dofinansowanych firm zbudowanych wokół otwartoźródłowej technologii. Na przestrzeni ostatnich lat (i 4 rund finansowania), firma zgromadziła na swoim koncie ponad 300 milionów dolarów. Należy przyznać, że pieniądze te zostały dobrze zainwestowane. Next.js stał się właściwie domyślnym rozwiązaniem jeśli chodzi o renderowania Reacta po stronie serwera, a chmura oferowana przez firmę z roku na rok zyskuje coraz więcej sympatyków.

Sukces Next.js przyciągnął też naśladowców. Wśród największych rywali wymienić należy Hydrogen (framework do SSR rozwijany przez Shopify, dedykowany budowaniu sklepów przy użyciu ich platformy) oraz Remix (framework do SSR rozwijany przez twórców react-router). Ten drugi pod względem modelu biznesowego mocno przypomina Next.js. Również jest on rozwijany budowany wokół otwartoźródłowych technologii (rect-router, Remix) i podobnie jak swój konkurent znalazł inwestorów wierzących w jego sukces. Patrząc realistycznie na sytuację należy jednak zauważyć, że zarówno pod względem adopcji jak i funduszy, Next.js od konkurencji dzieli przepaść.

Biorąc pod uwagę popularność i budżety Next.js, nie dziwią oczekiwania jakie narosły wokół Next.js Conf. Jak się okazało, nadzieje pokładane w konferencji zostały spełnione z nawiązką. Oprócz Next.js 13 i zupełnie nowego systemu routingu,  zaprezentowana została alternatywa dla Webpack w postaci Turbopack i sporo więcej.

1.1 Nowy routing w Next.js

O RFC dotyczącym nowego routingu w Next.js informowaliśmy Was kilka miesięcy temu w Frontend Weekly vol. 89 (niestety tylko w języku polskim). Od tego czasu minęło już sporo czasu, do RFC trafiło kilka zmian, a pierwsza wersja nowego routera jest już dostępna w Next.js 13. Z tego powodu, dzisiaj ponownie przyjrzymy się temu tematowi.

Do tej pory komponent Next.js dopasowywał ścieżkę w pasku przeglądarki do odpowiedniego katalogu, a następnie wyświetlał komponent zdefiniowany w pliku index.js. Nowy router zamiast pliku index.js szukał będzie pliku page.js. Największą nowością jest jest fakt, że Next.js znajdzie również wszystkie pliku layout.js znajdujące się w ścieżce katalogów i wyświetli je jako “opakowanie” naszej strony. Co ważne, dane zarówno dla strony jak i wszystkich layout ładowane będą równolegle.

Kolejną nowością jest również pojawienie się plików error.js i loading.js. Te pierwsze wykorzystywane będą, kiedy podczas pobierania danych lub renderowania wystąpił nieoczekiwany błąd. Te drugie wyświetlane będą zanim wszystkie komponenty w poddrzewie zostaną wyrenderowane (pod spodem Next.js wykorzystuje usprawniony w React 18 Suspense).

Fundamentalną zmianą w nowym routingu jest również uczynienie React Server Components domyślnym typem komponentów. Oznacza, że tworząc komponenty uważać musimy na ograniczenia jakie React narzuca przy korzystaniu React Server Components (ze szczególnym uwzględnieniem ograniczeń w mieszaniu ich z Client Components). Oznacza to też, że dopóki nie zaczniemy definiować Client Components, całość naszej aplikacji renderowana będzie po stronie serwera. Zachowanie to powinno sprawić, że paczka kodu JavaScript wysyłana do klienta będzie ekstremalnie mała. Niestety pierwsze testy przeprowadzane przez użytkowników tego nie potwierdzają i aplikacja renderowana w 100% po stronie serwera nadal waży całkiem sporo. W sieci nie natrafiłem na oficjalne potwierdzenie, ale prawdopodobnie spora paczka spowodowana jest problemami wieku dziecięcego Next.js 13.

To jeszcze nie koniec zmian jakie wprowadza nowy routing. Wchodzimy jednak w obszar skomplikowanych funkcjonalności, dlatego wszystkich zainteresowanych szczegółami odsyłam do oryginalnego RFC. Tutaj nadmienię tylko, że znajdziemy wśród nich takie perełki jak grupowanie ścieżek w domenowe konteksty, strony zawierające kilka slotów , w które następnie trafiają odpowiednie fragmenty, czy wykorzystanie konwencji znanej z terminala do przechwytywanie zapytań z danej strony i na przykład wyświetlania modala.

Sekcję to chciałbym zakończyć małą krytyką w stronę Next.js z mojej strony. Jako deweloperzy pokochaliśmy routing oparty o strukturę plików ze względu na jego prostotę. Pojawienie się w strukturze plików tak wielu symboli (`[parametr] do przechowywania parametrów w ścieżce, `@` do definiowania fragmentów, `(..)(..)` do przechwytywania zapytań i `(nazwa)` do grupowania w domenowe konteksty) sprawia, że routing staje się skomplikowany, a jego zrozumienie wymaga sporo wiedzy domenowej. Zadać należy sobie pytanie, czy routing zdefiniowany w plikach nie jest w tak zaawansowanych przypadkach czytelniejszy? Nie zrozumcie mnie źle, wsparcie dla zagnieżdżonych layoutów, obsługa błędów i ładowania oraz wsparcie dla React Server Components to te funkcjonalności, których Next.js potrzebował, ale w mojej głowie kołata pytanie: czy to przypadkiem nie jest już jeden krok za daleko?

1.2 Turbopack, czyli Webpack 6.0

Wraz ze sporym napływem środków, Vercel mocno postawił na rekrutację znanych osobistości ze świata JavaScript’u. Do firmy dołączyło sporo znanych nazwisk takich jak Tobias Koppers (twórca Webpacka), Jared Palmer (twórca Formika i Turborepo), czy Rich Harris (twórca Svelte). Jak się okazuje, ten pierwszy oprócz optymalizacją Webpacka, zajmował się rozwojem zupełnie nowego narzędzia do budowania aplikacji – Turbopack. 

Jak zapowiadają twórcy, Turbopack będzie nawet 700x szybszy niż Webpack i nawet 10x szybszy niż Vite*! Skąd tak duży skok wydajności? Jak większość modnych w 2022 roku narzędzi deweloperskich dla JavaScript, Turbopack napisany jest w Rust. Na razie Turbopack dostępny jest w wersji alpha, ale chętni mogą przy jego pomocy budować aplikacje w Next.js 13. 

Ciekawym aspektem narzędzi napisanych w Rust (w tym i Turbopack) staje się pytanie, czy rozwinie się wokół nich równie żywa społeczność wtyczek jak wokół ich JavaScriptowych odpowiedników. Za wtyczkami do webpacka czy babela zazwyczaj stoją deweloperzy, którzy stanęli przed pewnym problemem i postanowili go samodzielnie rozwiązać. Kiedy wtyczki pisane są w języku, w którym programista pracuje na co dzień, sytuacja jest stosunkowo prosta. Kiedy rozwiązanie problemu wymagać będzie nauki nowego języka (i to takiego dużo bardziej niskopoziomowego niż JavaScript), to może okazać się to problemem nie do przeskoczenia. 

* Jak wspomniał na swoim twitterze sam Evan You, różnica wydajności między Turbopack i Vite, wynika przede wszystkim z różnic wydajności między babelem (stosowanym przez Vite), a SWC (stosowanym przez Turbopack). Ten pierwszy jest znacznie wolniejszy, ale posiada bogatą bibliotekę wtyczek, natomiast ten drugi jest znacznie szybszy, ale nie oferuje tylu opcji konfiguracji. Co ciekawe, Evan You podkreśla, że nic nie stoi na przeszkodzie, aby Vite w przyszłości również mógł korzystać z SWC. 

1.3 `next/image`

Twórcy Next.js od dłuższego czasu w ramach projektu Aurora współpracują z zespołem rozwijającym Chrome nad poprawą wydajności ogólnopojętego internetu. Pierwszym efektem tej współpracy jest dedykowany komponent `Image`, który opracowany został w taki sposób, aby optymalizować metryki Core Web Vitals. Wśród jego funkcjonalności znajdziemy między innymi:

• automatycznie pobiera obrazu w rozdzielczości odpowiedniej dla danego urządzenia
• Opóźnianie pobrania obrazu do momentu, kiedy pojawi się on w viewport
• Rezerwowanie odpowiedniej ilości miejsca na stronie, tak aby uniknąć layout-shift

1.4 `next/font`

Kolejnym efektem współpracy w ramach projektu Aurora  jest powstanie zupełnie nowego systemu obsługi czcionek. Od wersji 13, Next.js będzie pakował czcionki razem z aplikacją i serwował je prosto z serwera. To oznacza, że pobieranie czcionek nie będzie już wymagało wysyłania zapytań do zewnętrznych serwerów!Ponadto Next.js automatycznie dodaje do naszych styli `size-adjust`, co pozwala uniknąć layout-shift

1.5 Prezentacje na długie jesienne wieczory

Macie tak czasem, że szukacie fajnych prezentacji z konferencji czy meetupów i nie możecie znaleźć nic ciekawego? Jeśli tak, to mam dla Was dobrą wiadomość! Do sieci trafiły już zapisy nagrań z Next.js Conf i jest ich naprawdę sporo. Stawiam dolary przeciwko orzechom, że znajdziecie tam dla siebie coś ciekawego.

Next.js Keynote

Next.js Conf Stage S

Next.js Conf Stage J

Źródła:

https://nextjs.org/blog/next-13
https://nextjs.org/blog/layouts-rfc
https://www.youtube.com/watch?v=_w0Ikk4JY7U
https://twitter.com/dan_abramov/status/1585076899126345728

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

2. Angular 14.2

Ostatnio nasze przeglądy zdecydowanie zdominowane zostały przez Reacta. Dzisiaj mamy jednak krótką wstawkę dla wszystkich fanów Angulara. Wersja 15 jest już tuż za rogiem, bo jej premiera nastąpi w okolicach połowy listopada. W międzyczasie zespół Google uraczył nas całkiem ciekawie wyglądająca wersją minor 14.2.

.

Do Angulara 14.2 trafiło API, które pozwala na konfigurację routera poprzez kompozycję odpowiednich funkcji. Taka architektura pozwala na zastosowanie tree-shaking wobec kodu dotyczącego routingu. Jak podają twórcy, usprawnienie to odchudza kod routingu średnio o ponad 10%!

// Before Angular 14.2
const appRoutes: Routes = […];
bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(RouterModule.forRoot(appRoutes), {
      preloadingStrategy: PreloadAllModules
    }),
  ]
});

// Angular 14.2
const appRoutes: Routes = [];
bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes, withPreloading(PreloadAllModules))
  ]
});

Kolejna nowość w Angularze 14.2, to możliwość definiowania functional guard. W połączeniu z dodaną w Angularze 14 funkcją inject() możliwe jest więc zastąpienie właściwie wszystkich guardów prostą funkcją.

const route = {
  path: ‘edit’,
  component: EditCmp,
  canDeactivate: [
    (component: EditCmp) => !component.hasUnsavedChanges
  ]
};

Niewątpliwą zaletą takiej architektury jest również prostota parametryzacji guardów: zamiast przekazywać i czytać dane z ActivatedRouteSnapshot, możemy po prostu przekazać je jako argumenty funkcji.

const route = {
  path: ‘edit’,
  component: EditCmp,
  canActivate: [allowedUserTypes([‘ADMIN’, ‘SUPER_ADMIN’])]
};

Źródła:

https://blog.angular.io/advancements-in-the-angular-router-5d69ec4c032
https://netbasal.com/using-the-angular-http-client-in-angular-v15-f4bec3c11926

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

3. Vite Conf

Konferencja Vite nie była tak obfita w nowości jak Next.js Conf. Nie oznacza to, że nie przemknęło się na niej kilka mniejszych i większych nowości. Najciekawszą z nich jest StackBlitz Codeflow, który umożliwia szybkie sklonowanie projektu w przeglądarce i natychmiastowe uruchomienie aplikacji (dzięki WebContainers możliwe jest również uruchomienie serwerowych aplikacji). Całość sprawdza się idealnie zwłaszcza przy Code Review, kiedy to szybko możemy zobaczyć efekty wprowadzonych zmian i równocześnie nie musimy zaciągać ich na nasz komputer.

Jeśli po przebrnięciu przez nagrania z Next.js Conf nadal nie macie dosyć, to miło mi poinformować, że na YouTube trafił również zapis z ponad 40 prezentacji z Vite Conf. I nie dajcie się zmylić nazwie – wśród tematów znajdziecie również  Storybooka, Ladle (alternatywa dla Storybook od Ubera), Angulara, Astro czy Solid.js. Nie wiem jak Wy, ale ja mam co oglądać do porannej kawy przez co najmniej najbliższe pół roku.

Źródła

https://viteconf.org/2022/replay
https://stackblitz.com/codeflow