Frontend Thursday vol. 86 – nowa biblioteka od twórców Chakra UI, React Native Skia, Figma Storybook Plugin

1. Zag – nowa biblioteka od twórców Chakra UI

Gdybym za każdym razem, kiedy w Frontend Weekly powołuję się na cytat “Tydzień bez nowej JavaSriptowej biblioteki to tydzień stracony”, odkładał do skarbonki 10 złotych, to za zebrane fundusze mógłbym kupić sobie używane Ferrari… No dobra, tak naprawdę to starczyłoby co najwyżej na dobry obiad, ale dzisiaj budżet powiększyłby się o kolejną dychę i byłbym o krok bliżej od wymarzonego samochodu. Ten tydzień uratowali twórcy Chakra-UI (jednej z najpopularniejszych bibliotek komponentów dla Reacta uznawanej przez wielu za tą najbardziej elastyczną) prezentując bibliotekę Zag.

Jeśli nie siedzicie w ekosystemie Vue, to może Was zaskoczyć fakt, że od dłuższego czasu trwają prace nad wersją Chakra-UI kompatybilną z tymże frameworkiem. Zespół odpowiedzialny za rozwój tej odnogi biblioteki podjął decyzję o przepisaniu większości kodu, tak aby dostarczyć użytkownikom maksymalnie wygodne API. Jak się pewnie domyślacie oznacza to, że cała masa logiki musiała zostać zduplikowana, co nieuchronnie prowadzi do powstawania bugów. Remedium na zaistniałe problemy ma być właśnie biblioteka Zag, która umożliwia współdzielenie logiki komponentów pomiędzy popularnymi frameworkami (na ten moment między React, Vue i SolidJS).

Sercem biblioteki Zag jest koncepcja maszyn stanowych – model reprezentacji logiki w którym wyróżniamy skończoną liczbę stanów i definiujemy możliwe przejścia między zdefiniowanymi stanami. Komponenty takie jak toggle, dialog czy menu w naturalny sposób wpisują się taki model reprezentacji danych. Na pierwszy rzut oka może wydawać się, że wykorzystanie specjalnej biblioteki do tego celu jest jak strzelanie z armaty do muchy. Warto jednak zatrzymać się na chwilę i zastanowić jak często zdarzało Wam się, że proste komponenty rozrastały się z czasem do ogromnych rozmiarów, a zrozumienie kompozycji useState, useCallback i useEffect wymagało co najmniej doktoratu.  Wykorzystanie maszyny stanowej zdecydowanie upraszcza kompozycję hooków i pozwala oddzielić logikę od warstwy wizualnej. Nie twierdzę, że to rozwiązanie dla każdego, ale zespoły odpowiedzialne za rozwój firmowej biblioteki komponentów mogą być zainteresowane (albo chociaż zainspirowane).

import { createMachine } from "@zag-js/core"

const machine = createMachine({
  // initial state
  initial: "active",
  // the finite states
  states: {
    active: {
      on: {
        CLICK: {
          // go to inactive
          target: "inactive",
        },
      },
    },
    inactive: {
      on: {
        CLICK: {
          // go to active
          target: "active",
        },
      },
    },
  },
})

function connect(state, send) {
  const active = state.matches("active")
  return {
    active,
    buttonProps: {
      type: "button",
      role: "switch",
      "aria-checked": active,
      onClick() {
        send("CLICK")
      },
    },
  }
}

import { useMachine } from "@zag-js/react"
import { machine, connect } from "./toggle"

function Toggle() {
  const [state, send] = useMachine(machine)
  const api = connect(state, send)

  return (
    <button
      {...api.buttonProps}
      style={{
        width: "40px",
        height: "24px",
        borderRadius: "999px",
        background: api.active ? "green" : "gray",
      }}
    >
      {api.active ? "ON" : "OFF"}
    </button>
  )
}

Biblioteka Zag oprócz API do tworzenia własnych maszyn stanowych udostępnia również zestaw maszyn stanowych dla najpopularniejszych prostych komponentów takich jak Menu, Slider czy Number Input. Warto zwrócić uwagę no fakt, że oferowane maszyny stanowe enkapsulują również Accessablility, czyli aspekt na który w większości projektów nie ma czasu.

import * as numberInput from "@zag-js/number-input"
import { useMachine, useSetup } from "@zag-js/react"

export function NumberInput() {
  const [state, send] = useMachine(numberInput.machine)
  const ref = useSetup({ send, id: "1" })
  const api = numberInput.connect(state, send)

  return (
    <div ref={ref} {...api.rootProps}>
      <label {...api.labelProps}>Enter number:</label>
      <div>
        <button {...api.decrementButtonProps}>DEC</button>
        <input {...api.inputProps} />
        <button {...api.incrementButtonProps}>INC</button>
      </div>
    </div>
  )
}

Źródła:

https://zagjs.com/
https://zagjs.com/components/react/number-input
https://zagjs.com/overview/whats-a-machine

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. React Native Skia

Skia to otwartoźródłowy biblioteka do grafiki 2D rozwijana przez Shopify, która dostarcza API działające na szerokiej gamie sprzętu. Skia może pochwalić się imponującym portfolio wykorzystujących ją rozwiązań. W galerii sław znajdziemy takie tuzy jak Google Chrome, Chrome OS czy silnik renderowania Fluttera. Niedługo lista ta może się powiększyć, bo Shopify ogłosiło w minionym tygodniu bibliotekę integrującą React Native i Skia.

import {Skia, SkiaView, useDrawCallback} from "@shopify/react-native-skia";
 
export const HelloWorld = () => {
  const r = 128;
  const onDraw = useDrawCallback((canvas) => {
    const paint = Skia.Paint();
    paint.setAntiAlias(true);
    cyan.setColor(Skia.Color("cyan"));
    canvas.drawCircle(r, r, r, paint);
  });
  return (
    <SkiaView style={{ flex: 1 }} onDraw={onDraw} />
  );
};

Skia dostarcza deweloperom trochę ekscytujących możliwości, ale jak dla mnie najbardziej interesujące są plany Shopify dla React Native Skia. Jak się okazuje nowo powstałe API jest w 100% kompatybilne z API Fluttera. W przyszłości ma to umożliwić wykorzystanie silnika renderowania Fluttera dla weba do renderowania aplikacji React Native.

Wykorzystanie wspólnego silnika renderowania przez React Native i Flutter brzmi trochę… dziwnie. Jeśli Shopify uda się przepchnąć swój pomysł to może to doprowadzić do dynamicznego rozwoju odnogi Skia opartej o WebAssembly. To jeszcze nie koniec standardowego HTML-a, ale być może jeden z kroków milowych w tym kierunku.

Źródła:

https://shopify.engineering/react-native-skia-shopify

3. Integracja Figmy ze Storybook

Osoba odpowiedzialna za PR Storybooka zdecydowanie zasługuje na podwyżkę. Informacje o nowościach w ich flagowym produkcie rozchodzą się po internecie viralowo. Nie tak dawno informowaliśmy Was o Lazy Loadingu, który trafił do Storybook 6.5, a kilka dni temu firma zaprezentowała kolejną nowość. Tym razem padło na plugin, który umożliwia połączenie designu komponentów w Figmie z ich odpowiednikami w Storybook. Warto zaznaczyć, że wtyczka powstała we współpracy z Figmą więc oczekiwać możemy najwyższej jakości.

Źródła:

https://storybook.js.org/blog/figma-plugin-for-storybook/

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: Historia React Concurrent Features

Na zakończenie dzisiejszego przeglądu chciałbym podzielić się z Wami perełką, jaką udało mi się wyłowić w tym tygodniu na YouTube. W zamieszczonym poniżej filmie w telegraficznym skrócie poznacie historię React Concurrent Features (a historii tej jest trochę, bo prace trwały 2161 dni, czyli prawie 6 lat). I nie dajcie się zmylić pozorom, znajomość korzeni współbieżności w React to nie tylko wiedza, którą pochwalicie się na najbliższej kawie, ale też szansa na poznanie głębszego kontekstu nowych funkcjonalności. Nie pamiętam kiedy tak dobrze wykorzystałem 10 minut – naprawdę polecam!