Qwik, nowy framework od twórców angular.js i Ionic - Fronend Weekly vol. 106

1. Qwik

Panie i Panowie, najwyższy czas przekręcić liczniki dni od pojawienia się nowego JavaScriptowego frameworku (ten żart nigdy mi się nie znudzi). Co prawda firma Builder.io już kilka miesięcy temu zaprezentowała światu Qwik, ale dopiero kilka dni temu doczekał się on wersji beta. Jej pojawienie się oznacza, że wszystkie potrzebne funkcjonalności są już zaimplementowane, API nie ulegnie zmianie do wydania wersji 1.0 i projekt posiada już niezbędną dokumentację.

Jeśli do tej pory nie słyszeliście o Builder.io, to najwyższa pora to nadrobić, bo ta niepozorna firma może mocno w naszym frontendowym światku. I nie mam tutaj na myśli ich flagowego produktu w postaci narzędzia low-code, a rozwijane trochę na boku biblioteki i narzędzia. O uniwersalnym kompilatorze komponentów Mitosis, mogliście już przeczytać w jednej z poprzednich edycji naszego przeglądu. Moją uwagę bardziej przykuwają jednak dwa inne projekty: Partytown oraz Qwik. Ten pierwszy pozwala wydzielić skrypty stron trzecich do osobnego WebWorkera, co znacząco usprawnia początkowe ładowanie strony. Temu drugiemu z okazji premiery wersji beta przyjrzymy się dokładniej w kolejnych akapitach.

Prawdopodobnie nie pisałbym o Qwik, gdyby nie ludzie rozwijający projekt. Są wśród nich takie tuzy jak Miško Hevery (twórca anguar.js), Manu Almeida (twórca Gina i Stencila) oraz Adam Bradley (twórca Ionica i Stencila). Mamy tu więc swego rodzaju frontendowy All-Stars i zdecydowanie nie jest to kolejny framework tworzony przez nikomu nieznanych ludzi z internetu.

Qwik wywraca do góry nogami paradygmaty wszystkich współczesnych narzędzi do renderowania po stronie serwera, poprzez podważenie zasadności procesu uwodnienia (jeszcze raz powtarzam – nie zrezygnuję z używania koślawych spolszczeń). Uwodnienie, to proces po stronie klienta, podczas którego wyrenderowana po stronie serwera aplikacja ładuje kod JavaScript, a następnie powtarza całą logikę inicjalizacyjną. O ile klient aplikacji bardzo szybko widzi docelową teść, o tyle sam proces uwodornienia jest zazwyczaj znacząco dłuższy.

Alternatywa, którą oferuje Qwik, to wznawiane wykonania (ang. Resumable). Paradygmat ten pozwala zapisać stan aplikacji po stronie serwera w taki sposób, aby po stronie klienta możliwe było natychmiastowe wznowienie wykonywania kodu. Brzmi skomplikowanie? Na szczęście skomplikowana logika skrzętnie schowana jest pod przystępnym API, które całą magię chowa przed programistą.

No dobra, a co jeśli naprawdę chcę wiedzieć jak ta magia działa pod spodem? W krótkiej formie jaką są nasze przeglądy nie podejmę się wytłumaczenia jak działają bebechy frameworka i najlepiej będzie jeśli sami sięgnięcie do dokumentacji. W ogromnym skrócie, kod komponentów kompilowany jest do osobnych paczek, a sam stan aplikacji zapisywany jest w DOM w “JSONie na sterydach”. Do klienta wysyłany jest wyrenderowany HTML oraz 1KB kody samego Qwika. Ten od razu pobiera kodu wszystkich niezbędnych komponentów, jednak zamiast łączyć je od razu z DOM’em czeka na pierwsze interakcje użytkownika.

Jaka jest moja opinia na temat Qwik? Wątpię czy w ostatecznym rozrachunku będzie on w stanie konkurować z Reactem czy Angularem. Narzędzia te operują na prostszych abstrakcjach, przez co tworzenie z ich pomocą zaawansowanych aplikacji jest łatwiejsze. Jeśli patrzymy natomiast tylko na obszar renderowania po stronie serwera, to ja z chęcią zobaczyłbym porównanie Resumability z Dynamic Islands (Astro, Fresh). Pod skórą przeczuwam, że te drugie nie będą wiele wolniejsze i jeśli tak będzie, to korzystając z prawa brzytwy ockhama, zdecydowanie wygrają one ten pojedynek.

Tak, zdaję sobie sprawę, że tak właśnie wyglądam, a Qwik to zupełnie inna bajka niż React i Astro 😉

Źródła:

https://www.youtube.com/watch?v=x2eF3YLiNhY

https://www.builder.io/blog/qwik-and-qwik-city-have-reached-beta

https://qwik.builder.io/

2. Lume

Deno rośnie ostatnio jak na drożdżach. Zacznijmy od tego, że w czerwcu w ramach kolejnej rundy finansowania Deno Company zgarnęło 21 milionów dolarów. Niewiele później, wydany został Fresh – pierwszy framework do renderowania po stronie serwera dedykowany dla Deno. W sierpniu piekło zamarzło, bo firma ogłosiła fundamentalne zmiany w rozwijanym przez siebie środowisku uruchomieniowym. Wśród nich znalazło się między innymi wsparcie dla npm (!) oraz jeszcze szybszy serwer uruchomieniowy. We wrześniu Deno wraca na pierwsze strony gazet z dedykowanym generatorem statycznych stron – Lume.

Lume wspiera większość z popularnych formatów templatów, począwszy od Markdown, przez bardziej egzotyczne jak Nunjucks czy Pug, aż po najbardziej standardowy JSX i TSX. Pod względem pobierania danych również jest całkiem bogato, bo oprócz własnych loaderów w TypeScript skorzystać możemy z wbudowanych obsługujących zarówno YAML jak i JSON. Wynikiem działania Lume są całkowicie statyczne pliki HTML, a do klienta nie jest wysyłany ani jeden kilobajt JavaScript.

Lume może być hostowany przy użyciu dowolnego dostawcy usług chmurowych i Deno Deploy nie jest tutaj nadmiernie wpychany użytkownikom. W dokumentacji znajdziemy dokładne instrukcje wdrożenia dla 9 chmur, a matczyna chmura umieszczona jest dopiero na 4 miejscu.

Źródło:

https://lume.land/

Bonus: List do Reacta

Jako, że dzisiejsza edycja wyszła odrobinę krótsza niż zazwyczaj, to na koniec postanowiłem podzielić się z Wami ciekawym artykułem, który podbił ostatnio Reddita i Hacker Newsy.

Czujecie pod skórą, że z Reactem coś jest nie tak? A może wręcz przeciwnie? Niezależnie od odpowiedzi, w liście autorstwa Françoisa Zaninotto, znajdziecie kilka zręcznie wypunktowanych wad Reacta. Podobnych artykułów widziałem już sporo, ale w tym przypadku autor jasno przedstawia swoją krytykę i na jej poparcie ma solidne argumenty.