{"id":9975,"date":"2022-05-05T14:30:31","date_gmt":"2022-05-05T12:30:31","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-86-nowa-biblioteka-od-tworcow-chakra-ui-react-native-skia-figma-storybook-plugin\/"},"modified":"2022-09-19T13:16:28","modified_gmt":"2022-09-19T11:16:28","slug":"frontend-thursday-vol-86-nowa-biblioteka-od-tworcow-chakra-ui-react-native-skia-figma-storybook-plugin","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-86-nowa-biblioteka-od-tworcow-chakra-ui-react-native-skia-figma-storybook-plugin\/","title":{"rendered":"Frontend Thursday vol. 86 – nowa biblioteka od tw\u00f3rc\u00f3w Chakra UI, React Native Skia, Figma Storybook Plugin"},"content":{"rendered":"\n

1. Zag – nowa biblioteka od tw\u00f3rc\u00f3w Chakra UI<\/h2>\n\n\n\n

Gdybym za ka\u017cdym razem, kiedy w Frontend Weekly powo\u0142uj\u0119 si\u0119 na cytat \u201cTydzie\u0144 bez nowej JavaSriptowej biblioteki to tydzie\u0144 stracony\u201d, odk\u0142ada\u0142 do skarbonki 10 z\u0142otych, to za zebrane fundusze m\u00f3g\u0142bym kupi\u0107 sobie u\u017cywane Ferrari\u2026 No dobra, tak naprawd\u0119 to starczy\u0142oby co najwy\u017cej na dobry obiad, ale dzisiaj bud\u017cet powi\u0119kszy\u0142by si\u0119 o kolejn\u0105 dych\u0119 i by\u0142bym o krok bli\u017cej od wymarzonego samochodu. Ten tydzie\u0144 uratowali tw\u00f3rcy Chakra-UI (jednej z najpopularniejszych bibliotek komponent\u00f3w dla Reacta uznawanej przez wielu za t\u0105 najbardziej elastyczn\u0105) prezentuj\u0105c bibliotek\u0119 Zag.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Je\u015bli nie siedzicie w ekosystemie Vue, to mo\u017ce Was zaskoczy\u0107 fakt, \u017ce od d\u0142u\u017cszego czasu trwaj\u0105 prace nad wersj\u0105 Chakra-UI kompatybiln\u0105 z tym\u017ce frameworkiem. Zesp\u00f3\u0142 odpowiedzialny za rozw\u00f3j tej odnogi biblioteki podj\u0105\u0142 decyzj\u0119 o przepisaniu wi\u0119kszo\u015bci kodu, tak aby dostarczy\u0107 u\u017cytkownikom maksymalnie wygodne API. Jak si\u0119 pewnie domy\u015blacie oznacza to, \u017ce ca\u0142a masa logiki musia\u0142a zosta\u0107 zduplikowana, co nieuchronnie prowadzi do powstawania bug\u00f3w. Remedium na zaistnia\u0142e problemy ma by\u0107 w\u0142a\u015bnie biblioteka Zag, kt\u00f3ra umo\u017cliwia wsp\u00f3\u0142dzielenie logiki komponent\u00f3w pomi\u0119dzy popularnymi frameworkami (na ten moment mi\u0119dzy React, Vue i SolidJS).<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Sercem biblioteki Zag jest koncepcja maszyn stanowych – model reprezentacji logiki w kt\u00f3rym wyr\u00f3\u017cniamy sko\u0144czon\u0105 liczb\u0119 stan\u00f3w i definiujemy mo\u017cliwe przej\u015bcia mi\u0119dzy zdefiniowanymi stanami. Komponenty takie jak toggle, dialog czy menu w naturalny spos\u00f3b wpisuj\u0105 si\u0119 taki model reprezentacji danych. Na pierwszy rzut oka mo\u017ce wydawa\u0107 si\u0119, \u017ce wykorzystanie specjalnej biblioteki do tego celu jest jak strzelanie z armaty do muchy. Warto jednak zatrzyma\u0107 si\u0119 na chwil\u0119 i zastanowi\u0107 jak cz\u0119sto zdarza\u0142o Wam si\u0119, \u017ce proste komponenty rozrasta\u0142y si\u0119 z czasem do ogromnych rozmiar\u00f3w, a zrozumienie kompozycji useState, useCallback i useEffect wymaga\u0142o co najmniej doktoratu.\u00a0 Wykorzystanie maszyny stanowej zdecydowanie upraszcza kompozycj\u0119 hook\u00f3w i pozwala oddzieli\u0107 logik\u0119 od warstwy wizualnej. Nie twierdz\u0119, \u017ce to rozwi\u0105zanie dla ka\u017cdego, ale zespo\u0142y odpowiedzialne za rozw\u00f3j firmowej biblioteki komponent\u00f3w mog\u0105 by\u0107 zainteresowane (albo chocia\u017c zainspirowane).<\/p>\n\n\n\n

import { createMachine } from "@zag-js\/core"\n\nconst machine = createMachine({\n  \/\/ initial state\n  initial: "active",\n  \/\/ the finite states\n  states: {\n    active: {\n      on: {\n        CLICK: {\n          \/\/ go to inactive\n          target: "inactive",\n        },\n      },\n    },\n    inactive: {\n      on: {\n        CLICK: {\n          \/\/ go to active\n          target: "active",\n        },\n      },\n    },\n  },\n})\n\nfunction connect(state, send) {\n  const active = state.matches("active")\n  return {\n    active,\n    buttonProps: {\n      type: "button",\n      role: "switch",\n      "aria-checked": active,\n      onClick() {\n        send("CLICK")\n      },\n    },\n  }\n}<\/code><\/pre>\n\n\n\n
import { useMachine } from "@zag-js\/react"\nimport { machine, connect } from ".\/toggle"\n\nfunction Toggle() {\n  const [state, send] = useMachine(machine)\n  const api = connect(state, send)\n\n  return (\n    <button\n      {...api.buttonProps}\n      style={{\n        width: "40px",\n        height: "24px",\n        borderRadius: "999px",\n        background: api.active ? "green" : "gray",\n      }}\n    >\n      {api.active ? "ON" : "OFF"}\n    <\/button>\n  )\n}<\/code><\/pre>\n\n\n\n
Biblioteka Zag opr\u00f3cz API do tworzenia w\u0142asnych maszyn stanowych udost\u0119pnia r\u00f3wnie\u017c zestaw maszyn stanowych dla najpopularniejszych prostych komponent\u00f3w takich jak Menu, Slider czy Number Input. Warto zwr\u00f3ci\u0107 uwag\u0119 no fakt, \u017ce oferowane maszyny stanowe enkapsuluj\u0105 r\u00f3wnie\u017c Accessablility, czyli aspekt na kt\u00f3ry w wi\u0119kszo\u015bci projekt\u00f3w nie ma czasu.<\/p>\n\n\n\n
import * as numberInput from "@zag-js\/number-input"\nimport { useMachine, useSetup } from "@zag-js\/react"\n\nexport function NumberInput() {\n  const [state, send] = useMachine(numberInput.machine)\n  const ref = useSetup({ send, id: "1" })\n  const api = numberInput.connect(state, send)\n\n  return (\n    <div ref={ref} {...api.rootProps}>\n      <label {...api.labelProps}>Enter number:<\/label>\n      <div>\n        <button {...api.decrementButtonProps}>DEC<\/button>\n        <input {...api.inputProps} \/>\n        <button {...api.incrementButtonProps}>INC<\/button>\n      <\/div>\n    <\/div>\n  )\n}<\/code><\/pre>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/zagjs.com\/
<\/a>https:\/\/zagjs.com\/components\/react\/number-input<\/a>
https:\/\/zagjs.com\/overview\/whats-a-machine<\/a><\/p>\n\n\n\n
2. React Native Skia<\/h2>\n\n\n\n
Skia to otwarto\u017ar\u00f3d\u0142owy biblioteka do grafiki 2D rozwijana przez Shopify, kt\u00f3ra dostarcza API dzia\u0142aj\u0105ce na szerokiej gamie sprz\u0119tu. Skia mo\u017ce pochwali\u0107 si\u0119 imponuj\u0105cym portfolio wykorzystuj\u0105cych j\u0105 rozwi\u0105za\u0144. W galerii s\u0142aw znajdziemy takie tuzy jak Google Chrome, Chrome OS czy silnik renderowania Fluttera. Nied\u0142ugo lista ta mo\u017ce si\u0119 powi\u0119kszy\u0107, bo Shopify og\u0142osi\u0142o w minionym tygodniu bibliotek\u0119 integruj\u0105c\u0105 React Native i Skia.<\/p>\n\n\n\n
import {Skia, SkiaView, useDrawCallback} from "@shopify\/react-native-skia";\n \nexport const HelloWorld = () => {\n  const r = 128;\n  const onDraw = useDrawCallback((canvas) => {\n    const paint = Skia.Paint();\n    paint.setAntiAlias(true);\n    cyan.setColor(Skia.Color("cyan"));\n    canvas.drawCircle(r, r, r, paint);\n  });\n  return (\n    <SkiaView style={{ flex: 1 }} onDraw={onDraw} \/>\n  );\n};<\/code><\/pre>\n\n\n\n
Skia dostarcza deweloperom troch\u0119 ekscytuj\u0105cych mo\u017cliwo\u015bci, ale jak dla mnie najbardziej interesuj\u0105ce s\u0105 plany Shopify dla React Native Skia. Jak si\u0119 okazuje nowo powsta\u0142e API jest w 100% kompatybilne z API Fluttera. W przysz\u0142o\u015bci ma to umo\u017cliwi\u0107 wykorzystanie silnika renderowania Fluttera dla weba do renderowania aplikacji React Native.<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Wykorzystanie wsp\u00f3lnego silnika renderowania przez React Native i Flutter brzmi troch\u0119\u2026 dziwnie. Je\u015bli Shopify uda si\u0119 przepchn\u0105\u0107 sw\u00f3j pomys\u0142 to mo\u017ce to doprowadzi\u0107 do dynamicznego rozwoju odnogi Skia opartej o WebAssembly. To jeszcze nie koniec standardowego HTML-a, ale by\u0107 mo\u017ce jeden z krok\u00f3w milowych w tym kierunku.<\/p>\n\n\n\n
\"\"
Tak d\u0142ugo jak problemy z powy\u017cszego mema nie zostan\u0105 zaadresowane, ja nie wierz\u0119 w przysz\u0142o\u015b\u0107 opart\u0105 o Canvas + WebAssembly.<\/figcaption><\/figure><\/div>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/shopify.engineering\/react-native-skia-shopify<\/a><\/p>\n\n\n\n
3. Integracja Figmy ze Storybook<\/h2>\n\n\n\n
Osoba odpowiedzialna za PR Storybooka zdecydowanie zas\u0142uguje na podwy\u017ck\u0119. Informacje o nowo\u015bciach w ich flagowym produkcie rozchodz\u0105 si\u0119 po internecie viralowo. Nie tak dawno informowali\u015bmy Was o Lazy Loadingu, kt\u00f3ry trafi\u0142 do Storybook 6.5, a kilka dni temu firma zaprezentowa\u0142a kolejn\u0105 nowo\u015b\u0107. Tym razem pad\u0142o na plugin, kt\u00f3ry umo\u017cliwia po\u0142\u0105czenie designu komponent\u00f3w w Figmie z ich odpowiednikami w Storybook. Warto zaznaczy\u0107, \u017ce wtyczka powsta\u0142a we wsp\u00f3\u0142pracy z Figm\u0105 wi\u0119c oczekiwa\u0107 mo\u017cemy najwy\u017cszej jako\u015bci.<\/p>\n\n\n\n
\"\"
Podgl\u0105d zaimplementowanego komponentu uruchamiany jest w interaktywnym trybie wewn\u0105trz Figmy, co pozwala w prosty spos\u00f3b por\u00f3wnywa\u0107 design z implementacj\u0105. Gdyby jeszcze w automatyczny spos\u00f3b\u00a0 zapewnia\u0142o to 100% zgodno\u015b\u0107 design\u00f3w z implementacj\u0105\u2026<\/figcaption><\/figure><\/div>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/storybook.js.org\/blog\/figma-plugin-for-storybook\/<\/a><\/p>\n\n\n\n
Bonus: Historia React Concurrent Features<\/h2>\n\n\n\n
Na zako\u0144czenie dzisiejszego przegl\u0105du chcia\u0142bym podzieli\u0107 si\u0119 z Wami pere\u0142k\u0105, jak\u0105 uda\u0142o mi si\u0119 wy\u0142owi\u0107 w tym tygodniu na YouTube. W zamieszczonym poni\u017cej filmie w telegraficznym skr\u00f3cie poznacie histori\u0119 React Concurrent Features (a historii tej jest troch\u0119, bo prace trwa\u0142y 2161 dni, czyli prawie 6 lat). I nie dajcie si\u0119 zmyli\u0107 pozorom, znajomo\u015b\u0107 korzeni wsp\u00f3\u0142bie\u017cno\u015bci w React to nie tylko wiedza, kt\u00f3r\u0105 pochwalicie si\u0119 na najbli\u017cszej kawie, ale te\u017c szansa na poznanie g\u0142\u0119bszego kontekstu nowych funkcjonalno\u015bci. Nie pami\u0119tam kiedy tak dobrze wykorzysta\u0142em 10 minut – naprawd\u0119 polecam!<\/p>\n\n\n\n
\n