Frontend Thursday vol. 56

1. Beta Gatsby 4

Półtora roku od pojawienia się Gatsby 3, doczekaliśmy się bety Gatsby 4. Nowości jest sporo, ale zacznijmy od `Deffered Static Generation`. Jest to możliwości odłożenia generowania statycznej wersji strony do momentu, kiedy odwiedzi ją pierwszy użytkownik. Po wizycie  pierwszego użytkownika, wygenerowana strona zostaje zapisana w cache i jest serwowana dla kolejnych odwiedzających. Jeśli zastanawiacie się nad przypadkiem użycia dla tej funkcjonalności, to pomyślcie o blogach zawierających setki wpisów, w tym wiele przestarzałych i rzadko odwiedzanych. Od teraz Gatsby będzie umożliwiał znaczą redukcję czasu budowania aplikacji, poprzez ograniczenie renderowanych w tym procesie stron, do wpisów z kilku ostatnich miesięcy. Oczywiście, odbędzie się to kosztem wolniejszego ładowania starych postów dla użytkownika, ale zakładając, że są to rzadko odwiedzane strony, możemy sobie na to pozwolić.

Jeśli narzekacie na długi czas budowania w Gatsby 3, to jeszcze nie koniec czekających na Was dobrych wiadomości. Najnowsza wersja biblioteki dodaje wsparcie dla współbieżnego pobierania danych, co również znacząco przyśpiesza cały proces.

Oprócz opisanych powyżej zmian, pojawiło się też kilka nowości dotyczących chmury oferowanej przez Gatsby. Nie podejmuje się opisania szczegółów tych nowości, więc wszystkich zainteresowanych zapraszam do zamieszczonych pod artykułem źródeł.

Śledząc społeczność Reacta trochę z zewnątrz zastanawiam się, jak wygląda obecny rozkład sił między Gatsby i Next.js. Jeszcze niedawno to Gatsby był rynkowym standardem, tymczasem przyglądając się statystykom z npm trends nie sposób nie odnieść wrażenia, że czasy świetności ma on już dawno za sobą. A Wy macie na ten temat jakieś przemyślenia? Zapraszamy do dyskusji na naszym facebooku!

Źródła:

https://www.gatsbyjs.com/gatsby-4/

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. MUI v5.0

Kojarzycie bibliotekę Material – UI (implementacja Material Design dla Reacta)? Jeśli tak, to zanotujcie sobie, że od wersji 5 zmieniła ona swoją nazwę na MUI. Jak motywują twórcy, nowa nazwa była potrzebna ze względu na rozszerzenie odpowiedzialności projektu. Od teraz dobrze znana biblioteka komponentów dostępna jest jako MUI Core, a do rodziny produktów, nad którymi pracuje zespół, dołączył MUI X. Nowa biblioteka ma dostarczać komponenty do budowania wydajnych aplikacji do prezentacji dużej ilości danych.

Jeśli pracujecie z Material-UI to pewnie interesuje Was co nowego trafiło do biblioteki. W wersji 5.0 twórcy skupiali się, przede wszystkim, na ulepszeniu doświadczeń deweloperów (dobrze wiedzieć, że ktoś o nas myśli <3). Największą zmianą jest migracja z JSS do emotion. Jest to odpowiedź na trendy, w kierunku których rozwija się środowisko Reacta, ale również inwestycja w wydajność (przykładowo, komponent Box jest teraz od 5 do nawet 10 krotnie wydajniejszy). Miłą niespodzianką jest obecność wrappera, umożliwiającego zastąpienie emotion styled-components. Jeśli nie jesteście jeszcze gotowi na porzucenie JSS, to wciąż dostępna jest paczka @mui/styles, dzięki której będzie to możliwe.

To nie koniec, jeśli chodzi o usprawnienia dotyczące stylowania. Część komponentów dostała tajemnicze property `sx`, które umożliwia przekazanie obiektu, którego klucze i wartości niepokojąco przypominają tailwinda.

<Slider sx={{ my: 1 }} />
<Typography sx={{ color: 'grey.600' }}>

Kolejna nowość to możliwość dynamicznego definiowania kolorów i wariantów komponentów przy użyciu ThemeProvidera. Jak tłumaczą twórcy ma to zredukować boilerplate, jaki generowało tworzenie własnych opakowań na podstawowe komponenty. Wygląda to naprawdę fajnie, ale składnia z `declare module` trochę kłuje w oczy.

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'dashed' },
          style: {
            textTransform: 'none',
            border: `2px dashed grey${blue[500]}`,
          },
        },
        {
          props: { variant: 'dashed', color: 'secondary' },
          style: {
            border: `4px dashed ${red[500]}`,
          },
        },
      ],
    },
  },
});

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    dashed: true;
  }
}

<ThemeProvider theme={theme}>
  <Button variant="dashed" sx={{ m: 1 }}>
    Dashed
  </Button>
  <Button variant="dashed" color="secondary" sx={{ m: 1 }}>
    Secondary
  </Button>
</ThemeProvider>

Na koniec warto wspomnieć jeszcze, że twórcy zmigrowali się z Enzyme do Testing Library i przepisali znaczną część kodu na TypeScript. Oczywiście zmian i nowości jest więcej, więc wszystkich zainteresowanych odsyłamy do poniższych źródeł.

Źródła:

https://mui.com/blog/mui-core-v5/

https://mui.com/x/

https://mui.com/blog/material-ui-is-now-mui/

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!

Bonus: Quake w 13kB

W ostatnim tygodniu w sieci została opublikowana implementacja tego pierwszego, która waży zaledwie 13kB. Całość oparta jest o Canvas i działa całkiem sprawnie. Jeśli będziecie się nudzić na kolejnym korporacyjnym spotkaniu, to warto z czystej ciekawości sprawdzić to własnoręcznie.

Źródła:

https://js13kgames.com/entries/q1k3