Krótka historia romansu Hydrogen i Remix | Frontend Weekly vol. 111

1. Remix kupiony przez Shopify 🛍

Powiedzieć, że w ostatnich tygodniach w kategorii Server Side Renderingu działo się dużo, to tak jak nic nie powiedzieć. Niespełna dwa tygodnie temu zespół Reacta opublikował RFC (Request For Comments) dotyczące wykorzystania async/await serwerowych komponentach. Tydzień temu opublikowany został Next 13, który wprowadza zupełnie nowy system routingu oraz dodaje wsparcie dla wspomnianych serwerowych komponentów. W tym tygodniu skolei wszystkie dyskusje zdominowało przejęcie Remix’a (największego konkurenta Next.js) przez Shopify. Co to oznacza dla deweloperów? Co stanie się z rozwijanym przez Shopify do tej pory frameworkiem Hydrogen? Czy Next.js ma się czego obawiać? Temu wszystkiemu przyjrzymy się w dzisiejszej edycji naszego przeglądu.

Żeby dobrze zrozumieć przejęcie Remix przez Shopify musimy cofnąć się trochę w czasie. Jest rok 2015 i Michael Jackson oraz Ryan Florence wspólnie tworzą bibliotekę React Router. Szybko staje się ona właściwie domyślną biblioteką do obsługi nawigacji w ~~frameworku~~ bibliotece od Facebooka. Na przestrzeni lat React Router niejednokrotnie wprowadza breaking changes, które doprowadzają deweloperów do szewskiej pasji. Mimo to, na rynku nie powstaje realna alternatywa i do dzisiaj React Router wykorzystywany jest właściwie we wszystkich znanych mi projektach. Potwierdzają to również statystyki, bo React Router jest pobierany z Reactem w 7/10 przypadków.

Znajomość między Michaelem Jacksonem oraz Ryanem Florence nawiązana przy okazji pracy nad React Router w kolejnych latach procentuje. Obaj panowie wspólnie pracują nad licznymi projektami typu Open Source i dogadują się na tyle dobrze, że w 2020 roku postanawiają wspólnie rozkręcić firmę: Remix. Oferowanym przez firmę produktem ma być fullstackowy framework.

Michael Jacksonem oraz Ryan Florence pracujący nad pierwszą wersją Remix – 2020 koloryzowane

Kontrowersje budzi jedynie sposób sprzedaży – droga licencja uzależniona od liczny deweloperów rozwijających produkt. No cóż, jako programistyczna społeczność przyzwyczailiśmy się już, że za darmo to właściwa cena. Na szczęście ta strategia biznesowa nigdy nie wchodzi w życie. W 2021 projekt zyskuje finansowanie z OSS Capital w wysokości 3 milionów dolarów i Remix decyduje się przejść na model Open Source.

Niedługo po otrzymaniu przez firmę zastrzyku gotówki światło dzienne ujrzał zarówno Remix v1 jak i będący jego fundamentem w postaci React Router v6 (a jakżeby inaczej – zawierający całą masę breaking changes). Remix już na starcie oferuje routing oparty o strukturę katalogów, zagnieżdżone layouty czy możliwość wczytywania danych do komponentu wraz z obsługą ładowania oraz błędów. Innowacyjne wygląda też podejście do obsługi formularzy, które wykorzystuje natywne mechanizmy HTML i obsługiwane jest w pełni po stronie serwera.

Zaczęliśmy niebezpiecznie zbliżać się do roku 2022, dlatego zmieńmy teraz wątek i cofnijmy się na chwile do roku 2004. Na pułkach sklepowych wylądował właśnie nowy Nintendo DS, a w telewizji wyemitowany został pierwszy odcinek serialu Lost, a grupa znajomych z Kanady postanawia założyć swój sklep internetowy, w którym sprzedawać będą Snowboardy. Na rynku nie znajdują oni jednak Software’u, który odpowiadałby ich wymaganiom. Jak przystało na prawdziwych inżynierów, postanawiają więc stworzyć go samodzielnie od podstaw.

Nostalgiczna podróż do 2004 roku nabawiła mnie niesamowitej chęci do powrotu do gier z tego okresu…

Sklep z deskami snowboardowymi szybko przeradza się w technologiczny startup i w 2006 roku powstaje firma Shopify. Za cel przyjmuje sobie uproszczenie zakładania i prowadzenia sklepów internetowych tak bardzo, jak to tylko możliwe. Powstają zarówno szablony gotowych sklepów, jak i API umożliwiające szybkie stworzenie dopasowanego do swoich potrzeb rozwiązania. Startup rośnie jak na drożdżach. W 2014 roku obsługuje już 120 tysięcy sprzedawców i przynosi przychód w wysokości 105 milionów dolarów. W 2015 roku firma z powodzeniem wchodzi na nowojorską giełdę.

Rozmawiając o finansach Shopify, nie sposób nie wspomnieć o spadku wartości akcji o ponad 70% na przestrzeni ostatniego roku. Nie doszukiwałbym się tutaj jednak kłopotów samej firmy, a całego naszego sektora. Podobne spadki zaobserwować można chociażby u Mety.

W 2021 roku Shopify pokazuje światu swój nowy framework oparty o Reacta – Hydrogen. Jego celem jest umożliwienie deweloperom szybkiego budowania frontendu dla sklepów internetowych z wykorzystaniem współczesnych technologii. Nowem frameworkowi nie brakuje odwagi. Od dnia zero stawia na React Server Components, które w tamtym momencie nadal są w fazie wczesnej alphy. Do budowania wykorzystuje świeżo zaprezentowany i nie przetestowany jeszcze w boju Vite. Aby ostatecznie podgrzać atmosferę, Hydrogen do stylowania zaleca mocno zopiniowanego Tailwinda.

W tym miejscu obie historie spotykają się. Jest rok 2021 pierwszy, Gatsby już dawno przekazał koronę Server Side Renderingu Next.js. Ten zresztą wydaje się nietykalny – z finansowaniem na poziomie 300 milionów dolarów niewiele jest projektów gotowych rzucić mu rękawicę. Daleko na horyzoncie majaczy stawiający pierwsze kroki Remix, a gdzieś z boku całej sytuacji Shopify pracuje nad swoim własnym innowacyjnym rozwiązaniem w postaci Hydrogen (póki co dedykowanemu sklepom internetowym, ale kto wie – może w przyszłości doczeka się też bardziej ogólnej wersji).

Przełom roku 2021 i 2022 to prawdziwa gorączko jeśli chodzi o renderowanie po stronie serwera. Na scenie pojawiają się też coraz to nowe podejścia do tematu. Nadmienić należy chociażby Astro z Dynamic Islands czy Qwik i Resumable Execution. React Server Components doczekują się wreszcie etapu bety. Zespół odpowiedzialny za Next.js pracuje nad nowym modelem routingu (niektórzy powiedzą, że mocno inspirowanym Remixem).

W środku tego zamieszania, niespełna tydzień po premierze Next.js 13 i dzień przed Halloween, internet obiega informacja, że Shopify zdecydował się na przejęcie Remixa. Niestety kwota zakupu nie jest publicznie znana. W głowach całej społeczności rodzi się pytanie – Czy to koniec Hydrogen? Czy Remix będzie od teraz skupiał się tylko na obsłudze sklepów internetowych? Czy Shopify planuje rozwijać obydwa frameworki?

Odpowiadając najkrócej jak się da na przedstawione pytania. Zarówno Hydrogen jak i Remix nadal będą rozwijane i żaden z nich nie zmienia swojego przeznaczenia. Shopify zamierza jednak wykorzystać synergię między projektami i oprzeć Hydrogen o Remix. Oznacza to, że Remix będzie frameworkiem ogólnego zastosowania, natomiast Hydrogen będzie jego wyspecjalizowaną wersją stworzoną do budowania sklepów internetowych.

Pewnym efektem ubocznym migracji Hydrogen do Remix jest całkowite odejście od React Server Components. Na przestrzeni ostatniego roku to właśnie Shopify był jednym z najaktywniejszych uczestników dyskusji dotyczących tej technologii. To dzięki ich sugestiom zmieniono między innymi konwencję nazewniczą serwerowych komponentów. Teraz zarówno zespół Hydrogen jak i Remix mówi jednym głosem – React Server Components nie są jeszcze gotową technologią, a oba projekty wrócą do tematu kiedy będzie on odpowiednio dojrzały. Rzuca to trochę inne światło na zeszłotygodniowy optymizm wobec Next.js wdrażającego React Server Components.

Zespół Reacta, dowiadujący się, że Hydrogen nie będzie już pomagał w rozwoju React Server Components.

Jaka przyszłość czeka Remix? Jak przyznaje sam Ryan Florence, wreszcie będzie mógł skupić się na budowaniu najlepszego narzędzia, zamiast poświęcać czas wymyślaniu modelu biznesowego i pozyskiwaniu funduszy. Po tej wypowiedzi możemy mieć nadzieję, że dobrze dofinansowany i nieobciążony rozwojem np. infrastruktury serwerowej (jak Deno czy Next.js) będzie rozwijał się szybko i dynamicznie.

Czy Next.js ma się czego obawiać? Na pewno pod względem adopcji przepaść między Remix i Next.js szybko nie zostanie zasypana. Pojawienie się dużej i rozpoznawalnej firmy za Remixem stawia go w bardzo dobrej sytuacji. Po pierwsze znika strach społeczności przed nagłym porzuceniem rozwiązania i przysłowiowym pozostaniem na lodzie. Po drugie przejęcie przez Shopify to też wymiana wiedzy i doświadczeń, która na pewno wyjdzie wszystkim na dobre. Po trzecie silna integracja z Hyddrogen oznacza, że Remix kierowany będzie potrzebami użytkowników, które weryfikowane będą w szybkiej pętli zwrotnej. Reasumując, Next.js szybko nie straci swojej uprzywilejowanej pozycji, ale Remix mocno ugruntował się na pozycji “tego drugiego” rozwiązania do Server Side Renderingu. Jak to jednak bywa w przypadku “gorączki złota”, sytuacja jest dynamiczna i nigdy nie wiadomo kto pierwszy trafi na największą żyłę złota.

Pozostaje tylko pytanie – czym są łopaty w przypadku Server Side Renderingu?

Źródła

https://remix.run/blog/remixing-shopify
https://shopify.engineering/remix-joins-shopify
https://techcrunch.com/2022/10/31/shopify-acquires-remix-to-bolster-its-storefront-design-tools
https://twitter.com/jplhomer/status/1587095536833859584
https://twitter.com/ryanflorence/status/1587171069915385856
https://twitter.com/ryanflorence/status/1587090973594558464
https://www.crunchbase.com/organization/shopify/company_financials
https://docs.astro.build/en/getting-started/
https://qwik.builder.io/docs/getting-started/
https://en.wikipedia.org/wiki/Shopify
https://hydrogen.shopify.dev/roadmap/
https://remix.run/blog/seed-funding-for-remix
https://shopify.engineering/how-we-built-hydrogen

2. Czy React zamierza modyfikować metodę fetch() ?

Dwa tygodnie temu głownym tematem naszego przeglądu było RFC do Reacta dotyczące natywnego wsparcia dla Promisów i async/await. Jednym z tematów, który przewinął się w tle całej dyskusji, było lepsze wsparcie dla cache. Temat wrócił na tapet szybciej niż się spodziewaliśmy, bo eksperymentalna implementacja powstająca na cele kolejnego RFC zawierała monkeypatching metody fetch. Społeczność zachowała czujność i wyłapała odpowiedni PR w repozytorium, a w sieci zawrzało.

Monkeypatching to technika polegająca na modyfikacji zachowania globalnych klas czy funkcji. Chyba najlepszym przykładem monkeypatching jest zone.js wykorzystywany przez Angulara w celu wykrywaniu zmian. Biblioteka ta modyfikuje większość publicznych API przeglądarki, tak aby umożliwić reagowanie na odpowiednie zdarzenia. Dlaczego monkeypatching w Reactie wywołał takie poruszenie, skoro technika ta jest tak powszechna u konkurencji?

Największym argumentem przeciw monkeypatching są problemy z kompatybilnością z zewnętrznymi bibliotekami. Co w sytuacji, kiedy dana biblioteka bazowała na zachowaniu, które zostało zmodyfikowane? Co jeśli dwie biblioteki będą próbowały modyfikować tą samą metodę? Co jeśli w przyszłości przeglądarki rozszerzą standard i zepsuje to stare wersje React? W końcu, czy będzie to tylko pojedyncze odstępstwo od reguły, czy też otwarcie całej puszki pandory.

Zespół Reacta podsumował sprawę krótko i bardzo konkretnie: czekajcie na RFC. Niezależnie od tego czy monkeypatching się Wam podoba czy nie, poczekajmy z ostateczną opinią na uzasadnienie od głównego interesariusza w postaci Reacta.