Frontend Thursday vol. 80 - nowości w react-router i wskrzeszenie faker.js

1. Nowości w react-router

Kojarzycie Remix – nowy framework do Server Side Renderingu od twórców react-router? Jeśli nie, to najwyższa pora nadrobić braki, bo w ostatnich tygodniach za sprawą licznych blog postów i zbliżającej się konferencji Remix Conf jest o nim coraz głośniej. Po 4 miesiącach od premiery framework zebrał solidną bazę użytkowników i wiele wskazuje na to, że w przyszłości może stać się on głównym rywalem Next.js. W detale tej nowej zabawki zagłębialiśmy się w 65 edycji naszego przeglądu i tam odsyłam wszystkich zainteresowanych.

Nie bez przyczyny wpis poświęcony react-router zaczynam od przypomnienia czym jest Remix. Nowe funkcjonalności zmierzające do react-router silnie inspirowane są potrzebami Remixa (chociaż skorzystają z nich wszyscy), a o ścisłej zależności obu projektów najlepiej świadczy fakt przeniesienia ich do wspólnego repozytorium.

Obecnie standardowym podejściem do pobierania danych w react jest umieszczenie odpowiedniej logiki w komponentach. Rozwiązanie to działa jak najbardziej poprawnie, do momentu kiedy w grze nie pojawiają się zagnieżdżone komponenty (a z takimi mamy do czynienia przy zagnieżdżonym routingu). Komponent dziecko rozpoczyna pobieranie danych dopiero kiedy zostanie wyrenderowany, czyli w momencie kiedy rodzic skończy pobierać swoje dane. Taka architektura powoduje zbędne opóźnienia, negatywnie wpływające na doświadczenia użytkownika.

Zespół odpowiedzialny za rozwój react-router chce rozwiązać ten problem dodając do komponentu Route parametr loader, który to odpowiedzialny będzie za wczytywanie danych. Kiedy ścieżka w przeglądarce zostanie dopasowana do odpowiednich Route równolegle zostaną uruchomione funkcje loader na wszystkich z nich, a pobieranie danych będzie odbywać się równolegle. Z poziomu komponentu do pobranych danych będzie można dostać się przy pomocy hook’a useLoaderData.

Do komponentu Route trafić mają jeszcze 2 nowe parametry: fallbackElement oraz exceptionElement. Do pierwszego z nich przekazywać będziemy komponent, który wyświetlany będzie do czasu zakończenia wykonania funkcji loader. Drugi natomiast wyświetlany będzie kiedy w funkcji loader wystąpi błąd. Podobna logika jest nieodłączną częścią prawie wszystkich aplikacji i miło jest zobaczyć, że zostanie ona w pewien sposób ustandaryzowana.

import * as React from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  useLoaderData,
  Form,
} from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <Routes
      fallbackElement={<BigSpinner />}
      exceptionElement={<GlobalErrorPage />}
    >
      <Route
        loader={({ signal }) => {
          return fetch("/api/user.json", { signal });
        }}
      >
        <Route
          path="projects"
          element={<Projects />}
          exceptionElement={<TasksErrorPage />}
          loader={async ({ signal }) => {
            let res = await fetch("/api/tasks.json", { signal });

            if (res.status === 404) {
              throw { notFound: true };
            }

            return res.json();
          }}
        >
          <Route
            path=":projectId"
            element={<Projects />}
            loader={async ({ signal, params }) =>
              fetch(`/api/projects/${params.projectId}`, { signal })
            }
          />
        </Route>
        <Route index element={<Index />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

function Root() {
  let data = useLoaderData();

  return (
    <div>
      <Header user={data.user} />
      <Outlet />
      <Footer />
    </div>
  );
}

W blogpoście niestety nie znajdziemy informacji kiedy nowości trafią w ręce programistów, ale ja czekam z niecierpliwością.

Źródła:

https://remix.run/blog/remixing-react-router

2. Wskrzeszenie faker.js

Zniknięcie faker.js (najpopularniejszej javascriptowej biblioteki do generowania mockowych danych) z npm było jednym z głośniejszych wydarzeń początku tego roku. Marak Squires (twórca biblioteki) w ramach akcji mającej na celu przypomnieć programistom o tajemniczej śmierci aktywisty i współzałożyciela Reddita Aartona Swartz. W ramach swojej akcji Marak zwracał również uwagę na brak finansowania projektów Open Source przez wielkie korporacji i zepsuł kilka innych utrzymywanych przez siebie bibliotek. Historię faker.js relacjonowaliśmy na bieżąco w 70 i 71 edycji naszego przeglądu.

Zaistniałą sytuacja spotkała się raczej z chłodną reakcją społeczności, a alternatywy i forki faker.js zaczęły wyrastać jak grzyby po deszczu. Wygląda na to, że sytuacja po burzy wreszcie się ustabilizowała i spośród pretendentów wyłonił się jeden najpopularniejszy. Wskrzeszona biblioteka utrzymywana jest przez 9 programistów z różnych firm, co zapobiec ma podzieleniu losu oryginalnej biblioteki.

Gdyby biblioteka faker.js była człowiekiem, to tak właśnie by teraz wyglądała.

W minionym tygodniu wspomniany najpopularniejszy fork doczekał się wersji 6.0. Znajdziemy w niej wsparcie dla ESM Modules oraz częściowe wsparcie dla tree-shaking. Nowy faker przepisany został również do TypeScript, dzięki czemu paczka @types/faker nie jest już potrzebna. Przy okazji releasu zaprezentowano też roadmapę nadchodzących funkcjonalności, a w niej znajdziemy między innymi interaktywną dokumentację czy wsparcie dla Node 18.

Źródła:

https://fakerjs.dev/update.html
https://github.com/faker-js/faker/releases/tag/v6.0.0

3. CSS-Tricks sprzedane

CSS Tricks to strona publikujący artykuły i tutoriale dotyczące szeroko pojętego web developmentu, która cyklicznie pojawia się w aplikacji Vived. Chyba każdy frontend developer na jakimś etapie miał z nią do czynienia, bo po MDN jest to zazwyczaj drugi wynik na jaki trafimyw Google. W minionym tygodniu założyciel strony oraz autor znaczącej części blogpostów ogłosił, że strona została sprzedana DigitalOcean, a on sam powoli zamierza wycofać się z projektu. Nowi właściciele portalu na szczęście nie zamierzają póki co wprowadzać znaczących zmian w jego funkcjonowaniu.