Frontend Thursday vol. 85 – Jest 28, Remotion 3,0 i nowości w Deno

1. Jest 28

Wokół testowania JavaScriptu ostatnio sporo się działo. Do najnowszego Node.js 18 trafił natywny test runner (na razie jako experimental feature), który umożliwia pisanie testów bez zaciągania dodatkowych bibliotek. Ostatnio coraz większą popularnością zaczyna się cieszyć również biblioteka Vitest. Pomimo tego, że została ona stworzona z myślą o programistach korzystających z Vite, jest alternatywą drop-in dla Jesta i nie odbiega od niego funkcjonalnościami.

Alternatywne test runnery rosną w tle dyskusji o wsparciu (a raczej jego braku) dla Jest ze strony Mety. Jak tłumaczy autor Jest – Simen Bekkhus – brak wsparcia ze strony dużych korporacji jest jego świadomą decyzją. Pobieranie stałej pensji sprawiłoby, że czułby się on zobligowany do pracy nad Jest, którego traktuje jako projekt poboczny. Nie jest to raczej odpowiedź, której oczekuje community jednej z najpopularniejszych frontendowych bibliotek.

Fakt, że Jest rozwijany jest powoli nie oznacza, że nie jest rozwijany wcale. W końcu nad projektem pracuje nie tylko Simen, ale cała społeczność Open Source. Kolejne wersje biblioteki od kilku lat otrzymujemy jak w zegarku na przełomie kwietnia i maja. Nie inaczej jest również i w tym roku, bo w minionym tygodniu opublikowany został Jest 28. Nowości jest całkiem sporo, dlatego zapraszam Was na krótką wycieczkę po nowych funkcjonalnościach.

Pierwszym przystankiem naszej podróży będzie jedna z rzeczy, która w Jest 28 widoczna jest już na pierwszy rzut oka – paczka została odchudzona o około 30%. Redukcja spowodowana jest usunięciem pakietów takich jak `jest-environment-jsdom` czy `jest-jasmine2` z domyślnej paczki. Jeśli psuje Wam to szyki, no to cóż – Wasza wina. Usunięcie paczek zostało zapowiedziane prawie rok temu przy okazji releasu Jest 27.

Zapraszam z powrotem na pokład, gdyż wyruszamy przyglądnąć się kolejnej nowej funkcjonalności. Do Jest 28 trafiła flaga `–shard`, która umożliwia podzielenie uruchamianych testów na kilka maszyn. Nie spodziewajcie się jednak skomplikowanego mechanizmu odpowiedzialny za komunikację między maszynami i load-balancingu. Nowa flaga pozwala po prostu podzielić w deterministyczny sposób testy na N części i wykonać wybraną część.

jest --shard=1/3
jest --shard=2/3
jest --shard=3/3

Przed nami ostatni przystanek naszej wycieczki. Po naszej sterburcie mijamy usprawnione Fake Timers. W Jest 27 fake timers zostały znacznie usprawnione poprzez wykorzystanie biblioteki `@sinonjs/fake-timers`. W Jest 28 poczyniono kolejny krok w przód i zdecydowano się udostępnić bezpośrednio jeszcze więcej metod wykorzystywanej w bebechach biblioteki.

Zanim przybijamy do brzegu warto zwrócić jeszcze uwagę na pomniejsze poprawki i usprawnienia. Wśród nich znajdziemy między innymi dedykowany GitHub Actions Reporter, możliwość definiowania konfiguracji środowiska jako inline komentarze w testach, czy nowy odchudzony test runner `jest-light-runner`.

Tak oto dotarliśmy do końca naszej krótkiej wycieczki. Na zakończenie wspomnę jeszcze, że na kolejną wyprawę będę miał okazję zaprosić Państwa zdecydowanie wcześniej, niż przy okazji majówki 2023. Jak zapowiada zespół rozwijający Jest, na wersję 29 przyjdzie nam poczekać tylko kilka miesięcy, zamiast okrągłego roku. Przyśpieszony development kontrastuje z wspomnianą w pierwszych akapitach wypowiedzią Simena Hekkhus, ale nie pozostaje nam nic innego, niż oczekiwać na spełnienie obietnic.

Źródła:

https://jestjs.io/blog/2022/04/25/jest-28
https://news.ycombinator.com/item?id=30168241
https://github.com/facebook/jest/pull/11529#issuecomment-1027152470
https://github.com/facebook/jest/pull/11529#issuecomment-1027405616
https://vitest.dev/guide/why.html
https://nodejs.org/en/blog/announcements/v18-release-announce/

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. Remotion 3

Remotion to biblioteka pozwalająca tworzyć wideo przy użyciu Reacta, która rok temu szturmem przebiła się do wszystkich nagłówków JavaScriptiowych newsletterów (w tym również i naszego). Całość oparta jest o niezwykle proste w swoich założeniach API.  Najpierw tworzymy komponent `Composition`, do którego przekazujemy podstawowe dane, takie jak wysokość i szerokość w pikselach, czy pożądane FPS-y. Do komponentu  `Composition` przekazujemy również własny komponent odpowiedzialny za wyrenderowanie filmu. W komponencie tym dostępny jest hook `useCurrentFrame()`, który zwraca aktualnie renderowaną klatkę animiacji.

const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = frame >= 20 ? 1 : (frame / 20);
  return (
    <div style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      opacity: opacity
    }}>
      Hello World!
    </div>
  )
}
export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="MyVideo"
        component={MyVideo}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

Kiedy Remotion po raz pierwszy podbił internet byłem co do niego bardzo sceptyczny. Na pierwszy rzut oka narzędzie było innowacyjne, ale po głębszym przyglądnięciu się całości ciężko było mi znaleźć jego docelowych odbiorców. Do montowania krótkich pokazówek zdecydowanie lepiej nadają się dedykowane do tego programy. Nawet jeśli musimy nauczyć się ich obsługi od podstaw, to skorzystanie z nich zazwyczaj okaże się szybsze biorąc pod uwagę ich przystępność. Pisanie CSS-ów nie jest w końcu najszybszym sposobem opisywania pojedynczej klatki filmu.

Jedyną nadzieją dla Remotion było osadzenie rozwiązania na serwerze. Takie zastosowanie pozwala na generowane wideo, które może być w prosty sposób personalizowane przez programistów. Jak na razie Remotion na swojej stronie chwali się jedną historią firmy, która skorzystała z biblioteki. MakeStories to produkt, który umożliwia tworzenie Web Stories przez prosty interfejs typu drag-and-drop. Jednym z wyzwań przed jakimi stanął projekt było umożliwienie eksportu stworzonych stories do formatu wideo, który obsługiwany jest przez większość platform. Remotion okazał się być narzędziem wręcz idealnym do rozwiązania tego problemu – istniejący już generator eksportował kod JavaScript, który wystarczyło tylko odpowiednio opakować w API biblioteki.

Nie jestem pewien, czy na rynku znajdzie się więcej aplikacji, w które Remotion wpasuje się tak idealnie. Jeśli tak, to Remotion 3.0 sprawia, że integracja będzie jeszcze prostsza. Do najnowszej wersji trafiło bowiem współbieżne renderowanie oparte o AWS Lambda. Stosując nową architekturę możemy przyśpieszyć czas renderowania nawet o 70%.

Jak to zwykle w życiu bywa najważniejsze informacje zapisane są drobnym druczkiem. Czytając dokumentację nowej architektury natrafiłem na sekcję dotyczącą ograniczeń. Na obecną chwilę za pomocą architektury Serverless nie możemy generować więcej niż godziny wideo na minutę i wideo dłuższych niż 2 godziny. Dla mniejszych produktów prawdopodobnie nie będzie to problem, ale dla takich działających na dużą skalę będzie to deal breaker. Nadal możemy samodzielnie skonfigurować Remotion na serwerze, ale zdecydowanie umniejsza to nowej funkcjonalności w moich oczach.

Źródła:

https://www.remotion.dev/docs/lambda

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!

3. Deno na Supabase Functions i Netlify Edge Functions

W naszych przeglądach sporo pisaliśmy ostatnio o Node.js, dlatego teraz przyszła pora podsumować sobie co w międzyczasie działo się u największego konkurenta w postaci Deno. Kilka ostatnich wersji nie przyniosło zbyt ekscytujących nowości. Miażdżąca  większość ogłaszanych zmian to usprawnienia istniejących API (m.in. Web Cryptography API czy FFI API). Wśród nowości na wyróżnienie zasługuje optymalizacja zapytań do Rusta o prawie 60% i dodanie metody Deno.bench, która pozwala pisać performance testy pisanego kodu. Interesująco wygląda też rozdzielenie uruchamiania kodu od sprawdzania poprawności typów. Do tej pory oba procesy były nieodłącznie ze sobą związane, co skutkowało długim czasem uruchomienia aplikacji. Jak twierdzą autorzy zmiany, większość programistów wykorzystuje IDE oraz procesy CI do sprawdzania poprawności typów i walidacja przed uruchomieniem jest zbędna.

Nie zebrałem Was tu jednak, żeby rozmawiać o nowościach w Deno. Na przestrzeni ostatnich tygodni Deno otrzymało wsparcie na dwóch rozpoznawalnych platformach chmurowych. Pierwsza z nich to Supabase, czyli otwartoźródłowa alternatywa dla Firebase. Ich najnowszy produkt Edge Functions pozwala uruchamiać kod serwerowy na maszynach znajdujących się jak najbliżej użytkownika. Co istotnie architektura w całości oparta jest o Deno Deploy, czyli chmurę na której zarabiać próbuje startup rozwijający Deno. Jak zapewniają chmura od Deno sprawdza się tutaj dużo lepiej niż AWS.

Drugą platformą, która otrzymała wsparcie dla Deno jest Netlify. Co ciekawe, wsparcie dotyczy analogicznej funkcjonalności jak w przypadku Supabase i na ten moment również wspiera ekskluzywnie tylko Deno. Jedyna różnica polega na tym, że w notce od Netlify nie znalazłem informacji o wykorzystaniu chmury Deno.

Źródła:

https://www.netlify.com/blog/announcing-serverless-compute-with-edge-functions/
https://supabase.com/blog/2022/03/31/supabase-edge-functions
https://deno.com/blog/v1.21
https://deno.com/blog/v1.20
https://deno.com/blog/v1.19
https://deno.com/blog/v1.18