{"id":9980,"date":"2022-04-21T15:19:10","date_gmt":"2022-04-21T13:19:10","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/"},"modified":"2022-09-19T13:16:29","modified_gmt":"2022-09-19T11:16:29","slug":"frontend-thursday-vol-84-mitosis-node-18-react-redux-v8","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/","title":{"rendered":"Frontend Thursday vol. 84 – Mitosis, Node 18, react-redux v8"},"content":{"rendered":"\n

1. Mitosis, ciekawa alternatywa dla WebComponents<\/h2>\n\n\n\n

Kiedy koncepcja Web Components zosta\u0142a po raz pierwszy zaprezentowana, zdawa\u0142o si\u0119, \u017c\u0119 b\u0119dzie ona prawdziw\u0105 rewolucj\u0105 dla Frontend Developer\u00f3w. Dzi\u0119ki wyposa\u017ceniu przegl\u0105darek w kilka nowych API (Custom Elements + Shadow Dom + HTML Template), mo\u017cliwe mia\u0142o sta\u0107 si\u0119 tworzenie w\u0142asnych, zenkapsulowanych znacznik\u00f3w HTML. Tworzone w ten spos\u00f3b komponenty mia\u0142y by\u0107 l\u017cejsze, wydajniejsze i umo\u017cliwia\u0107 \u0142atwe wsp\u00f3\u0142dzielenie mi\u0119dzy projektami. Framweorki takie jak Angular czy React stopniowo mia\u0142y sta\u0107 si\u0119 odpowiedzialne tylko za zarz\u0105dzanie stanem. Niekt\u00f3rzy posuwali si\u0119 jeszcze o krok dalej i twierdzili, \u017ce b\u0119d\u0105 one kompletnie zb\u0119dne.<\/p>\n\n\n\n

Je\u015bli wierzy\u0107 statystykom z Can I Use<\/a>, pierwsze przegl\u0105darki wspiera\u0142y Web Components ju\u017c pod koniec 2016 roku, natomiast od ko\u0144ca 2018 roku s\u0105 one wspierane przez wszystkich znacz\u0105cych graczy. Oznacza to, \u017ce od prawie 3,5 roku Web Components ciesz\u0105 si\u0119 uniwersalnym wsparciem. Mimo tego Web Components nadal s\u0105 raczej rzadko\u015bci\u0105 ni\u017c standardem. Co posz\u0142o nie tak? Powod\u00f3w jest ca\u0142kiem sporo. Zaproponowane przez przegl\u0105darki API by\u0142o lekko m\u00f3wi\u0105c toporne. Z czasem pojawi\u0142y si\u0119 frameworki, takie jak Stencil czy Lit, kt\u00f3re oferowa\u0142y bardziej przyst\u0119pne API. Obu frameworkom uda\u0142o si\u0119 zdoby\u0107 mocn\u0105 pozycj\u0119 na rynku, ale nigdy nie zago\u015bci\u0142y one w\u015br\u00f3d frontendowej czo\u0142\u00f3wki. Do tego dochodz\u0105 jeszcze problemy z Server Side Renderingiem (bo do wyrenderowania Custom Elements niezb\u0119dne jest za\u0142adowanie kodu JavaScript z serwera) i integracj\u0105 z istniej\u0105cymi frameworkami (React do dzisiaj nie posiada przyst\u0119pnego API dla WebComponents) i naszkicowana kilka lat temu bajka zmienia si\u0119 w szara rzeczywisto\u015b\u0107.<\/p>\n\n\n\n

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

Kojarzycie firm\u0119 Builder.io? Je\u015bli nie to najwy\u017cszy czas zacz\u0105\u0107 \u015bledzi\u0107 ich poczynania. Firma zajmuje si\u0119 rozwojem narz\u0119dzia Low Code\/No Code do tworzenia w\u0142asnych aplikacji, ale z punktu widzenia programist\u00f3w, to nie samo narz\u0119dzie jest najciekawsze. Firma wspiera rozw\u00f3j projekt\u00f3w Open Source takich jak Partytown (biblioteka umo\u017cliwiaj\u0105ca za\u0142adowanie i inicjalizacj\u0119 zewn\u0119trznych skrypt\u00f3w przez WebWorkery) czy Qwik (HTML-first framework, kt\u00f3ry do inicjalizacji wymaga mniej ni\u017c 1kB JavaScriptu). Do grona ciekawych rozwijanych narz\u0119dzi do\u0142\u0105cza teraz r\u00f3wnie\u017c framework Mitosis (aktualnie w fazie beta).<\/p>\n\n\n\n

Najnowsze dziecko Builder.io stara si\u0119 wyci\u0105gn\u0105c lekcj\u0119 z historii Web Components i rozwi\u0105za\u0107 problem wsp\u00f3\u0142dzielenia komponent\u00f3w pomi\u0119dzy projektami w bardziej optymalny spos\u00f3b. Framework wykorzystuje podzbi\u00f3r JSX, kt\u00f3ry kompilowany jest do pliku JSON. Nast\u0119pnie na podstawie wygenerowanego pliku odpowiednie pluginy generuj\u0105 kod w wybranej technologii. Taka architektura pozwala utrzymywa\u0107 tylko jeden codebase, kt\u00f3ry kompilujemy do wykorzystywanych w firmie framework\u00f3w. Z punktu widzenia zewn\u0119trznych zespo\u0142\u00f3w, komponenty wygl\u0105daj\u0105 jak paczki przygotowane z my\u015bl\u0105 o ich frameworku – \u017cadnych wrapper\u00f3w czy innych hack\u00f3w. Na ten moment Mitosis jest otwartej becie i kompiluje si\u0119 a\u017c do 14 technologii. Co interesuj\u0105ce, opr\u00f3cz webowych framework\u00f3w znajdziemy tu r\u00f3wnie\u017c technologie mobilne jak React Native czy Swift. Oznacza to, \u017ce Mitosis w odr\u00f3\u017cnieniu do Web Components, mo\u017ce s\u0142u\u017cy\u0107 r\u00f3wnie\u017c do wsp\u00f3\u0142dzielenia kodu mi\u0119dzy platformami.<\/p>\n\n\n\n

\/\/ ============================\n\/\/ Mitosis component definition\n\/\/ ============================\nimport { useState } from "@builder.io\/mitosis";\n\nexport default function MyComponent(props) {\n  const [name, setName] = useState("Tomek");\n\n  return (\n    <div>\n      <input\n        css={{\n          color: "red",\n        }}\n        value={name}\n        onChange={(event) => setName(event.target.value)}\n      \/>\n      Hello! I can run in React, Vue, Solid, or Liquid!\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n
\/\/ ============================\n\/\/ Mitosis Angular output component\n\/\/ ============================\nimport { Component } from "@angular\/core";\n\n@Component({\n  selector: "my-component",\n  template: `\n    <div>\n      <input\n        class="input"\n        [value]="name"\n        (input)="name = $event.target.value"\n      \/>\n\n      Hello! I can run in React, Vue, Solid, or Liquid!\n    <\/div>\n  `,\n  styles: [\n    `\n      .input {\n        color: red;\n      }\n    `,\n  ],\n})\nexport default class MyComponent {\n  name = "Tomek";\n}<\/code><\/pre>\n\n\n\n
\/\/ ============================\n\/\/ Mitosis React output component\n\/\/ ============================\nimport { useState } from "react";\n\nexport default function MyComponent(props) {\n  const [name, setName] = useState(() => "Tomek");\n\n  return (\n    <>\n      <div>\n        <input\n          className="input"\n          value={name}\n          onChange={(event) => setName(event.target.value)}\n        \/>\n        Hello! I can run in React, Vue, Solid, or Liquid!\n      <\/div>\n      <style jsx>{`\n        .input {\n          color: red;\n        }\n      `}<\/style>\n    <\/>\n  );\n}\n<\/code><\/pre>\n\n\n\n
Zach\u0119cony has\u0142ami marketingowymi postanowi\u0142em sam odrobin\u0119 poeksperymentowa\u0107 z Mitosis (framework oferuje bardzo przyst\u0119pny playground, kt\u00f3ry mo\u017cecie znale\u017a\u0107 tutaj<\/a>). Niestety w trakcie swoich eksperyment\u00f3w bardzo szybko poczu\u0142em rozczarowanie. Po pierwsze wszystkie funkcje zdefiniowane w komponencie tracone s\u0105 w momencie kompilacji do JSON\u2019a. Co gorsza,\u00a0 kompilator w \u017caden spos\u00f3b nie informuje nas, \u017ce wygenerowany kod nie b\u0119dzie dzia\u0142a\u0142. Kolejnym rozczarowaniem jest brak kompilacji plik\u00f3w CSS. W teorii mo\u017cliwe jest wi\u0119c wsp\u00f3\u0142dzielenie komponent\u00f3w mi\u0119dzy React Native i React. Jak si\u0119 jednak okazuje z jednym zastrze\u017ceniem: nasz plik CSS musi by\u0107 akceptowany zar\u00f3wno przez przegl\u0105darki jak i React Native. W tej kwestii r\u00f3wnie\u017c nie u\u015bwiadczymy b\u0142\u0119d\u00f3w czy ostrze\u017ce\u0144 ze strony kompilatora. Jeszcze gorzej jest, je\u015bli spojrzymy na wsparcie dla SwiftUI – tutaj style s\u0105 ca\u0142kowicie ignorowane, a wynikowy kod to niez\u0142y frankenstein. Je\u015bli przed wydaniem pe\u0142nej wersji tw\u00f3rcy nie dopracuj\u0105 Mitosis, to dla mnie b\u0119dzie to kolejne narz\u0119dzie przeznaczone do zapomnienia.<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/www.builder.io\/blog\/mitosis-a-quick-guide<\/a><\/p>\n\n\n\n
2. Node 12-final, Node 17-final, Node 18.0.0<\/h2>\n\n\n\n
Nie, nie przewidzieli\u015bcie si\u0119 – w minionym tygodniu ukaza\u0142y si\u0119 a\u017c 3 znacz\u0105ce wersje Node.js. W przeci\u0105gu 7 dni doczekali\u015bmy si\u0119 ostatecznego wydania dw\u00f3ch finalnych wersji major Node.js: 12 i 17. Co szczeg\u00f3lnie istotne Node 12 by\u0142 wersj\u0105 LTS, wydan\u0105 prawie ponad 3 lata temu. Czym pr\u0119dzej sprawd\u017acie, czy jakie\u015b z Waszych aplikacji nie stoj\u0105 jeszcze na Node 12 lub 17, bo od maja nie b\u0119d\u0105 one ju\u017c otrzymywa\u0107 \u0142atek bezpiecze\u0144stwa.<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Przejd\u017amy teraz do creme de la creme ostatniego tygodnia, czyli wydania Node 18. Najnowszy node, zgodnie z konwencj\u0105 wersji parzystych i nieparzystych, jest wersj\u0105 LTS i b\u0119dzie otrzymywa\u0142 wsparcie a\u017c do ko\u0144ca kwietnia 2025. Je\u015bli chodzi o nowo\u015bci, to Node.js nie przynosi rewolucji, ale wprowadza sporo interesuj\u0105cych eksperymentalnych API.<\/p>\n\n\n\n
\"\"
React 18, Java 18, Node 18 – sporo tych „pe\u0142noletnich” narz\u0119dzi w tym roku.<\/figcaption><\/figure><\/div>\n\n\n\n
Gigantycznym krokiem milowym dla kompatybilno\u015bci Node.js i przegl\u0105darek jest wprowadzenie funkcji fetch(). Implementacja oparta jest o bibliotek\u0119 Undici i co prawda w jej dokumentacji znajdziemy wzmiank\u0119, \u017ce fetch() nie jest jeszcze w pe\u0142ni kompatybilny z wersj\u0105 webow\u0105, ale tw\u00f3rcy Node.js zapewniaj\u0105, \u017ce kompatybilno\u015b\u0107 jest ju\u017c na wystarczaj\u0105cym poziomie.<\/p>\n\n\n\n
Kolejnym krokiem w stron\u0119 kierunku ujednolicenia przegl\u0105darek i serwer\u00f3w jest wprowadzenie Web Streams API, kt\u00f3re to dodaje ca\u0142y szereg globalnie dost\u0119pnych klas. Niby nic wielkiego, ale na pewno ucieszy wiele os\u00f3b odpowiedzialnych za rozw\u00f3j bibliotek.<\/p>\n\n\n\n
Poza krokami milowymi w stron\u0119 kompatybilno\u015bci z przegl\u0105darkami, nowy Node wprowadza r\u00f3wnie\u017c w\u0142asny Test Runner. Umo\u017cliwi on pisanie test\u00f3w bez zaci\u0105gania zewn\u0119trznych zale\u017cno\u015bci, a wyniki eksportowa\u0142 b\u0119dzie do powszechnie stosowanego standardu TAP. Ca\u0142o\u015b\u0107 nabiera kolorytu, je\u015bli pod uwag\u0119 we\u017amiemy ostatnie zamieszanie wok\u00f3\u0142 Jesta, kt\u00f3ry utrzymywany jest przez pojedynczego kontrybutora.<\/p>\n\n\n\n
Po nudnych wydaniach Node.js 16 i 17 wreszcie doczekali\u015bmy si\u0119 naprawd\u0119 ciekawego Node.js. Szkoda tylko, \u017ce wszystkie interesuj\u0105ce funkcjonalno\u015bci oznaczone s\u0105 p\u00f3ki co jako eksperymentalne.<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/nodejs.org\/es\/blog\/release\/v12.22.12\/
<\/a>https:\/\/nodejs.org\/en\/blog\/announcements\/v18-release-announce\/<\/a><\/p>\n\n\n\n
3. Redux gotowy na React 18<\/h2>\n\n\n\n
Pewnie dotar\u0142a ju\u017c do Was wie\u015b\u0107, \u017ce po prawie dw\u00f3ch latach od wydania React 17, doczekali\u015bmy si\u0119 wreszcie wydania React 18 (je\u015bli nie, to zapraszam do 81 edycji naszego przegl\u0105du<\/a>, w ca\u0142o\u015bci po\u015bwi\u0119conego w\u0142a\u015bnie React 18). Nowa wersja frameworku od Mety przynios\u0142a przede wszystkim opcjonalne wsp\u00f3\u0142bie\u017cne renderowanie i ca\u0142y worek nowych API wok\u00f3\u0142 tej funkcjonalno\u015bci.<\/p>\n\n\n\n
Jedn\u0105 z nowych funkcjonalno\u015bci by\u0142 hook `useSyncExternalStore`. Je\u015bli wcze\u015bniej o nim nie s\u0142yszeli\u015bcie, to nie macie si\u0119 czym martwi\u0107 – jest on cz\u0119\u015bci\u0105 API przeznaczon\u0105 specjalnie dla tw\u00f3rc\u00f3w bibliotek odpowiedzialnych za zarz\u0105dzanie stanem aplikacji. Nowy hook automatycznie wprowadza\u0142 memonizacj\u0119 selektor\u00f3w i umo\u017cliwia\u0142 wsp\u00f3\u0142bie\u017cne odczyty, przy r\u00f3wnoczesnym zapewnieniu synchroniczno\u015bci aktualizacji. Dzi\u0119ki takiej specyfikacji biblioteki do zarz\u0105dzania stanem w prosty spos\u00f3b mog\u0105 unikn\u0105\u0107 r\u00f3wnoczesnego renderowania r\u00f3\u017cnych cz\u0119\u015bci aplikacji z r\u00f3\u017cnym stanem (a sytuacja taka mo\u017ce mie\u0107 miejsce przez przerwanie renderowania, kt\u00f3re jest powszechnym zjawiskiem w renderowaniu wsp\u00f3\u0142bie\u017cnym).<\/p>\n\n\n\n
Jak si\u0119 zapewne domy\u015blacie po tym przyd\u0142ugim wst\u0119pie, najwi\u0119ksz\u0105 nowo\u015bci\u0105 w react-redux jest wykorzystanie nowo wprowadzonego hooka `useSyncExternalStore`. Aby zapewni\u0107 kompatybilno\u015b\u0107 wsteczn\u0105 tw\u00f3rcy biblioteki zmuszeni byli do\u0142\u0105czy\u0107 do paczki polyfill wa\u017c\u0105cy 600 bajt\u00f3w. Na szcz\u0119\u015bcie skutecznie mo\u017cemy si\u0119 go pozby\u0107, przez importowanie reduxa pod \u015bcie\u017ck\u0105 `react-redux\/next`<\/p>\n\n\n\n
Kolejn\u0105 spor\u0105 nowo\u015bci\u0105 w react-redux v8 jest migracja biblioteki do TypeScript. Co prawda w kodzie nadal znajdziemy sporo anotacji `@ts-ignore`, ale jest to krok w dobr\u0105 stron\u0119. No i wreszcie mo\u017cna pozby\u0107 si\u0119 z dependencji utrzymywanych przez community typ\u00f3w `@types\/react-redux`.<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/github.com\/reduxjs\/react-redux\/releases\/tag\/v8.0.0<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Tydzie\u0144 bez nowego frameworku to tydzie\u0144 stracony. Na szcz\u0119\u015bcie ten tydzie\u0144 uratowa\u0142 framework Mitosis, kt\u00f3ry stanowi ciekaw\u0105 alternatyw\u0119 dla Web Components. Ponadto w zesz\u0142ym tygodniu doczekali\u015bmy si\u0119 a\u017c 3 wa\u017cnych wyda\u0144 Node.js i Redux’a, kt\u00f3ry w pe\u0142ni wykorzystuje mo\u017cliwo\u015bci React 18. \u0141apcie kubek z ciep\u0142\u0105 kaw\u0105 w d\u0142o\u0144 i zapraszamy do lektury!<\/p>\n","protected":false},"author":12,"featured_media":8050,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-9980","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/FRONTEND-2.png","feature_image_visible":false,"estimated_reading_time":"7","feature_image_blog":false},"yoast_head":"\nFrontend Thursday vol. 84 - Mitosis, Node 18, react-redux v8 - Vived<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 84 - Mitosis, Node 18, react-redux v8 - Vived\" \/>\n<meta property=\"og:description\" content=\"Tydzie\u0144 bez nowego frameworku to tydzie\u0144 stracony. Na szcz\u0119\u015bcie ten tydzie\u0144 uratowa\u0142 framework Mitosis, kt\u00f3ry stanowi ciekaw\u0105 alternatyw\u0119 dla Web Components. Ponadto w zesz\u0142ym tygodniu doczekali\u015bmy si\u0119 a\u017c 3 wa\u017cnych wyda\u0144 Node.js i Redux'a, kt\u00f3ry w pe\u0142ni wykorzystuje mo\u017cliwo\u015bci React 18. \u0141apcie kubek z ciep\u0142\u0105 kaw\u0105 w d\u0142o\u0144 i zapraszamy do lektury!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-21T13:19:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/FRONTEND-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/FRONTEND-2.png\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 84 – Mitosis, Node 18, react-redux v8\",\"datePublished\":\"2022-04-21T13:19:10+00:00\",\"dateModified\":\"2022-09-19T11:16:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/\"},\"wordCount\":1382,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/pexels-photo-11198491-scaled.jpeg\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/\",\"name\":\"Frontend Thursday vol. 84 - Mitosis, Node 18, react-redux v8 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/pexels-photo-11198491-scaled.jpeg\",\"datePublished\":\"2022-04-21T13:19:10+00:00\",\"dateModified\":\"2022-09-19T11:16:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/pexels-photo-11198491-scaled.jpeg\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/pexels-photo-11198491-scaled.jpeg\",\"width\":2560,\"height\":1443},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 84 – Mitosis, Node 18, react-redux v8\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vived.io\/pl\/#website\",\"url\":\"https:\/\/vived.io\/pl\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vived.io\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vived.io\/pl\/#organization\",\"name\":\"Vived\",\"url\":\"https:\/\/vived.io\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"width\":136,\"height\":45,\"caption\":\"Vived\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"caption\":\"Tomasz Borowicz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frontend Thursday vol. 84 - Mitosis, Node 18, react-redux v8 - Vived","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 84 - Mitosis, Node 18, react-redux v8 - Vived","og_description":"Tydzie\u0144 bez nowego frameworku to tydzie\u0144 stracony. Na szcz\u0119\u015bcie ten tydzie\u0144 uratowa\u0142 framework Mitosis, kt\u00f3ry stanowi ciekaw\u0105 alternatyw\u0119 dla Web Components. Ponadto w zesz\u0142ym tygodniu doczekali\u015bmy si\u0119 a\u017c 3 wa\u017cnych wyda\u0144 Node.js i Redux'a, kt\u00f3ry w pe\u0142ni wykorzystuje mo\u017cliwo\u015bci React 18. \u0141apcie kubek z ciep\u0142\u0105 kaw\u0105 w d\u0142o\u0144 i zapraszamy do lektury!","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/","og_site_name":"Vived","article_published_time":"2022-04-21T13:19:10+00:00","article_modified_time":"2022-09-19T11:16:29+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/FRONTEND-2.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","twitter_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/FRONTEND-2.png","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 84 – Mitosis, Node 18, react-redux v8","datePublished":"2022-04-21T13:19:10+00:00","dateModified":"2022-09-19T11:16:29+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/"},"wordCount":1382,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/pexels-photo-11198491-scaled.jpeg","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/","name":"Frontend Thursday vol. 84 - Mitosis, Node 18, react-redux v8 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/pexels-photo-11198491-scaled.jpeg","datePublished":"2022-04-21T13:19:10+00:00","dateModified":"2022-09-19T11:16:29+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/pexels-photo-11198491-scaled.jpeg","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/pexels-photo-11198491-scaled.jpeg","width":2560,"height":1443},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-84-mitosis-node-18-react-redux-v8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 84 – Mitosis, Node 18, react-redux v8"}]},{"@type":"WebSite","@id":"https:\/\/vived.io\/pl\/#website","url":"https:\/\/vived.io\/pl\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vived.io\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/vived.io\/pl\/#organization","name":"Vived","url":"https:\/\/vived.io\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","width":136,"height":45,"caption":"Vived"},"image":{"@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb","name":"Tomasz Borowicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","caption":"Tomasz Borowicz"}}]}},"blocks_vived":[{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>1. Mitosis, ciekawa alternatywa dla WebComponents<\/h2>\n","innerContent":["\n<h2>1. Mitosis, ciekawa alternatywa dla WebComponents<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kiedy koncepcja Web Components zosta\u0142a po raz pierwszy zaprezentowana, zdawa\u0142o si\u0119, \u017c\u0119 b\u0119dzie ona prawdziw\u0105 rewolucj\u0105 dla Frontend Developer\u00f3w. Dzi\u0119ki wyposa\u017ceniu przegl\u0105darek w kilka nowych API (Custom Elements + Shadow Dom + HTML Template), mo\u017cliwe mia\u0142o sta\u0107 si\u0119 tworzenie w\u0142asnych, zenkapsulowanych znacznik\u00f3w HTML. Tworzone w ten spos\u00f3b komponenty mia\u0142y by\u0107 l\u017cejsze, wydajniejsze i umo\u017cliwia\u0107 \u0142atwe wsp\u00f3\u0142dzielenie mi\u0119dzy projektami. Framweorki takie jak Angular czy React stopniowo mia\u0142y sta\u0107 si\u0119 odpowiedzialne tylko za zarz\u0105dzanie stanem. Niekt\u00f3rzy posuwali si\u0119 jeszcze o krok dalej i twierdzili, \u017ce b\u0119d\u0105 one kompletnie zb\u0119dne.<\/p>\n","innerContent":["\n<p>Kiedy koncepcja Web Components zosta\u0142a po raz pierwszy zaprezentowana, zdawa\u0142o si\u0119, \u017c\u0119 b\u0119dzie ona prawdziw\u0105 rewolucj\u0105 dla Frontend Developer\u00f3w. Dzi\u0119ki wyposa\u017ceniu przegl\u0105darek w kilka nowych API (Custom Elements + Shadow Dom + HTML Template), mo\u017cliwe mia\u0142o sta\u0107 si\u0119 tworzenie w\u0142asnych, zenkapsulowanych znacznik\u00f3w HTML. Tworzone w ten spos\u00f3b komponenty mia\u0142y by\u0107 l\u017cejsze, wydajniejsze i umo\u017cliwia\u0107 \u0142atwe wsp\u00f3\u0142dzielenie mi\u0119dzy projektami. Framweorki takie jak Angular czy React stopniowo mia\u0142y sta\u0107 si\u0119 odpowiedzialne tylko za zarz\u0105dzanie stanem. Niekt\u00f3rzy posuwali si\u0119 jeszcze o krok dalej i twierdzili, \u017ce b\u0119d\u0105 one kompletnie zb\u0119dne.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli wierzy\u0107 statystykom z <a href=\"https:\/\/caniuse.com\/\">Can I Use<\/a>, pierwsze przegl\u0105darki wspiera\u0142y Web Components ju\u017c pod koniec 2016 roku, natomiast od ko\u0144ca 2018 roku s\u0105 one wspierane przez wszystkich znacz\u0105cych graczy. Oznacza to, \u017ce od prawie 3,5 roku Web Components ciesz\u0105 si\u0119 uniwersalnym wsparciem. Mimo tego Web Components nadal s\u0105 raczej rzadko\u015bci\u0105 ni\u017c standardem. Co posz\u0142o nie tak? Powod\u00f3w jest ca\u0142kiem sporo. Zaproponowane przez przegl\u0105darki API by\u0142o lekko m\u00f3wi\u0105c toporne. Z czasem pojawi\u0142y si\u0119 frameworki, takie jak Stencil czy Lit, kt\u00f3re oferowa\u0142y bardziej przyst\u0119pne API. Obu frameworkom uda\u0142o si\u0119 zdoby\u0107 mocn\u0105 pozycj\u0119 na rynku, ale nigdy nie zago\u015bci\u0142y one w\u015br\u00f3d frontendowej czo\u0142\u00f3wki. Do tego dochodz\u0105 jeszcze problemy z Server Side Renderingiem (bo do wyrenderowania Custom Elements niezb\u0119dne jest za\u0142adowanie kodu JavaScript z serwera) i integracj\u0105 z istniej\u0105cymi frameworkami (React do dzisiaj nie posiada przyst\u0119pnego API dla WebComponents) i naszkicowana kilka lat temu bajka zmienia si\u0119 w szara rzeczywisto\u015b\u0107.<\/p>\n","innerContent":["\n<p>Je\u015bli wierzy\u0107 statystykom z <a href=\"https:\/\/caniuse.com\/\">Can I Use<\/a>, pierwsze przegl\u0105darki wspiera\u0142y Web Components ju\u017c pod koniec 2016 roku, natomiast od ko\u0144ca 2018 roku s\u0105 one wspierane przez wszystkich znacz\u0105cych graczy. Oznacza to, \u017ce od prawie 3,5 roku Web Components ciesz\u0105 si\u0119 uniwersalnym wsparciem. Mimo tego Web Components nadal s\u0105 raczej rzadko\u015bci\u0105 ni\u017c standardem. Co posz\u0142o nie tak? Powod\u00f3w jest ca\u0142kiem sporo. Zaproponowane przez przegl\u0105darki API by\u0142o lekko m\u00f3wi\u0105c toporne. Z czasem pojawi\u0142y si\u0119 frameworki, takie jak Stencil czy Lit, kt\u00f3re oferowa\u0142y bardziej przyst\u0119pne API. Obu frameworkom uda\u0142o si\u0119 zdoby\u0107 mocn\u0105 pozycj\u0119 na rynku, ale nigdy nie zago\u015bci\u0142y one w\u015br\u00f3d frontendowej czo\u0142\u00f3wki. Do tego dochodz\u0105 jeszcze problemy z Server Side Renderingiem (bo do wyrenderowania Custom Elements niezb\u0119dne jest za\u0142adowanie kodu JavaScript z serwera) i integracj\u0105 z istniej\u0105cymi frameworkami (React do dzisiaj nie posiada przyst\u0119pnego API dla WebComponents) i naszkicowana kilka lat temu bajka zmienia si\u0119 w szara rzeczywisto\u015b\u0107.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4237,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6dbs87.jpeg\" alt=\"\" class=\"wp-image-4237\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6dbs87.jpeg\" alt=\"\" class=\"wp-image-4237\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kojarzycie firm\u0119 Builder.io? Je\u015bli nie to najwy\u017cszy czas zacz\u0105\u0107 \u015bledzi\u0107 ich poczynania. Firma zajmuje si\u0119 rozwojem narz\u0119dzia Low Code\/No Code do tworzenia w\u0142asnych aplikacji, ale z punktu widzenia programist\u00f3w, to nie samo narz\u0119dzie jest najciekawsze. Firma wspiera rozw\u00f3j projekt\u00f3w Open Source takich jak Partytown (biblioteka umo\u017cliwiaj\u0105ca za\u0142adowanie i inicjalizacj\u0119 zewn\u0119trznych skrypt\u00f3w przez WebWorkery) czy Qwik (HTML-first framework, kt\u00f3ry do inicjalizacji wymaga mniej ni\u017c 1kB JavaScriptu). Do grona ciekawych rozwijanych narz\u0119dzi do\u0142\u0105cza teraz r\u00f3wnie\u017c framework Mitosis (aktualnie w fazie beta).<\/p>\n","innerContent":["\n<p>Kojarzycie firm\u0119 Builder.io? Je\u015bli nie to najwy\u017cszy czas zacz\u0105\u0107 \u015bledzi\u0107 ich poczynania. Firma zajmuje si\u0119 rozwojem narz\u0119dzia Low Code\/No Code do tworzenia w\u0142asnych aplikacji, ale z punktu widzenia programist\u00f3w, to nie samo narz\u0119dzie jest najciekawsze. Firma wspiera rozw\u00f3j projekt\u00f3w Open Source takich jak Partytown (biblioteka umo\u017cliwiaj\u0105ca za\u0142adowanie i inicjalizacj\u0119 zewn\u0119trznych skrypt\u00f3w przez WebWorkery) czy Qwik (HTML-first framework, kt\u00f3ry do inicjalizacji wymaga mniej ni\u017c 1kB JavaScriptu). Do grona ciekawych rozwijanych narz\u0119dzi do\u0142\u0105cza teraz r\u00f3wnie\u017c framework Mitosis (aktualnie w fazie beta).<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Najnowsze dziecko Builder.io stara si\u0119 wyci\u0105gn\u0105c lekcj\u0119 z historii Web Components i rozwi\u0105za\u0107 problem wsp\u00f3\u0142dzielenia komponent\u00f3w pomi\u0119dzy projektami w bardziej optymalny spos\u00f3b. Framework wykorzystuje podzbi\u00f3r JSX, kt\u00f3ry kompilowany jest do pliku JSON. Nast\u0119pnie na podstawie wygenerowanego pliku odpowiednie pluginy generuj\u0105 kod w wybranej technologii. Taka architektura pozwala utrzymywa\u0107 tylko jeden codebase, kt\u00f3ry kompilujemy do wykorzystywanych w firmie framework\u00f3w. Z punktu widzenia zewn\u0119trznych zespo\u0142\u00f3w, komponenty wygl\u0105daj\u0105 jak paczki przygotowane z my\u015bl\u0105 o ich frameworku - \u017cadnych wrapper\u00f3w czy innych hack\u00f3w. Na ten moment Mitosis jest otwartej becie i kompiluje si\u0119 a\u017c do 14 technologii. Co interesuj\u0105ce, opr\u00f3cz webowych framework\u00f3w znajdziemy tu r\u00f3wnie\u017c technologie mobilne jak React Native czy Swift. Oznacza to, \u017ce Mitosis w odr\u00f3\u017cnieniu do Web Components, mo\u017ce s\u0142u\u017cy\u0107 r\u00f3wnie\u017c do wsp\u00f3\u0142dzielenia kodu mi\u0119dzy platformami.<\/p>\n","innerContent":["\n<p>Najnowsze dziecko Builder.io stara si\u0119 wyci\u0105gn\u0105c lekcj\u0119 z historii Web Components i rozwi\u0105za\u0107 problem wsp\u00f3\u0142dzielenia komponent\u00f3w pomi\u0119dzy projektami w bardziej optymalny spos\u00f3b. Framework wykorzystuje podzbi\u00f3r JSX, kt\u00f3ry kompilowany jest do pliku JSON. Nast\u0119pnie na podstawie wygenerowanego pliku odpowiednie pluginy generuj\u0105 kod w wybranej technologii. Taka architektura pozwala utrzymywa\u0107 tylko jeden codebase, kt\u00f3ry kompilujemy do wykorzystywanych w firmie framework\u00f3w. Z punktu widzenia zewn\u0119trznych zespo\u0142\u00f3w, komponenty wygl\u0105daj\u0105 jak paczki przygotowane z my\u015bl\u0105 o ich frameworku - \u017cadnych wrapper\u00f3w czy innych hack\u00f3w. Na ten moment Mitosis jest otwartej becie i kompiluje si\u0119 a\u017c do 14 technologii. Co interesuj\u0105ce, opr\u00f3cz webowych framework\u00f3w znajdziemy tu r\u00f3wnie\u017c technologie mobilne jak React Native czy Swift. Oznacza to, \u017ce Mitosis w odr\u00f3\u017cnieniu do Web Components, mo\u017ce s\u0142u\u017cy\u0107 r\u00f3wnie\u017c do wsp\u00f3\u0142dzielenia kodu mi\u0119dzy platformami.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ ============================\n\/\/ Mitosis component definition\n\/\/ ============================\nimport { useState } from \"@builder.io\/mitosis\";\n\nexport default function MyComponent(props) {\n  const [name, setName] = useState(\"Tomek\");\n\n  return (\n    <div>\n      <input\n        css={{\n          color: \"red\",\n        }}\n        value={name}\n        onChange={(event) => setName(event.target.value)}\n      \/>\n      Hello! I can run in React, Vue, Solid, or Liquid!\n    <\/div>\n  );\n}\n<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ ============================\n\/\/ Mitosis component definition\n\/\/ ============================\nimport { useState } from \"@builder.io\/mitosis\";\n\nexport default function MyComponent(props) {\n  const [name, setName] = useState(\"Tomek\");\n\n  return (\n    <div>\n      <input\n        css={{\n          color: \"red\",\n        }}\n        value={name}\n        onChange={(event) => setName(event.target.value)}\n      \/>\n      Hello! I can run in React, Vue, Solid, or Liquid!\n    <\/div>\n  );\n}\n<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ ============================\n\/\/ Mitosis Angular output component\n\/\/ ============================\nimport { Component } from \"@angular\/core\";\n\n@Component({\n  selector: \"my-component\",\n  template: `\n    <div>\n      <input\n        class=\"input\"\n        [value]=\"name\"\n        (input)=\"name = $event.target.value\"\n      \/>\n\n      Hello! I can run in React, Vue, Solid, or Liquid!\n    <\/div>\n  `,\n  styles: [\n    `\n      .input {\n        color: red;\n      }\n    `,\n  ],\n})\nexport default class MyComponent {\n  name = \"Tomek\";\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ ============================\n\/\/ Mitosis Angular output component\n\/\/ ============================\nimport { Component } from \"@angular\/core\";\n\n@Component({\n  selector: \"my-component\",\n  template: `\n    <div>\n      <input\n        class=\"input\"\n        [value]=\"name\"\n        (input)=\"name = $event.target.value\"\n      \/>\n\n      Hello! I can run in React, Vue, Solid, or Liquid!\n    <\/div>\n  `,\n  styles: [\n    `\n      .input {\n        color: red;\n      }\n    `,\n  ],\n})\nexport default class MyComponent {\n  name = \"Tomek\";\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ ============================\n\/\/ Mitosis React output component\n\/\/ ============================\nimport { useState } from \"react\";\n\nexport default function MyComponent(props) {\n  const [name, setName] = useState(() => \"Tomek\");\n\n  return (\n    <>\n      <div>\n        <input\n          className=\"input\"\n          value={name}\n          onChange={(event) => setName(event.target.value)}\n        \/>\n        Hello! I can run in React, Vue, Solid, or Liquid!\n      <\/div>\n      <style jsx>{`\n        .input {\n          color: red;\n        }\n      `}<\/style>\n    <\/>\n  );\n}\n<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ ============================\n\/\/ Mitosis React output component\n\/\/ ============================\nimport { useState } from \"react\";\n\nexport default function MyComponent(props) {\n  const [name, setName] = useState(() => \"Tomek\");\n\n  return (\n    <>\n      <div>\n        <input\n          className=\"input\"\n          value={name}\n          onChange={(event) => setName(event.target.value)}\n        \/>\n        Hello! I can run in React, Vue, Solid, or Liquid!\n      <\/div>\n      <style jsx>{`\n        .input {\n          color: red;\n        }\n      `}<\/style>\n    <\/>\n  );\n}\n<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zach\u0119cony has\u0142ami marketingowymi postanowi\u0142em sam odrobin\u0119 poeksperymentowa\u0107 z Mitosis (framework oferuje bardzo przyst\u0119pny playground, kt\u00f3ry mo\u017cecie znale\u017a\u0107 <a href=\"https:\/\/mitosis.builder.io\/?outputTab=react\">tutaj<\/a>). Niestety w trakcie swoich eksperyment\u00f3w bardzo szybko poczu\u0142em rozczarowanie. Po pierwsze wszystkie funkcje zdefiniowane w komponencie tracone s\u0105 w momencie kompilacji do JSON\u2019a. Co gorsza,\u00a0 kompilator w \u017caden spos\u00f3b nie informuje nas, \u017ce wygenerowany kod nie b\u0119dzie dzia\u0142a\u0142. Kolejnym rozczarowaniem jest brak kompilacji plik\u00f3w CSS. W teorii mo\u017cliwe jest wi\u0119c wsp\u00f3\u0142dzielenie komponent\u00f3w mi\u0119dzy React Native i React. Jak si\u0119 jednak okazuje z jednym zastrze\u017ceniem: nasz plik CSS musi by\u0107 akceptowany zar\u00f3wno przez przegl\u0105darki jak i React Native. W tej kwestii r\u00f3wnie\u017c nie u\u015bwiadczymy b\u0142\u0119d\u00f3w czy ostrze\u017ce\u0144 ze strony kompilatora. Jeszcze gorzej jest, je\u015bli spojrzymy na wsparcie dla SwiftUI - tutaj style s\u0105 ca\u0142kowicie ignorowane, a wynikowy kod to niez\u0142y frankenstein. Je\u015bli przed wydaniem pe\u0142nej wersji tw\u00f3rcy nie dopracuj\u0105 Mitosis, to dla mnie b\u0119dzie to kolejne narz\u0119dzie przeznaczone do zapomnienia.<\/p>\n","innerContent":["\n<p>Zach\u0119cony has\u0142ami marketingowymi postanowi\u0142em sam odrobin\u0119 poeksperymentowa\u0107 z Mitosis (framework oferuje bardzo przyst\u0119pny playground, kt\u00f3ry mo\u017cecie znale\u017a\u0107 <a href=\"https:\/\/mitosis.builder.io\/?outputTab=react\">tutaj<\/a>). Niestety w trakcie swoich eksperyment\u00f3w bardzo szybko poczu\u0142em rozczarowanie. Po pierwsze wszystkie funkcje zdefiniowane w komponencie tracone s\u0105 w momencie kompilacji do JSON\u2019a. Co gorsza,\u00a0 kompilator w \u017caden spos\u00f3b nie informuje nas, \u017ce wygenerowany kod nie b\u0119dzie dzia\u0142a\u0142. Kolejnym rozczarowaniem jest brak kompilacji plik\u00f3w CSS. W teorii mo\u017cliwe jest wi\u0119c wsp\u00f3\u0142dzielenie komponent\u00f3w mi\u0119dzy React Native i React. Jak si\u0119 jednak okazuje z jednym zastrze\u017ceniem: nasz plik CSS musi by\u0107 akceptowany zar\u00f3wno przez przegl\u0105darki jak i React Native. W tej kwestii r\u00f3wnie\u017c nie u\u015bwiadczymy b\u0142\u0119d\u00f3w czy ostrze\u017ce\u0144 ze strony kompilatora. Jeszcze gorzej jest, je\u015bli spojrzymy na wsparcie dla SwiftUI - tutaj style s\u0105 ca\u0142kowicie ignorowane, a wynikowy kod to niez\u0142y frankenstein. Je\u015bli przed wydaniem pe\u0142nej wersji tw\u00f3rcy nie dopracuj\u0105 Mitosis, to dla mnie b\u0119dzie to kolejne narz\u0119dzie przeznaczone do zapomnienia.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4238,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6dbrv6.jpeg\" alt=\"\" class=\"wp-image-4238\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6dbrv6.jpeg\" alt=\"\" class=\"wp-image-4238\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/www.builder.io\/blog\/mitosis-a-quick-guide\">https:\/\/www.builder.io\/blog\/mitosis-a-quick-guide<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/www.builder.io\/blog\/mitosis-a-quick-guide\">https:\/\/www.builder.io\/blog\/mitosis-a-quick-guide<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. Node 12-final, Node 17-final, Node 18.0.0<\/h2>\n","innerContent":["\n<h2>2. Node 12-final, Node 17-final, Node 18.0.0<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nie, nie przewidzieli\u015bcie si\u0119 - w minionym tygodniu ukaza\u0142y si\u0119 a\u017c 3 znacz\u0105ce wersje Node.js. W przeci\u0105gu 7 dni doczekali\u015bmy si\u0119 ostatecznego wydania dw\u00f3ch finalnych wersji major Node.js: 12 i 17. Co szczeg\u00f3lnie istotne Node 12 by\u0142 wersj\u0105 LTS, wydan\u0105 prawie ponad 3 lata temu. Czym pr\u0119dzej sprawd\u017acie, czy jakie\u015b z Waszych aplikacji nie stoj\u0105 jeszcze na Node 12 lub 17, bo od maja nie b\u0119d\u0105 one ju\u017c otrzymywa\u0107 \u0142atek bezpiecze\u0144stwa.<\/p>\n","innerContent":["\n<p>Nie, nie przewidzieli\u015bcie si\u0119 - w minionym tygodniu ukaza\u0142y si\u0119 a\u017c 3 znacz\u0105ce wersje Node.js. W przeci\u0105gu 7 dni doczekali\u015bmy si\u0119 ostatecznego wydania dw\u00f3ch finalnych wersji major Node.js: 12 i 17. Co szczeg\u00f3lnie istotne Node 12 by\u0142 wersj\u0105 LTS, wydan\u0105 prawie ponad 3 lata temu. Czym pr\u0119dzej sprawd\u017acie, czy jakie\u015b z Waszych aplikacji nie stoj\u0105 jeszcze na Node 12 lub 17, bo od maja nie b\u0119d\u0105 one ju\u017c otrzymywa\u0107 \u0142atek bezpiecze\u0144stwa.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4239,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6dbsn0.jpeg\" alt=\"\" class=\"wp-image-4239\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/6dbsn0.jpeg\" alt=\"\" class=\"wp-image-4239\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Przejd\u017amy teraz do creme de la creme ostatniego tygodnia, czyli wydania Node 18. Najnowszy node, zgodnie z konwencj\u0105 wersji parzystych i nieparzystych, jest wersj\u0105 LTS i b\u0119dzie otrzymywa\u0142 wsparcie a\u017c do ko\u0144ca kwietnia 2025. Je\u015bli chodzi o nowo\u015bci, to Node.js nie przynosi rewolucji, ale wprowadza sporo interesuj\u0105cych eksperymentalnych API.<\/p>\n","innerContent":["\n<p>Przejd\u017amy teraz do creme de la creme ostatniego tygodnia, czyli wydania Node 18. Najnowszy node, zgodnie z konwencj\u0105 wersji parzystych i nieparzystych, jest wersj\u0105 LTS i b\u0119dzie otrzymywa\u0142 wsparcie a\u017c do ko\u0144ca kwietnia 2025. Je\u015bli chodzi o nowo\u015bci, to Node.js nie przynosi rewolucji, ale wprowadza sporo interesuj\u0105cych eksperymentalnych API.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4240,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/giphy-10.gif\" alt=\"\" class=\"wp-image-4240\"\/><figcaption>React 18, Java 18, Node 18 - sporo tych \"pe\u0142noletnich\" narz\u0119dzi w tym roku.<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/04\/giphy-10.gif\" alt=\"\" class=\"wp-image-4240\"\/><figcaption>React 18, Java 18, Node 18 - sporo tych \"pe\u0142noletnich\" narz\u0119dzi w tym roku.<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Gigantycznym krokiem milowym dla kompatybilno\u015bci Node.js i przegl\u0105darek jest wprowadzenie funkcji fetch(). Implementacja oparta jest o bibliotek\u0119 Undici i co prawda w jej dokumentacji znajdziemy wzmiank\u0119, \u017ce fetch() nie jest jeszcze w pe\u0142ni kompatybilny z wersj\u0105 webow\u0105, ale tw\u00f3rcy Node.js zapewniaj\u0105, \u017ce kompatybilno\u015b\u0107 jest ju\u017c na wystarczaj\u0105cym poziomie.<\/p>\n","innerContent":["\n<p>Gigantycznym krokiem milowym dla kompatybilno\u015bci Node.js i przegl\u0105darek jest wprowadzenie funkcji fetch(). Implementacja oparta jest o bibliotek\u0119 Undici i co prawda w jej dokumentacji znajdziemy wzmiank\u0119, \u017ce fetch() nie jest jeszcze w pe\u0142ni kompatybilny z wersj\u0105 webow\u0105, ale tw\u00f3rcy Node.js zapewniaj\u0105, \u017ce kompatybilno\u015b\u0107 jest ju\u017c na wystarczaj\u0105cym poziomie.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kolejnym krokiem w stron\u0119 kierunku ujednolicenia przegl\u0105darek i serwer\u00f3w jest wprowadzenie Web Streams API, kt\u00f3re to dodaje ca\u0142y szereg globalnie dost\u0119pnych klas. Niby nic wielkiego, ale na pewno ucieszy wiele os\u00f3b odpowiedzialnych za rozw\u00f3j bibliotek.<\/p>\n","innerContent":["\n<p>Kolejnym krokiem w stron\u0119 kierunku ujednolicenia przegl\u0105darek i serwer\u00f3w jest wprowadzenie Web Streams API, kt\u00f3re to dodaje ca\u0142y szereg globalnie dost\u0119pnych klas. Niby nic wielkiego, ale na pewno ucieszy wiele os\u00f3b odpowiedzialnych za rozw\u00f3j bibliotek.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Poza krokami milowymi w stron\u0119 kompatybilno\u015bci z przegl\u0105darkami, nowy Node wprowadza r\u00f3wnie\u017c w\u0142asny Test Runner. Umo\u017cliwi on pisanie test\u00f3w bez zaci\u0105gania zewn\u0119trznych zale\u017cno\u015bci, a wyniki eksportowa\u0142 b\u0119dzie do powszechnie stosowanego standardu TAP. Ca\u0142o\u015b\u0107 nabiera kolorytu, je\u015bli pod uwag\u0119 we\u017amiemy ostatnie zamieszanie wok\u00f3\u0142 Jesta, kt\u00f3ry utrzymywany jest przez pojedynczego kontrybutora.<\/p>\n","innerContent":["\n<p>Poza krokami milowymi w stron\u0119 kompatybilno\u015bci z przegl\u0105darkami, nowy Node wprowadza r\u00f3wnie\u017c w\u0142asny Test Runner. Umo\u017cliwi on pisanie test\u00f3w bez zaci\u0105gania zewn\u0119trznych zale\u017cno\u015bci, a wyniki eksportowa\u0142 b\u0119dzie do powszechnie stosowanego standardu TAP. Ca\u0142o\u015b\u0107 nabiera kolorytu, je\u015bli pod uwag\u0119 we\u017amiemy ostatnie zamieszanie wok\u00f3\u0142 Jesta, kt\u00f3ry utrzymywany jest przez pojedynczego kontrybutora.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Po nudnych wydaniach Node.js 16 i 17 wreszcie doczekali\u015bmy si\u0119 naprawd\u0119 ciekawego Node.js. Szkoda tylko, \u017ce wszystkie interesuj\u0105ce funkcjonalno\u015bci oznaczone s\u0105 p\u00f3ki co jako eksperymentalne.<\/p>\n","innerContent":["\n<p>Po nudnych wydaniach Node.js 16 i 17 wreszcie doczekali\u015bmy si\u0119 naprawd\u0119 ciekawego Node.js. Szkoda tylko, \u017ce wszystkie interesuj\u0105ce funkcjonalno\u015bci oznaczone s\u0105 p\u00f3ki co jako eksperymentalne.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/nodejs.org\/es\/blog\/release\/v12.22.12\/\">https:\/\/nodejs.org\/es\/blog\/release\/v12.22.12\/<br><\/a><a href=\"https:\/\/nodejs.org\/en\/blog\/announcements\/v18-release-announce\/\">https:\/\/nodejs.org\/en\/blog\/announcements\/v18-release-announce\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/nodejs.org\/es\/blog\/release\/v12.22.12\/\">https:\/\/nodejs.org\/es\/blog\/release\/v12.22.12\/<br><\/a><a href=\"https:\/\/nodejs.org\/en\/blog\/announcements\/v18-release-announce\/\">https:\/\/nodejs.org\/en\/blog\/announcements\/v18-release-announce\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>3. Redux gotowy na React 18<\/h2>\n","innerContent":["\n<h2>3. Redux gotowy na React 18<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Pewnie dotar\u0142a ju\u017c do Was wie\u015b\u0107, \u017ce po prawie dw\u00f3ch latach od wydania React 17, doczekali\u015bmy si\u0119 wreszcie wydania React 18 (je\u015bli nie, to zapraszam do <a href=\"https:\/\/vived.io\/frontend-thursday-vol-81-react-18\/\">81 edycji naszego przegl\u0105du<\/a>, w ca\u0142o\u015bci po\u015bwi\u0119conego w\u0142a\u015bnie React 18). Nowa wersja frameworku od Mety przynios\u0142a przede wszystkim opcjonalne wsp\u00f3\u0142bie\u017cne renderowanie i ca\u0142y worek nowych API wok\u00f3\u0142 tej funkcjonalno\u015bci.<\/p>\n","innerContent":["\n<p>Pewnie dotar\u0142a ju\u017c do Was wie\u015b\u0107, \u017ce po prawie dw\u00f3ch latach od wydania React 17, doczekali\u015bmy si\u0119 wreszcie wydania React 18 (je\u015bli nie, to zapraszam do <a href=\"https:\/\/vived.io\/frontend-thursday-vol-81-react-18\/\">81 edycji naszego przegl\u0105du<\/a>, w ca\u0142o\u015bci po\u015bwi\u0119conego w\u0142a\u015bnie React 18). Nowa wersja frameworku od Mety przynios\u0142a przede wszystkim opcjonalne wsp\u00f3\u0142bie\u017cne renderowanie i ca\u0142y worek nowych API wok\u00f3\u0142 tej funkcjonalno\u015bci.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Jedn\u0105 z nowych funkcjonalno\u015bci by\u0142 hook `useSyncExternalStore`. Je\u015bli wcze\u015bniej o nim nie s\u0142yszeli\u015bcie, to nie macie si\u0119 czym martwi\u0107 - jest on cz\u0119\u015bci\u0105 API przeznaczon\u0105 specjalnie dla tw\u00f3rc\u00f3w bibliotek odpowiedzialnych za zarz\u0105dzanie stanem aplikacji. Nowy hook automatycznie wprowadza\u0142 memonizacj\u0119 selektor\u00f3w i umo\u017cliwia\u0142 wsp\u00f3\u0142bie\u017cne odczyty, przy r\u00f3wnoczesnym zapewnieniu synchroniczno\u015bci aktualizacji. Dzi\u0119ki takiej specyfikacji biblioteki do zarz\u0105dzania stanem w prosty spos\u00f3b mog\u0105 unikn\u0105\u0107 r\u00f3wnoczesnego renderowania r\u00f3\u017cnych cz\u0119\u015bci aplikacji z r\u00f3\u017cnym stanem (a sytuacja taka mo\u017ce mie\u0107 miejsce przez przerwanie renderowania, kt\u00f3re jest powszechnym zjawiskiem w renderowaniu wsp\u00f3\u0142bie\u017cnym).<\/p>\n","innerContent":["\n<p>Jedn\u0105 z nowych funkcjonalno\u015bci by\u0142 hook `useSyncExternalStore`. Je\u015bli wcze\u015bniej o nim nie s\u0142yszeli\u015bcie, to nie macie si\u0119 czym martwi\u0107 - jest on cz\u0119\u015bci\u0105 API przeznaczon\u0105 specjalnie dla tw\u00f3rc\u00f3w bibliotek odpowiedzialnych za zarz\u0105dzanie stanem aplikacji. Nowy hook automatycznie wprowadza\u0142 memonizacj\u0119 selektor\u00f3w i umo\u017cliwia\u0142 wsp\u00f3\u0142bie\u017cne odczyty, przy r\u00f3wnoczesnym zapewnieniu synchroniczno\u015bci aktualizacji. Dzi\u0119ki takiej specyfikacji biblioteki do zarz\u0105dzania stanem w prosty spos\u00f3b mog\u0105 unikn\u0105\u0107 r\u00f3wnoczesnego renderowania r\u00f3\u017cnych cz\u0119\u015bci aplikacji z r\u00f3\u017cnym stanem (a sytuacja taka mo\u017ce mie\u0107 miejsce przez przerwanie renderowania, kt\u00f3re jest powszechnym zjawiskiem w renderowaniu wsp\u00f3\u0142bie\u017cnym).<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Jak si\u0119 zapewne domy\u015blacie po tym przyd\u0142ugim wst\u0119pie, najwi\u0119ksz\u0105 nowo\u015bci\u0105 w react-redux jest wykorzystanie nowo wprowadzonego hooka `useSyncExternalStore`. Aby zapewni\u0107 kompatybilno\u015b\u0107 wsteczn\u0105 tw\u00f3rcy biblioteki zmuszeni byli do\u0142\u0105czy\u0107 do paczki polyfill wa\u017c\u0105cy 600 bajt\u00f3w. Na szcz\u0119\u015bcie skutecznie mo\u017cemy si\u0119 go pozby\u0107, przez importowanie reduxa pod \u015bcie\u017ck\u0105 `react-redux\/next`<\/p>\n","innerContent":["\n<p>Jak si\u0119 zapewne domy\u015blacie po tym przyd\u0142ugim wst\u0119pie, najwi\u0119ksz\u0105 nowo\u015bci\u0105 w react-redux jest wykorzystanie nowo wprowadzonego hooka `useSyncExternalStore`. Aby zapewni\u0107 kompatybilno\u015b\u0107 wsteczn\u0105 tw\u00f3rcy biblioteki zmuszeni byli do\u0142\u0105czy\u0107 do paczki polyfill wa\u017c\u0105cy 600 bajt\u00f3w. Na szcz\u0119\u015bcie skutecznie mo\u017cemy si\u0119 go pozby\u0107, przez importowanie reduxa pod \u015bcie\u017ck\u0105 `react-redux\/next`<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kolejn\u0105 spor\u0105 nowo\u015bci\u0105 w react-redux v8 jest migracja biblioteki do TypeScript. Co prawda w kodzie nadal znajdziemy sporo anotacji `@ts-ignore`, ale jest to krok w dobr\u0105 stron\u0119. No i wreszcie mo\u017cna pozby\u0107 si\u0119 z dependencji utrzymywanych przez community typ\u00f3w `@types\/react-redux`.<\/p>\n","innerContent":["\n<p>Kolejn\u0105 spor\u0105 nowo\u015bci\u0105 w react-redux v8 jest migracja biblioteki do TypeScript. Co prawda w kodzie nadal znajdziemy sporo anotacji `@ts-ignore`, ale jest to krok w dobr\u0105 stron\u0119. No i wreszcie mo\u017cna pozby\u0107 si\u0119 z dependencji utrzymywanych przez community typ\u00f3w `@types\/react-redux`.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/github.com\/reduxjs\/react-redux\/releases\/tag\/v8.0.0\">https:\/\/github.com\/reduxjs\/react-redux\/releases\/tag\/v8.0.0<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/github.com\/reduxjs\/react-redux\/releases\/tag\/v8.0.0\">https:\/\/github.com\/reduxjs\/react-redux\/releases\/tag\/v8.0.0<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/comments?post=9980"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9980\/revisions"}],"predecessor-version":[{"id":10506,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9980\/revisions\/10506"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/8050"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=9980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=9980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=9980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}