Frontend Thursday vol. 63 - Hydrogen, Interactive Stories, User Flows w Chrome 97

1. Hydrogen – nowy framework od Shopify

Ach czymże byłby JavaScript, gdyby co tydzień nie pojawiał się jakiś nowy framework… Po ponad roku pisania cotygodniowych podsumowań na własnej skórze przekonałem się jak daleki od prawdy jest ten stereotyp. Środowisko JavaScriptu mocno dojrzało w ostatnich latach. Nowe rozwiązania pojawiają się coraz rzadziej, a narzędziom coraz ciężej jest przebić się do globalnej świadomości programistów. Patrząc na ostatnie duże wydania Reacta czy Angulara nawet breaking changes zdarzają się już coraz rzadziej.

W tym tygodniu jednak na placu gry rzeczywiście pojawił się nowy gracz. Jest to zawodnik nie byle jaki, bo za Hydrogen stoi dobrze dofinansowana firma jaką jest Shopify. Jeśli nigdy o niej nie słyszeliście, to jest to Kanadyjska spółka zajmująca się e-commerce, z której rozwiązań korzysta prawie 2 miliony firm na całym świecie. Według Wikipedii w 2020 roku ich przychód wyniósł prawie 3 miliardy dolarów, a dochód osiągnął wartość 320 milionów.

Hydrogen to mocno opinionated (próbowałem przetłumaczyć ten przymiotnik na język polski, ale poległem – przepraszam Was czytelnicy) narzędzie oparte o Reacta. Do budowania aplikacji wykorzystywany jest Vite, a do stylowania Tailwind (chociaż na tym polu ma być dostępna większa personalizacja). Domyślnie wygenerowany projekt integruje się z API Shopify przez GraphQL. Routing oparty jest o React Router, ale zmodyfikowany tak, aby ścieżkami w aplikacji zarządzać z poziomu systemu plików. W samym zaś centrum frameworku leży Server Side Rendering i React Server Side Components oraz automatycznie skonfigurowany cache.

Patrząc na to, że Next.js kilka tygodniu temu również przedstawił wsparcie dla Server Side Components, coś czuję w kościach, że w 2022 roku to one będą ‘The Next Big Thing”.

Zauważyliście już, że Hydrogen mocno przypomina Next.js? No to pewnie nie zdziwi Was, że Shopify podobnie jak Vercel również planuje uruchomić swoją chmurę na której najtaniej i najwygodniej będzie uruchomić ich framework. Ciężko powiedzieć czy Next.js i Hydrogen staną się w najbliższej przyszłości bezpośrednimi konkurentami. Jedno jest pewne – na technologicznej rywalizacji dwóch dobrze dofinansowanych projektów my deweloperzy możemy tylko zyskać.

Źródła:

https://hydrogen.shopify.dev/?utm_source=twitter_devs&utm_medium=social&utm_campaign=hydrogendp
https://www.youtube.com/watch?v=FPNZkPqUFIU&feature=emb_imp_woyt
https://www.youtube.com/watch?v=mAsM9c2sGjA

2. Storybook wprowadza interaktywe stories

Storybook to świetne narzędzie do prezentacji komponentów. Kruczek jest taki, że komponenty te muszą być bezstanowe. Tak było przynajmniej do tej pory, bo do bety trafiły właśnie interaktywne stories, z których pomocą będziemy mogli automatycznie odtworzyć interakcję z komponentem. Do zapisu interakcji wykorzystywany jest powszechnie znany i lubiany Testing Library, co oznacza, że całe rozwiązanie będzie działać z dowolnym frameworkiem.

import React from 'react';
import { within, fireEvent } from '@storybook/testing-library';
import { DeleteCustomerDialog } from './DeleteCustomerDialog';
 
export default {
  component: DeleteCustomerDialog,
  title: 'DeleteCustomerDialog',
};
 
export const OpenDialog = () => <DeleteCustomerDialog />;
OpenDialog.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  await fireEvent.click(
    canvas.getByRole('button', { name: 'Delete Customer' })
  );
};

To gdzie ja widzę zastosowanie dla interaktywnych stories to Screenshot Testy. Nieważne jak bardzo byśmy się starali, nie wszystkie nasze komponenty mogą być głupie (albo jak kto woli bezstanowe). Teraz możliwe będzie odpowiednie zmodyfikowanie wewnętrznego stanu komponentu i dopiero wtedy wykonanie screenshota.

A Wy widzicie jeszcze jakieś inne zastosowanie dla interaktywnych stories? Koniecznie dajcie znać w komentarzu na naszym Facebooku!

Źródła:

https://storybook.js.org/blog/interactive-stories-beta/

3. User Flows zmierzają do Chrome 97

Do Chrome 97 (narazie dostępnym jako Canary Release) trafiła funkcjonalność nagrywania tzw. User Flows. Z jej pomocą możemy nagrać naszą sesję, a przeglądarka automatycznie zapisze ją do postaci strumieni interakcji, który możemy później odtworzyć. Ponadto Chrome zawierać będzie interfejs umożliwiający drobne modyfikacje interakcji na nasze potrzeby.

Musiałem się chwilę zastanowić zanim do głowy przyszło mi rozsądne zastosowanie dla User Flows. Nikt nie będzie przecież zastępował nimi starych dobrych testów E2E napisanych w Cypress albo Selenium. Otóż kluczową wartość dla tej funkcjonalności jest nagrywanie wydajności. User Flows będą dużo bardziej powtarzalne niż manualne klikanie po aplikacji, dzięki czemu wyniki wydajności będą łatwiejsze w porównaniu między sobą. Dużo sensowniejsze stanie się również wyciąganie wszelkich wartości statystycznych takich jak średni czas renderowania czy wykonywania skryptów.