{"id":10053,"date":"2021-11-11T11:24:39","date_gmt":"2021-11-11T10:24:39","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/"},"modified":"2022-09-19T13:16:35","modified_gmt":"2022-09-19T11:16:35","slug":"frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/","title":{"rendered":"Frontend Thursday vol. 63 &#8211; Hydrogen, Interactive Stories, User Flows w Chrome 97"},"content":{"rendered":"\n<h2 id=\"1-hydrogen-nowy-framework-od-shopify\" data-num=1>1. Hydrogen &#8211; nowy framework od Shopify<\/h2>\n\n\n\n<p>Ach czym\u017ce by\u0142by JavaScript, gdyby co tydzie\u0144 nie pojawia\u0142 si\u0119 jaki\u015b nowy framework\u2026 Po ponad roku pisania cotygodniowych podsumowa\u0144 na w\u0142asnej sk\u00f3rze przekona\u0142em si\u0119 jak daleki od prawdy jest ten stereotyp. \u015arodowisko JavaScriptu mocno dojrza\u0142o w ostatnich latach. Nowe rozwi\u0105zania pojawiaj\u0105 si\u0119 coraz rzadziej, a narz\u0119dziom coraz ci\u0119\u017cej jest przebi\u0107 si\u0119 do globalnej \u015bwiadomo\u015bci programist\u00f3w. Patrz\u0105c na ostatnie du\u017ce wydania Reacta czy Angulara nawet breaking changes zdarzaj\u0105 si\u0119 ju\u017c coraz rzadziej.<\/p>\n\n\n\n<p>W tym tygodniu jednak na placu gry rzeczywi\u015bcie pojawi\u0142 si\u0119 nowy gracz. Jest to zawodnik nie byle jaki, bo za Hydrogen stoi dobrze dofinansowana firma jak\u0105 jest Shopify. Je\u015bli nigdy o niej nie s\u0142yszeli\u015bcie, to jest to Kanadyjska sp\u00f3\u0142ka zajmuj\u0105ca si\u0119 e-commerce, z kt\u00f3rej rozwi\u0105za\u0144 korzysta prawie 2 miliony firm na ca\u0142ym \u015bwiecie. Wed\u0142ug Wikipedii w 2020 roku ich przych\u00f3d wyni\u00f3s\u0142 prawie 3 miliardy dolar\u00f3w, a doch\u00f3d osi\u0105gn\u0105\u0142 warto\u015b\u0107 320 milion\u00f3w.<\/p>\n\n\n\n<p>Hydrogen to mocno opinionated (pr\u00f3bowa\u0142em przet\u0142umaczy\u0107 ten przymiotnik na j\u0119zyk polski, ale poleg\u0142em &#8211; przepraszam Was czytelnicy) narz\u0119dzie oparte o Reacta. Do budowania aplikacji wykorzystywany jest Vite, a do stylowania Tailwind (chocia\u017c na tym polu ma by\u0107 dost\u0119pna wi\u0119ksza personalizacja). Domy\u015blnie wygenerowany projekt integruje si\u0119 z API Shopify przez GraphQL. Routing oparty jest o React Router, ale zmodyfikowany tak, aby \u015bcie\u017ckami w aplikacji zarz\u0105dza\u0107 z poziomu systemu plik\u00f3w. W samym za\u015b centrum frameworku le\u017cy Server Side Rendering i React Server Side Components oraz automatycznie skonfigurowany cache.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"500\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5to50o.jpeg\" alt=\"\" class=\"wp-image-3138\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5to50o.jpeg 666w, https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5to50o-300x225.jpeg 300w\" sizes=\"auto, (max-width: 666px) 100vw, 666px\" \/><figcaption>Patrz\u0105c na to, \u017ce Next.js kilka tygodniu temu r\u00f3wnie\u017c przedstawi\u0142 wsparcie dla Server Side Components, co\u015b czuj\u0119 w ko\u015bciach, \u017ce w 2022 roku to one b\u0119d\u0105 \u2018The Next Big Thing\u201d.<\/figcaption><\/figure><\/div>\n\n\n\n<p>Zauwa\u017cyli\u015bcie ju\u017c, \u017ce Hydrogen mocno przypomina Next.js? No to pewnie nie zdziwi Was, \u017ce Shopify podobnie jak Vercel r\u00f3wnie\u017c planuje uruchomi\u0107 swoj\u0105 chmur\u0119 na kt\u00f3rej najtaniej i najwygodniej b\u0119dzie uruchomi\u0107 ich framework. Ci\u0119\u017cko powiedzie\u0107 czy Next.js i Hydrogen stan\u0105 si\u0119 w najbli\u017cszej przysz\u0142o\u015bci bezpo\u015brednimi konkurentami. Jedno jest pewne &#8211; na technologicznej rywalizacji dw\u00f3ch dobrze dofinansowanych projekt\u00f3w my deweloperzy mo\u017cemy tylko zyska\u0107.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"579\" height=\"431\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5to4iz.jpeg\" alt=\"\" class=\"wp-image-3139\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5to4iz.jpeg 579w, https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5to4iz-300x223.jpeg 300w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/hydrogen.shopify.dev\/?utm_source=twitter_devs&amp;utm_medium=social&amp;utm_campaign=hydrogendp\">https:\/\/hydrogen.shopify.dev\/?utm_source=twitter_devs&amp;utm_medium=social&amp;utm_campaign=hydrogendp<\/a><br><a href=\"https:\/\/www.youtube.com\/watch?v=FPNZkPqUFIU&amp;feature=emb_imp_woyt\">https:\/\/www.youtube.com\/watch?v=FPNZkPqUFIU&amp;feature=emb_imp_woyt<\/a><br><a href=\"https:\/\/www.youtube.com\/watch?v=mAsM9c2sGjA\">https:\/\/www.youtube.com\/watch?v=mAsM9c2sGjA<\/a><\/p>\n\n\n\n<h2 id=\"2-storybook-wprowadza-interaktywe-stories\" data-num=2>2. Storybook wprowadza interaktywe stories<\/h2>\n\n\n\n<p>Storybook to \u015bwietne narz\u0119dzie do prezentacji komponent\u00f3w. Kruczek jest taki, \u017ce komponenty te musz\u0105 by\u0107 bezstanowe. Tak by\u0142o przynajmniej do tej pory, bo do bety trafi\u0142y w\u0142a\u015bnie interaktywne stories, z kt\u00f3rych pomoc\u0105 b\u0119dziemy mogli automatycznie odtworzy\u0107 interakcj\u0119 z komponentem. Do zapisu interakcji wykorzystywany jest powszechnie znany i lubiany Testing Library, co oznacza, \u017ce ca\u0142e rozwi\u0105zanie b\u0119dzie dzia\u0142a\u0107 z dowolnym frameworkiem.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import React from &#039;react&#039;;\nimport { within, fireEvent } from &#039;@storybook\/testing-library&#039;;\nimport { DeleteCustomerDialog } from &#039;.\/DeleteCustomerDialog&#039;;\n \nexport default {\n  component: DeleteCustomerDialog,\n  title: &#039;DeleteCustomerDialog&#039;,\n};\n \nexport const OpenDialog = () =&gt; &lt;DeleteCustomerDialog \/&gt;;\nOpenDialog.play = async ({ canvasElement }) =&gt; {\n  const canvas = within(canvasElement);\n  await fireEvent.click(\n    canvas.getByRole(&#039;button&#039;, { name: &#039;Delete Customer&#039; })\n  );\n};<\/code><\/pre>\n\n\n\n<p>To gdzie ja widz\u0119 zastosowanie dla interaktywnych stories to Screenshot Testy. Niewa\u017cne jak bardzo by\u015bmy si\u0119 starali, nie wszystkie nasze komponenty mog\u0105 by\u0107 g\u0142upie (albo jak kto woli bezstanowe). Teraz mo\u017cliwe b\u0119dzie odpowiednie zmodyfikowanie wewn\u0119trznego stanu komponentu i dopiero wtedy wykonanie screenshota.<\/p>\n\n\n\n<p>A Wy widzicie jeszcze jakie\u015b inne zastosowanie dla interaktywnych stories? Koniecznie dajcie zna\u0107 w komentarzu na naszym Facebooku!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/storybook.js.org\/blog\/interactive-stories-beta\/\">https:\/\/storybook.js.org\/blog\/interactive-stories-beta\/<\/a><\/p>\n\n\n\n<h2 id=\"3-user-flows-zmierzaja-do-chrome-97\" data-num=3>3. User Flows zmierzaj\u0105 do Chrome 97<\/h2>\n\n\n\n<p>Do Chrome 97 (narazie dost\u0119pnym jako Canary Release) trafi\u0142a funkcjonalno\u015b\u0107 nagrywania tzw. User Flows. Z jej pomoc\u0105 mo\u017cemy nagra\u0107 nasz\u0105 sesj\u0119, a przegl\u0105darka automatycznie zapisze j\u0105 do postaci strumieni interakcji, kt\u00f3ry mo\u017cemy p\u00f3\u017aniej odtworzy\u0107. Ponadto Chrome zawiera\u0107 b\u0119dzie interfejs umo\u017cliwiaj\u0105cy drobne modyfikacje interakcji na nasze potrzeby.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-obsluga-osadzania wp-block-embed-obsluga-osadzania\"><div class=\"wp-block-embed__wrapper\">\n<div style=\"width: 640px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-10053-1\" width=\"640\" height=\"360\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/storage.googleapis.com\/web-dev-uploads\/video\/dPDCek3EhZgLQPGtEG3y0fTn4v82\/jDJpU85zWj1dipsUPrMr.mp4?_=1\" \/><a href=\"https:\/\/storage.googleapis.com\/web-dev-uploads\/video\/dPDCek3EhZgLQPGtEG3y0fTn4v82\/jDJpU85zWj1dipsUPrMr.mp4\">https:\/\/storage.googleapis.com\/web-dev-uploads\/video\/dPDCek3EhZgLQPGtEG3y0fTn4v82\/jDJpU85zWj1dipsUPrMr.mp4<\/a><\/video><\/div>\n<\/div><\/figure>\n\n\n\n<p>Musia\u0142em si\u0119 chwil\u0119 zastanowi\u0107 zanim do g\u0142owy przysz\u0142o mi rozs\u0105dne zastosowanie dla User Flows. Nikt nie b\u0119dzie przecie\u017c zast\u0119powa\u0142 nimi starych dobrych test\u00f3w E2E napisanych w Cypress albo Selenium. Ot\u00f3\u017c kluczow\u0105 warto\u015b\u0107 dla tej funkcjonalno\u015bci jest nagrywanie wydajno\u015bci. User Flows b\u0119d\u0105 du\u017co bardziej powtarzalne ni\u017c manualne klikanie po aplikacji, dzi\u0119ki czemu wyniki wydajno\u015bci b\u0119d\u0105 \u0142atwiejsze w por\u00f3wnaniu mi\u0119dzy sob\u0105. Du\u017co sensowniejsze stanie si\u0119 r\u00f3wnie\u017c wyci\u0105ganie wszelkich warto\u015bci statystycznych takich jak \u015bredni czas renderowania czy wykonywania skrypt\u00f3w.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"701\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5to6h7.jpeg\" alt=\"\" class=\"wp-image-3140\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5to6h7.jpeg 500w, https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5to6h7-214x300.jpeg 214w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/recorder\/\">https:\/\/developer.chrome.com\/docs\/devtools\/recorder\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tydzie\u0144 bez nowego frameworku to tydzie\u0144 stracony. Ten tydzie\u0144 uratowa\u0142 Shopify pokazuj\u0105c sw\u00f3j projekt Hydrogen. Opr\u00f3cz tego mamy dla Was interaktywne stories zmierzaj\u0105ce do Storybooka i user flows zmierzaj\u0105ce do Chrome 97.<\/p>\n","protected":false},"author":12,"featured_media":7752,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-10053","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"estimated_reading_time":"3","feature_image_visible":false},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Frontend Thursday vol. 63 - Hydrogen, Interactive Stories, User Flows w Chrome 97 - 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-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 63 - Hydrogen, Interactive Stories, User Flows w Chrome 97 - Vived\" \/>\n<meta property=\"og:description\" content=\"Tydzie\u0144 bez nowego frameworku to tydzie\u0144 stracony. Ten tydzie\u0144 uratowa\u0142 Shopify pokazuj\u0105c sw\u00f3j projekt Hydrogen. Opr\u00f3cz tego mamy dla Was interaktywne stories zmierzaj\u0105ce do Storybooka i user flows zmierzaj\u0105ce do Chrome 97.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-11T10:24:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/Screenshot-2021-11-11-at-11.22.34.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3360\" \/>\n\t<meta property=\"og:image:height\" content=\"1758\" \/>\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\/2021\/11\/Screenshot-2021-11-11-at-11.22.34-1.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-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 63 &#8211; Hydrogen, Interactive Stories, User Flows w Chrome 97\",\"datePublished\":\"2021-11-11T10:24:39+00:00\",\"dateModified\":\"2022-09-19T11:16:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/\"},\"wordCount\":767,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/\",\"name\":\"Frontend Thursday vol. 63 - Hydrogen, Interactive Stories, User Flows w Chrome 97 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"datePublished\":\"2021-11-11T10:24:39+00:00\",\"dateModified\":\"2022-09-19T11:16:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"width\":2000,\"height\":1210},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 63 &#8211; Hydrogen, Interactive Stories, User Flows w Chrome 97\"}]},{\"@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. 63 - Hydrogen, Interactive Stories, User Flows w Chrome 97 - 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-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 63 - Hydrogen, Interactive Stories, User Flows w Chrome 97 - Vived","og_description":"Tydzie\u0144 bez nowego frameworku to tydzie\u0144 stracony. Ten tydzie\u0144 uratowa\u0142 Shopify pokazuj\u0105c sw\u00f3j projekt Hydrogen. Opr\u00f3cz tego mamy dla Was interaktywne stories zmierzaj\u0105ce do Storybooka i user flows zmierzaj\u0105ce do Chrome 97.","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/","og_site_name":"Vived","article_published_time":"2021-11-11T10:24:39+00:00","article_modified_time":"2022-09-19T11:16:35+00:00","og_image":[{"width":3360,"height":1758,"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/Screenshot-2021-11-11-at-11.22.34.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","twitter_image":"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/Screenshot-2021-11-11-at-11.22.34-1.png","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 63 &#8211; Hydrogen, Interactive Stories, User Flows w Chrome 97","datePublished":"2021-11-11T10:24:39+00:00","dateModified":"2022-09-19T11:16:35+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/"},"wordCount":767,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/","name":"Frontend Thursday vol. 63 - Hydrogen, Interactive Stories, User Flows w Chrome 97 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","datePublished":"2021-11-11T10:24:39+00:00","dateModified":"2022-09-19T11:16:35+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","width":2000,"height":1210},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-63-hydrogen-interactive-stories-user-flows-w-chrome-97\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 63 &#8211; Hydrogen, Interactive Stories, User Flows w Chrome 97"}]},{"@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. Hydrogen - nowy framework od Shopify<\/h2>\n","innerContent":["\n<h2>1. Hydrogen - nowy framework od Shopify<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Ach czym\u017ce by\u0142by JavaScript, gdyby co tydzie\u0144 nie pojawia\u0142 si\u0119 jaki\u015b nowy framework\u2026 Po ponad roku pisania cotygodniowych podsumowa\u0144 na w\u0142asnej sk\u00f3rze przekona\u0142em si\u0119 jak daleki od prawdy jest ten stereotyp. \u015arodowisko JavaScriptu mocno dojrza\u0142o w ostatnich latach. Nowe rozwi\u0105zania pojawiaj\u0105 si\u0119 coraz rzadziej, a narz\u0119dziom coraz ci\u0119\u017cej jest przebi\u0107 si\u0119 do globalnej \u015bwiadomo\u015bci programist\u00f3w. Patrz\u0105c na ostatnie du\u017ce wydania Reacta czy Angulara nawet breaking changes zdarzaj\u0105 si\u0119 ju\u017c coraz rzadziej.<\/p>\n","innerContent":["\n<p>Ach czym\u017ce by\u0142by JavaScript, gdyby co tydzie\u0144 nie pojawia\u0142 si\u0119 jaki\u015b nowy framework\u2026 Po ponad roku pisania cotygodniowych podsumowa\u0144 na w\u0142asnej sk\u00f3rze przekona\u0142em si\u0119 jak daleki od prawdy jest ten stereotyp. \u015arodowisko JavaScriptu mocno dojrza\u0142o w ostatnich latach. Nowe rozwi\u0105zania pojawiaj\u0105 si\u0119 coraz rzadziej, a narz\u0119dziom coraz ci\u0119\u017cej jest przebi\u0107 si\u0119 do globalnej \u015bwiadomo\u015bci programist\u00f3w. Patrz\u0105c na ostatnie du\u017ce wydania Reacta czy Angulara nawet breaking changes zdarzaj\u0105 si\u0119 ju\u017c coraz rzadziej.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W tym tygodniu jednak na placu gry rzeczywi\u015bcie pojawi\u0142 si\u0119 nowy gracz. Jest to zawodnik nie byle jaki, bo za Hydrogen stoi dobrze dofinansowana firma jak\u0105 jest Shopify. Je\u015bli nigdy o niej nie s\u0142yszeli\u015bcie, to jest to Kanadyjska sp\u00f3\u0142ka zajmuj\u0105ca si\u0119 e-commerce, z kt\u00f3rej rozwi\u0105za\u0144 korzysta prawie 2 miliony firm na ca\u0142ym \u015bwiecie. Wed\u0142ug Wikipedii w 2020 roku ich przych\u00f3d wyni\u00f3s\u0142 prawie 3 miliardy dolar\u00f3w, a doch\u00f3d osi\u0105gn\u0105\u0142 warto\u015b\u0107 320 milion\u00f3w.<\/p>\n","innerContent":["\n<p>W tym tygodniu jednak na placu gry rzeczywi\u015bcie pojawi\u0142 si\u0119 nowy gracz. Jest to zawodnik nie byle jaki, bo za Hydrogen stoi dobrze dofinansowana firma jak\u0105 jest Shopify. Je\u015bli nigdy o niej nie s\u0142yszeli\u015bcie, to jest to Kanadyjska sp\u00f3\u0142ka zajmuj\u0105ca si\u0119 e-commerce, z kt\u00f3rej rozwi\u0105za\u0144 korzysta prawie 2 miliony firm na ca\u0142ym \u015bwiecie. Wed\u0142ug Wikipedii w 2020 roku ich przych\u00f3d wyni\u00f3s\u0142 prawie 3 miliardy dolar\u00f3w, a doch\u00f3d osi\u0105gn\u0105\u0142 warto\u015b\u0107 320 milion\u00f3w.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Hydrogen to mocno opinionated (pr\u00f3bowa\u0142em przet\u0142umaczy\u0107 ten przymiotnik na j\u0119zyk polski, ale poleg\u0142em - przepraszam Was czytelnicy) narz\u0119dzie oparte o Reacta. Do budowania aplikacji wykorzystywany jest Vite, a do stylowania Tailwind (chocia\u017c na tym polu ma by\u0107 dost\u0119pna wi\u0119ksza personalizacja). Domy\u015blnie wygenerowany projekt integruje si\u0119 z API Shopify przez GraphQL. Routing oparty jest o React Router, ale zmodyfikowany tak, aby \u015bcie\u017ckami w aplikacji zarz\u0105dza\u0107 z poziomu systemu plik\u00f3w. W samym za\u015b centrum frameworku le\u017cy Server Side Rendering i React Server Side Components oraz automatycznie skonfigurowany cache.<\/p>\n","innerContent":["\n<p>Hydrogen to mocno opinionated (pr\u00f3bowa\u0142em przet\u0142umaczy\u0107 ten przymiotnik na j\u0119zyk polski, ale poleg\u0142em - przepraszam Was czytelnicy) narz\u0119dzie oparte o Reacta. Do budowania aplikacji wykorzystywany jest Vite, a do stylowania Tailwind (chocia\u017c na tym polu ma by\u0107 dost\u0119pna wi\u0119ksza personalizacja). Domy\u015blnie wygenerowany projekt integruje si\u0119 z API Shopify przez GraphQL. Routing oparty jest o React Router, ale zmodyfikowany tak, aby \u015bcie\u017ckami w aplikacji zarz\u0105dza\u0107 z poziomu systemu plik\u00f3w. W samym za\u015b centrum frameworku le\u017cy Server Side Rendering i React Server Side Components oraz automatycznie skonfigurowany cache.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3138,"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\/2021\/11\/5to50o.jpeg\" alt=\"\" class=\"wp-image-3138\"\/><figcaption>Patrz\u0105c na to, \u017ce Next.js kilka tygodniu temu r\u00f3wnie\u017c przedstawi\u0142 wsparcie dla Server Side Components, co\u015b czuj\u0119 w ko\u015bciach, \u017ce w 2022 roku to one b\u0119d\u0105 \u2018The Next Big Thing\u201d.<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5to50o.jpeg\" alt=\"\" class=\"wp-image-3138\"\/><figcaption>Patrz\u0105c na to, \u017ce Next.js kilka tygodniu temu r\u00f3wnie\u017c przedstawi\u0142 wsparcie dla Server Side Components, co\u015b czuj\u0119 w ko\u015bciach, \u017ce w 2022 roku to one b\u0119d\u0105 \u2018The Next Big Thing\u201d.<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zauwa\u017cyli\u015bcie ju\u017c, \u017ce Hydrogen mocno przypomina Next.js? No to pewnie nie zdziwi Was, \u017ce Shopify podobnie jak Vercel r\u00f3wnie\u017c planuje uruchomi\u0107 swoj\u0105 chmur\u0119 na kt\u00f3rej najtaniej i najwygodniej b\u0119dzie uruchomi\u0107 ich framework. Ci\u0119\u017cko powiedzie\u0107 czy Next.js i Hydrogen stan\u0105 si\u0119 w najbli\u017cszej przysz\u0142o\u015bci bezpo\u015brednimi konkurentami. Jedno jest pewne - na technologicznej rywalizacji dw\u00f3ch dobrze dofinansowanych projekt\u00f3w my deweloperzy mo\u017cemy tylko zyska\u0107.<\/p>\n","innerContent":["\n<p>Zauwa\u017cyli\u015bcie ju\u017c, \u017ce Hydrogen mocno przypomina Next.js? No to pewnie nie zdziwi Was, \u017ce Shopify podobnie jak Vercel r\u00f3wnie\u017c planuje uruchomi\u0107 swoj\u0105 chmur\u0119 na kt\u00f3rej najtaniej i najwygodniej b\u0119dzie uruchomi\u0107 ich framework. Ci\u0119\u017cko powiedzie\u0107 czy Next.js i Hydrogen stan\u0105 si\u0119 w najbli\u017cszej przysz\u0142o\u015bci bezpo\u015brednimi konkurentami. Jedno jest pewne - na technologicznej rywalizacji dw\u00f3ch dobrze dofinansowanych projekt\u00f3w my deweloperzy mo\u017cemy tylko zyska\u0107.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3139,"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\/2021\/11\/5to4iz.jpeg\" alt=\"\" class=\"wp-image-3139\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5to4iz.jpeg\" alt=\"\" class=\"wp-image-3139\"\/><\/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:\/\/hydrogen.shopify.dev\/?utm_source=twitter_devs&amp;utm_medium=social&amp;utm_campaign=hydrogendp\">https:\/\/hydrogen.shopify.dev\/?utm_source=twitter_devs&amp;utm_medium=social&amp;utm_campaign=hydrogendp<\/a><br><a href=\"https:\/\/www.youtube.com\/watch?v=FPNZkPqUFIU&amp;feature=emb_imp_woyt\">https:\/\/www.youtube.com\/watch?v=FPNZkPqUFIU&amp;feature=emb_imp_woyt<\/a><br><a href=\"https:\/\/www.youtube.com\/watch?v=mAsM9c2sGjA\">https:\/\/www.youtube.com\/watch?v=mAsM9c2sGjA<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/hydrogen.shopify.dev\/?utm_source=twitter_devs&amp;utm_medium=social&amp;utm_campaign=hydrogendp\">https:\/\/hydrogen.shopify.dev\/?utm_source=twitter_devs&amp;utm_medium=social&amp;utm_campaign=hydrogendp<\/a><br><a href=\"https:\/\/www.youtube.com\/watch?v=FPNZkPqUFIU&amp;feature=emb_imp_woyt\">https:\/\/www.youtube.com\/watch?v=FPNZkPqUFIU&amp;feature=emb_imp_woyt<\/a><br><a href=\"https:\/\/www.youtube.com\/watch?v=mAsM9c2sGjA\">https:\/\/www.youtube.com\/watch?v=mAsM9c2sGjA<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. Storybook wprowadza interaktywe stories<\/h2>\n","innerContent":["\n<h2>2. Storybook wprowadza interaktywe stories<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Storybook to \u015bwietne narz\u0119dzie do prezentacji komponent\u00f3w. Kruczek jest taki, \u017ce komponenty te musz\u0105 by\u0107 bezstanowe. Tak by\u0142o przynajmniej do tej pory, bo do bety trafi\u0142y w\u0142a\u015bnie interaktywne stories, z kt\u00f3rych pomoc\u0105 b\u0119dziemy mogli automatycznie odtworzy\u0107 interakcj\u0119 z komponentem. Do zapisu interakcji wykorzystywany jest powszechnie znany i lubiany Testing Library, co oznacza, \u017ce ca\u0142e rozwi\u0105zanie b\u0119dzie dzia\u0142a\u0107 z dowolnym frameworkiem.<\/p>\n","innerContent":["\n<p>Storybook to \u015bwietne narz\u0119dzie do prezentacji komponent\u00f3w. Kruczek jest taki, \u017ce komponenty te musz\u0105 by\u0107 bezstanowe. Tak by\u0142o przynajmniej do tej pory, bo do bety trafi\u0142y w\u0142a\u015bnie interaktywne stories, z kt\u00f3rych pomoc\u0105 b\u0119dziemy mogli automatycznie odtworzy\u0107 interakcj\u0119 z komponentem. Do zapisu interakcji wykorzystywany jest powszechnie znany i lubiany Testing Library, co oznacza, \u017ce ca\u0142e rozwi\u0105zanie b\u0119dzie dzia\u0142a\u0107 z dowolnym frameworkiem.<\/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\">import React from 'react';\nimport { within, fireEvent } from '@storybook\/testing-library';\nimport { DeleteCustomerDialog } from '.\/DeleteCustomerDialog';\n \nexport default {\n  component: DeleteCustomerDialog,\n  title: 'DeleteCustomerDialog',\n};\n \nexport const OpenDialog = () => &lt;DeleteCustomerDialog \/>;\nOpenDialog.play = async ({ canvasElement }) => {\n  const canvas = within(canvasElement);\n  await fireEvent.click(\n    canvas.getByRole('button', { name: 'Delete Customer' })\n  );\n};<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import React from 'react';\nimport { within, fireEvent } from '@storybook\/testing-library';\nimport { DeleteCustomerDialog } from '.\/DeleteCustomerDialog';\n \nexport default {\n  component: DeleteCustomerDialog,\n  title: 'DeleteCustomerDialog',\n};\n \nexport const OpenDialog = () => &lt;DeleteCustomerDialog \/>;\nOpenDialog.play = async ({ canvasElement }) => {\n  const canvas = within(canvasElement);\n  await fireEvent.click(\n    canvas.getByRole('button', { name: 'Delete Customer' })\n  );\n};<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>To gdzie ja widz\u0119 zastosowanie dla interaktywnych stories to Screenshot Testy. Niewa\u017cne jak bardzo by\u015bmy si\u0119 starali, nie wszystkie nasze komponenty mog\u0105 by\u0107 g\u0142upie (albo jak kto woli bezstanowe). Teraz mo\u017cliwe b\u0119dzie odpowiednie zmodyfikowanie wewn\u0119trznego stanu komponentu i dopiero wtedy wykonanie screenshota.<\/p>\n","innerContent":["\n<p>To gdzie ja widz\u0119 zastosowanie dla interaktywnych stories to Screenshot Testy. Niewa\u017cne jak bardzo by\u015bmy si\u0119 starali, nie wszystkie nasze komponenty mog\u0105 by\u0107 g\u0142upie (albo jak kto woli bezstanowe). Teraz mo\u017cliwe b\u0119dzie odpowiednie zmodyfikowanie wewn\u0119trznego stanu komponentu i dopiero wtedy wykonanie screenshota.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>A Wy widzicie jeszcze jakie\u015b inne zastosowanie dla interaktywnych stories? Koniecznie dajcie zna\u0107 w komentarzu na naszym Facebooku!<\/p>\n","innerContent":["\n<p>A Wy widzicie jeszcze jakie\u015b inne zastosowanie dla interaktywnych stories? Koniecznie dajcie zna\u0107 w komentarzu na naszym Facebooku!<\/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:\/\/storybook.js.org\/blog\/interactive-stories-beta\/\">https:\/\/storybook.js.org\/blog\/interactive-stories-beta\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/storybook.js.org\/blog\/interactive-stories-beta\/\">https:\/\/storybook.js.org\/blog\/interactive-stories-beta\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>3. User Flows zmierzaj\u0105 do Chrome 97<\/h2>\n","innerContent":["\n<h2>3. User Flows zmierzaj\u0105 do Chrome 97<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Do Chrome 97 (narazie dost\u0119pnym jako Canary Release) trafi\u0142a funkcjonalno\u015b\u0107 nagrywania tzw. User Flows. Z jej pomoc\u0105 mo\u017cemy nagra\u0107 nasz\u0105 sesj\u0119, a przegl\u0105darka automatycznie zapisze j\u0105 do postaci strumieni interakcji, kt\u00f3ry mo\u017cemy p\u00f3\u017aniej odtworzy\u0107. Ponadto Chrome zawiera\u0107 b\u0119dzie interfejs umo\u017cliwiaj\u0105cy drobne modyfikacje interakcji na nasze potrzeby.<\/p>\n","innerContent":["\n<p>Do Chrome 97 (narazie dost\u0119pnym jako Canary Release) trafi\u0142a funkcjonalno\u015b\u0107 nagrywania tzw. User Flows. Z jej pomoc\u0105 mo\u017cemy nagra\u0107 nasz\u0105 sesj\u0119, a przegl\u0105darka automatycznie zapisze j\u0105 do postaci strumieni interakcji, kt\u00f3ry mo\u017cemy p\u00f3\u017aniej odtworzy\u0107. Ponadto Chrome zawiera\u0107 b\u0119dzie interfejs umo\u017cliwiaj\u0105cy drobne modyfikacje interakcji na nasze potrzeby.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/embed","attrs":{"url":"https:\/\/storage.googleapis.com\/web-dev-uploads\/video\/dPDCek3EhZgLQPGtEG3y0fTn4v82\/jDJpU85zWj1dipsUPrMr.mp4","type":"rich","providerNameSlug":"obsluga-osadzania"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-embed is-type-rich is-provider-obsluga-osadzania wp-block-embed-obsluga-osadzania\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/storage.googleapis.com\/web-dev-uploads\/video\/dPDCek3EhZgLQPGtEG3y0fTn4v82\/jDJpU85zWj1dipsUPrMr.mp4\n<\/div><\/figure>\n","innerContent":["\n<figure class=\"wp-block-embed is-type-rich is-provider-obsluga-osadzania wp-block-embed-obsluga-osadzania\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/storage.googleapis.com\/web-dev-uploads\/video\/dPDCek3EhZgLQPGtEG3y0fTn4v82\/jDJpU85zWj1dipsUPrMr.mp4\n<\/div><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Musia\u0142em si\u0119 chwil\u0119 zastanowi\u0107 zanim do g\u0142owy przysz\u0142o mi rozs\u0105dne zastosowanie dla User Flows. Nikt nie b\u0119dzie przecie\u017c zast\u0119powa\u0142 nimi starych dobrych test\u00f3w E2E napisanych w Cypress albo Selenium. Ot\u00f3\u017c kluczow\u0105 warto\u015b\u0107 dla tej funkcjonalno\u015bci jest nagrywanie wydajno\u015bci. User Flows b\u0119d\u0105 du\u017co bardziej powtarzalne ni\u017c manualne klikanie po aplikacji, dzi\u0119ki czemu wyniki wydajno\u015bci b\u0119d\u0105 \u0142atwiejsze w por\u00f3wnaniu mi\u0119dzy sob\u0105. Du\u017co sensowniejsze stanie si\u0119 r\u00f3wnie\u017c wyci\u0105ganie wszelkich warto\u015bci statystycznych takich jak \u015bredni czas renderowania czy wykonywania skrypt\u00f3w.<\/p>\n","innerContent":["\n<p>Musia\u0142em si\u0119 chwil\u0119 zastanowi\u0107 zanim do g\u0142owy przysz\u0142o mi rozs\u0105dne zastosowanie dla User Flows. Nikt nie b\u0119dzie przecie\u017c zast\u0119powa\u0142 nimi starych dobrych test\u00f3w E2E napisanych w Cypress albo Selenium. Ot\u00f3\u017c kluczow\u0105 warto\u015b\u0107 dla tej funkcjonalno\u015bci jest nagrywanie wydajno\u015bci. User Flows b\u0119d\u0105 du\u017co bardziej powtarzalne ni\u017c manualne klikanie po aplikacji, dzi\u0119ki czemu wyniki wydajno\u015bci b\u0119d\u0105 \u0142atwiejsze w por\u00f3wnaniu mi\u0119dzy sob\u0105. Du\u017co sensowniejsze stanie si\u0119 r\u00f3wnie\u017c wyci\u0105ganie wszelkich warto\u015bci statystycznych takich jak \u015bredni czas renderowania czy wykonywania skrypt\u00f3w.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3140,"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\/2021\/11\/5to6h7.jpeg\" alt=\"\" class=\"wp-image-3140\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5to6h7.jpeg\" alt=\"\" class=\"wp-image-3140\"\/><\/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:\/\/developer.chrome.com\/docs\/devtools\/recorder\/\">https:\/\/developer.chrome.com\/docs\/devtools\/recorder\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/recorder\/\">https:\/\/developer.chrome.com\/docs\/devtools\/recorder\/<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10053","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=10053"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10053\/revisions"}],"predecessor-version":[{"id":10614,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10053\/revisions\/10614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/7752"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}