{"id":9898,"date":"2022-09-09T14:25:53","date_gmt":"2022-09-09T12:25:53","guid":{"rendered":"https:\/\/vived.io\/signal-nowy-sposob-na-zarzadzanie-stanem-aplikacji-frontend-weekly-vol-104\/"},"modified":"2022-09-19T13:16:23","modified_gmt":"2022-09-19T11:16:23","slug":"signal-nowy-sposob-na-zarzadzanie-stanem-aplikacji-frontend-weekly-vol-104","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/signal-nowy-sposob-na-zarzadzanie-stanem-aplikacji-frontend-weekly-vol-104\/","title":{"rendered":"Signal – nowy spos\u00f3b na zarz\u0105dzanie stanem aplikacji – Frontend Weekly vol. 104"},"content":{"rendered":"\n

1. Signals – nowa biblioteka do zarz\u0105dzania stanem aplikacji od tw\u00f3rc\u00f3w Preact<\/h2>\n\n\n\n

Obserwuj\u0105c ilo\u015b\u0107 dost\u0119pnych bibliotek, dyskusji i opinii na temat zarz\u0105dzania stanem aplikacji w Reactie, mo\u017cna odnie\u015b\u0107, \u017ce jest to swego rodzaju fetysz tej spo\u0142eczno\u015bci. W tym tygodniu mamy co\u015b specjalnego dla wszystkich fanatyk\u00f3w stanu aplikacji – now\u0105 bibliotek\u0119 od tw\u00f3rc\u00f3w Preacta.\r\n<\/p>\n\n\n\n

Nowa biblioteka nazywa si\u0119 Signals. Je\u015bli gdzie\u015b z ty\u0142u g\u0142owy \u015bwita Wam, \u017ce gdzie\u015b ju\u017c to s\u0142yszeli\u015bcie, to macie racj\u0119. SolidJS, czyli alternatywa dla Reacta bez Shadow DOM, zamiast `useState` pos\u0142uguje si\u0119 w\u0142a\u015bnie `useSignal`. Signala z Preact i SolidJS \u0142\u0105czy ca\u0142kiem sporo, jednak zdecydowanie nie s\u0105 to dwie to\u017csame koncepcje.<\/p>\n\n\n

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

Zacznijmy jednak od motywacji tw\u00f3rc\u00f3w Preacta do stworzenia kolejnej biblioteki do zarz\u0105dzania stanem. Jak to zwykle bywa, wszystkie dost\u0119pne na rynku rozwi\u0105zania nie zaspokaja\u0142y potrzeb autor\u00f3w biblioteki. Narz\u0119dzie takie jak Redux czy MobX wprowadzaj\u0105 sporo boilerplate\u2019u, a ich wydajno\u015b\u0107 jest dyskusyjna. Proste podej\u015bcie z useState sprawdza si\u0119 w pocz\u0105tkowych etapach \u017cycia aplikacji, ale wraz z jej rozrostem zaczyna cierpie\u0107 na problemy z props-drilling i niewydajnym renderowaniem. Konteksty, kt\u00f3re staj\u0105 si\u0119 w takim momencie naturaln\u0105 alternatyw\u0105, r\u00f3wnie\u017c nie s\u0105 idealne. Pozwalaj\u0105 co prawda \u201cprzeskoczy\u0107\u201d przez kilka poziom\u00f3w VirtualDOM, ale ich liczba szybko ro\u015bnie, a odpowiednia optymalizacja wymaga zr\u0119cznego pos\u0142ugiwania si\u0119 memonizacj\u0105.<\/p>\n\n\n

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

Signal w swojej koncepcji jest pewnym pude\u0142kiem na warto\u015b\u0107. Kiedy warto\u015b\u0107 w pude\u0142ku zmienia si\u0119, automatycznie aktualizowane s\u0105 warto\u015bci we wszystkich pude\u0142kach zale\u017cnych. Proces powtarza si\u0119, a\u017c wszystkie pude\u0142ka zostan\u0105 zaktualizowane. Na pierwszy rzut oka bardzo przypomina to po\u0142\u0105czenie useState i useEffect, ale zwr\u00f3\u0107cie uwag\u0119, \u017ce sygna\u0142 definiowany jest globalnie. Umo\u017cliwia to w momencie zmiany warto\u015bci w pude\u0142ku, od\u015bwie\u017cenie tylko tych komponent\u00f3w w VirtualDOM, kt\u00f3re od niego zale\u017c\u0105. <\/p>\n\n\n\n

import { signal, computed } from "@preact\/signals";\n\nconst count = signal(0);\nconst double = computed(() => count.value * 2);\neffect(() => console.log(double.value)));\n\nfunction Counter() {\n  return (\n    <button onClick={() => count.value++}>\n      {count} x 2 = {double}\n    <\/button>\n  );\n}<\/code><\/pre>\n\n\n\n
To oczywi\u015bcie jeszcze nie koniec zalet Signals. Na przestrzeni \u017cycia aplikacji, referencja sygna\u0142u nie zmienia si\u0119, wi\u0119c nie musimy obawia\u0107 si\u0119 niechcianych render\u00f3w. Zar\u00f3wno funkcja `computed` jak i `effect` nie wymaga listy zale\u017cno\u015bci i wykrywa je automatycznie. Co wi\u0119cej, je\u015bli zale\u017cno\u015bci ulegn\u0105 zmianie, ale ko\u0144cowa warto\u015b\u0107 pozostaje taka sama, dalsze zale\u017cno\u015bci nie b\u0119d\u0105 od\u015bwie\u017cane.<\/p>\n\n\n\n
Signals to biblioteka napisana w czystym JavaScript, ale jak widzieli\u015bcie na przyk\u0142adach powy\u017cej, autorzy zadbali o przygotowanie specjalnych integracji zar\u00f3wno z Preact jak i React. Szczeg\u00f3lnie ciekawie prezentuje si\u0119 ta pierwsza. Je\u015bli w JSX wykorzystamy signal, zamiast signal.value, to b\u0119dzie on traktowany jako osobny komponent. To oznacza, \u017ce je\u015bli zmieni si\u0119 jego warto\u015b\u0107, Preact zamiast renderowa\u0107 ca\u0142y komponent rodzic, od\u015bwie\u017cy tylko kr\u00f3tki fragment tekstu.<\/p>\n\n\n\n
\/\/ In this example whole Counter component will be re-rendered on count change\nconst count = signal(0);\n\nfunction Counter() {\n return (\n    <>\n       <SomeOtherComponent\/>\n       Value: {count.value}\n    <\/> \n  );\n}\n\n\/\/ In this example only count value will re-render on count change\nconst count = signal(0);\n\nfunction Counter() {\n return (\n    <>\n       <SomeOtherComponent\/>\n       Value: {count}\n    <\/> \n  );\n}\n<\/code><\/pre>\n\n\n\n
Je\u015bli zastanawiacie si\u0119, jak to mo\u017cliwe, \u017ce ca\u0142a ta magia dzia\u0142a, to wybra\u0142em si\u0119 w podr\u00f3\u017c do kodu \u017ar\u00f3d\u0142owego za Was. Signals to tak naprawd\u0119 prosta implementacja wzorca projektowego obserwator (ach te polskie nazwy <\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Na zako\u0144czenie ma\u0142y bonus dla wszystkich Angularowc\u00f3w, kt\u00f3rzy dotarli a\u017c do ko\u0144ca tej sekcji. Kiedy tw\u00f3rcy Signals pisali, \u017ce biblioteka mo\u017ce by\u0107 wykorzystywana z dowolnym frameworkiem, to naprawd\u0119 nie \u017cartowali. Na twitterze dokopa\u0142em si\u0119 do bajecznie prostej integracji z flagowym frameworkiem od Google. Dodanie do niej obs\u0142ugi ChangeDetection.OnPush to zaledwie kilka linijek kodu i znajdziecie j\u0105 w pierwszej odpowiedzi w\u0105tku. <\/p>\n\n\n
\n
\"\"
\u0179r\u00f3d\u0142o: https:\/\/twitter.com\/ashh640\/status\/1567469254034825216?s=20&t=ayfvUBJOY9u9ie4s7VzTpQ<\/a><\/figcaption><\/figure><\/div>\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n