Frontend Thursday vol. 66 – Storybook 6.4, Cloudflare Pages i Svelte Summit

1. Advent of Code, React Advent, Ionicember

Z jakiegoś powodu Programiści w oczekiwaniu na Święta Bożego Narodzenia umiłowali sobie doskonalenie swoich umiejętności. Wczoraj wystartowała moja ulubiona akcja programistyczna na przestrzeni roku, czyli Advent of Code. Lubię ją do tego stopnia, że napisałem o niej blogpost, który możecie przeczytać tutaj. Jeśli również bawicie się w tym roku w świąteczne łamigłówki, to zapraszamy do leaderboarda (join code: 1550550-c19ac226) oraz na naszą grupę na facebooku.

Advent of Code to nie jedyna akcja jaka wystartowała z początkiem grudnia. Jeśli chcecie trochę popracować nad swoją znajomością Reacta, to pierwszego grudnia wystartowała mailingowa akcja React Holiday. W jej ramach codziennie na maila dostawać będziecie jedną krótką lekcję na temat frameworka od Meta (to już prawie miesiąc od zmiany nazwy, ale ciągle jakoś ciężko przechodzi mi to przez gardło).

Jeśli jesteście zainteresowani technologiami hybrydowymi to na stronie Ionicember codziennie znajdziecie nowy tutorial pokazujący kolejną funkcjonalność Ionica. Za przygotowanie kalendarza odpowiedzialny jest Simon Grimm, który jest rozpoznawalną postacią w społeczności Ionica.

Na deser zostawiłem sobie akcję 24 days from node.js to Rust. W jej ramach osoby znające backendowy javascript będą miały okazję poznać Rusta. Jak się już pewnie domyślacie, codziennie możecie spodziewać się kolejnego małego kawałka wiedzy.

Źródła:

https://vino.dev/blog/node-to-rust-day-1-rustup/
https://ionicember.com/
https://adventofcode.com/
https://react.holiday/

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

2. Storybook 6.4

Storybook w ciągu ostatnich tygodni zaprezentował kilka naprawdę ciekawych koncepcji, które łączyło jedno – miały stać się dostępne w wersji 6.4. W miniony wtorek wreszcie doczekaliśmy się jej publikacji!

Do tej pory Storybook świetnie sprawdzał się do prezentowania bezstanowych komponentów. Od wersji 6.4 równie dobrze będzie radził sobie również z prezentowaniem komponentów ze stanem, dzięki interaktywnych stories. Z ich pomocą możliwe będzie odtworzenie interakcji z komponentem przy pomocy popularnego Testing Library.

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' })
  );
};

Nowa wersja wprowadza również trzykrotne przyspieszenie kompilacji. Pod tym dobrze sformułowanym hasłem marketingowym kryje się podzielenie paczki generowanej przez Storybooka na mniejsze kawałki, z których każdy zawiera pojedynczy story. W trybie deweloperskim nie dostrzeżemy więc większej różnicy, ale klienci naszego Storybooka na pewno docenią optymalizację.

Obiecująco wygląda też towarzyszące temu wydaniu narzędzie do automatycznej migracji. Na razie w dokumentacji znajdziemy głównie wsparcie dla migracji z Webpack 4 do Webpack 5, ale ja po cichu liczę, że w przyszłości dostaniemy wsparcie dla migrowania formatów stories.

Na koniec warto jeszcze wspomnieć, że nareszcie można używać Storybooka wraz z Angularem 13 i react-router 6. React Native natomiast otrzymał też wsparcie dla renderowania komponentów w przeglądarce przy wykorzystaniu React Native Web.

Źródła:

https://storybook.js.org/blog/storybook-6-4/

3. Cloudflare Pages Goes Full Stack

W zeszłym tygodniu mówiłem Wam, że renderowanie po stronie serwera będzie w nadchodzących miesiącach gorącym tematem. W tym tygodniu kontynuujemy ten trend, bo Cloudflare Pages otrzymały wsparcie dla dynamicznych funkcji.

Jeśli nie kojarzycie Cloudflare, to jest to firma z jedną z największych infrastruktur CDN. Cloudflare Pages jest rozwiązaniem umożliwiającym hostowanie statycznych stron z wykorzystaniem tej infrastruktury. Dzięki niesamowicie szybkim czasom odpowiedzi było to bardzo popularne rozwiązanie dla aplikacji typu jamstack.

Do statycznych treści dołączają teraz dynamiczne funkcje. Otwiera to drogę do wsparcia dla Server Side Renderingu i czekam na pierwsze aplikacje serwowane na takiej infrastrukturze. W Out of The box dostaliśmy wsparcie dla Svelte-Kit, co jest mocno interesujące w kontekście twórcy Svelte dołączającego do firmy odpowiedzialnej za Next.js. Szykuje nam się zacięta konkurencja w kategorii chmur dla Server Side Renderingu.

// Filepath:  /functions/hello.js
// GET requests to /hello would return "Hello, world!"
export const onRequestGet = () => {
  return new Response("Hello, world!")
}

// POST requests to /hello with a JSON-encoded body would return "Hello, <name>!"
export const onRequestPost = async ({ request }) => {
  const { name } = await request.json()
  return new Response(`Hello, ${name}!`)
}

Źródła:

https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/
https://blog.cloudflare.com/cloudflare-pages-ga/

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

4. Svelte Summit

W minionym tygodniu miała miejsce chyba największa konferencja dotyczące Svelte. Nagrania z niej trafiły do sieci i patrząc po tytułach coś dla siebie znajdą tutaj zarówno początkujący adepci Svelte jak i starzy wyjadacze.

Źródła:

https://sveltesummit.com/#intro

Na koniec ponownie zapraszam do naszego leaderboarda Advent of Code (join code: 1550550-c19ac226) i na naszą grupę na facebooku. I to nie jest chamska reklama – ja po prostu uwielbiam tą inicjatywę 😅