Ak ste čítali môj posledný článok o Bun, viete, že rád skúšam programátorské novinky. Ak ma niektorá z nich zaujme, zvyknem sa o svoje skúsenosti podeliť aj na tomto blogu. Tentokrát som si však dal zámerne načas. Qwik totiž vyšiel vo svojej stabilnej verzii 1.0 už 1. mája 2023 a odvtedy ho testujem, skúmam, porovnávam a snažím sa ho poriadne pochopiť. A aj keď ešte čakám na ďalšie vylepšenia, myslím, že už vám tento nový HTML framework dokážem dostatočne priblížiť. Poďme teda na to.
Prečo tvorca Angularu používa React?
Podtitulok je naschvál trochu senzačný, ale nezavádza. Spoluzakladateľom Qwik totiž nie je nikto iný, než otec Angularu, Slovák Miško Hevery. Mne, ako angularistovi, sa to páči, avšak, menej mi už imponuje, že samotný Qwik používa syntax a metódy Reactu.
Pravdou však je, že má na to dobré dôvody. React je v základe minimalistický a keď má byť niečo ultrarýchle, musí to dodržiavať práve minimalistické princípy (príkladom je aj backendový jazyk GoLang). Záverom teda je, že keď vieš React, vieš aj Qwik.
V čom je Qwik revolučný?
V podstate vo všetkom, čo o frontendových frameworkoch vieme. Hlavným cieľom Qwik-u je byť rýchly. Myslím tým naozaj rýchly – pohybuje sa totiž niekde na úrovni čistého HTML bez JavaScriptu, vykonávania zložitého vykresľovania komponentov a nezmyselného načítavania všetkého, čo sa bude neskôr používať. A darí sa mu to.
Stačí ísť na hlavnú stránku Qwik, kde nájdete demonštrácie stránok, kde je už framework implementovaný. Priemerné hodnotenia ich rýchlosti sa podľa Google metrík pohybujú na úrovni 97%.
Ako je možné, že je Qwik taký rýchly?
Qwik kombinuje niekoľko základných princípov, ktoré už poznáme z rôznych iných frameworkov, a niekoľko vlastných revolučných myšlienok zavedených do praxe.
- SSR – Server Side Rendering: Prvotný load stránky a vykonanie základných stavov sa realizuje na strane servera, kde je stránka hostovaná. Ku klientovi sa následne vráti už iba HTML.
- Samotný framework sa ku klientov neprenáša: Prenáša sa iba Qwik Loader, ktorý má menej ako 1-2 kb.
- Qwik je kompatibilný s Bun, Deno, Netlify a Node.js a na pozadí pracuje s Vite a esbuild
Tieto princípy sú dobre známe a pri dobrom zastrešení môžu pomôcť každému frameworku. V čom je ale Qwik naozaj naj? Poďme si ho porovnať.
Ako funguje bežný web
Bežná moderná stránka stiahne pri prvom loade základné HTML a kopu JavaScriptu. Potom ešte lazy-loaduje kvantum JavaScriptu a následne pomocou frontendového frameworku vytvára rôzne štruktúry komponentov, listenerov, atď. Celý tento proces voláme aj hydratácia. Kým zbehne, pri komplexných aplikáciách trvá niekedy až sekundy, kým niečo vidíme a vieme interagovať.
Ako funguje Qwik
Qwik, na druhej strane, nepozná hydratáciu v pravom zmysle slova. HTML sa pri ňom prvýkrát načíta na serveri, kde je stránka hostovaná. Následne vytvorí reláciu pre daného klienta/prehliadač, vykoná základné stavy a na záver spomínanému klientovi zašle už iba minimalistické HTML.
Len s čistým HTML by sme toho ale veľa nenarobili. Potrebujeme spúšťať eventy, interagovať s akciami, uchovávať stavy a riešiť prekreslenie. Ako to Qwik robí? Takto:
- Všetky premenné, stavy komponentov či dočasné hodnoty sú zaznamenané ako atribút v HTML nad elementami.
- Eventy a akcie sú tiež zaznamenané, a to v podobe textu v atribúte.
- Qwik všetko serializuje pomocou JSON.stringify – rieši chyby ako cyklické referencie, serializáciu vstavaných objektov (dátum, mapy), DOM referencie, promise aj funkcie.
- Využíva sa len jeden globálny listener.
- Vďaka querySelectorAll sú všetky eventy globálne odchytené a následne porovnávané a vyhodnocované na základe selektorov.
- Qwik využíva vstavaný state management – na reaktivitu používa proxy, ktorý je veľmi podobný signálom. Rozdiel je len v tom, že vstup je vždy objekt a nie primitívny typ. Kto pozná signály, vie, že žiaden change detection ala Angular nie je nutný.
- Každý komponent, ktorý je viditeľný, vykresľuje len HTML. Ostatné komponenty, samotný kód a akcie sú oddialené tak dlho, pokiaľ to je možné.
V skratke – všetko je lazy-loadované
V Qwik je teda lazy-loadované všetko, čo sa dá. Každý komponent sa načíta až vtedy, keď je naozaj nutné ho vykresliť. Podobne to funguje aj pri akciách – pri inicializácii signálu na SSR sa síce vráti textové HTML tlačidla, ale nevykonáva sa. Akcia nastane až pri úspešnom stlačení, ktoré sa odchytí v globálnom poslucháčovi. Následne sa stiahne a vykoná časť z onClick$ eventu a hodnota sa prekreslí a serializuje do HTML.
Ako to Qwik dokáže? Vďaka deleniu. Komponent môže byť pokojne napísaný v jednom súbore a Qwik sa postará o to, aby bola každá jej metóda, akcia, HTML, štýly a všetko ostatné rozdelené a vykompilované na samostatné súbory a chunky. Ak má teda vaša aplikácia 10 000 súborov, Qwik ich rozdelí tak, že sa z nich poľahky môžu stať aj stovky tisíc súborov.
A keď Qwik v momente, keď používateľ stlačí tlačidlo, zistí, že danú metódu ešte nemá, jednoducho si jej súbor rýchlo stiahne zo servera (čo si väčšinou vyžiada len zopár bytov/kilobytov), a následne ju vykoná.
HTML kód pre tlačidlo vyzerá teda takto:
Qwik označí textový atribút pri globálnom poslucháči nad tlačidlom a po stlačení definuje, čo má stiahnuť a ktorú metódu vykonať.
A aby si to Qwik ešte viac uľahčil, okrem rozdelenia komponentov si ešte určuje aj ich životný cyklus. Rozdeľuje ho do troch stavov:
- Task: Vykonáva úlohu pred vykreslením alebo po zmene stavu – vykonateľné na SSR aj klientovi.
- Render: Vykresľuje komponent po Tasku a pred VisibleTask.
- VisibleTask: Vykonáva úlohu, keď je komponent vykreslený a zároveň viditeľná – vykonateľné len na klientovi.
Na základe nich potom dokáže bleskovo určiť, kde sa budú jednotlivé úlohy vykonávať.
Aká je budúcnosť Qwik?
Čo je teda vlastne Qwik? Je to React, Svelte a Angular s SSR v jednom :) Nie je to ale nič nové. Keďže vidím, s čím prichádza Bun, alebo čo aktuálne vo verziách 16 a 17 pridáva Angular, viem, že na poli IT sa každý od každého učí a inšpiruje. A tak je to správne.
A čo si o Qwik po vyše 5 mesiacoch testovania myslím? No, je síce brutálne rýchly, ale aj brutálne jednoduchý, čo sa mi zas až tak nepáči. Viem si ale predstaviť, že môže byť skvelou inšpiráciou pre iné, zrelšie frameworky. SSR s inicializovaným stavom, iba jeden globálny listener a čo najviac lazy-loadovania sú totiž myšlienky, ktorými sa naozaj oplatí zaoberať.
Zdroje:
https://dev.to/builderio/a-first-look-at-qwik-the-html-first-framework-af
https://www.builder.io/blog/qwik-v1
Titulný obrázok:
https://www.builder.io/blog/why-progressive-hydration-is-harder-than-you-think
