Kas yra Qwik City ir kodėl jis skiriasi nuo visko, ką matėme iki šiol
Jei manote, kad jau viską matėte frontend pasaulyje – React, Vue, Svelte, Solid – tuomet Qwik City gali jus nemaloniai nustebinti. Arba maloniai, priklausomai nuo to, kaip žiūrite į radikaliai skirtingą požiūrį į web aplikacijų kūrimą. Šis framework’as nėra tiesiog dar vienas JavaScript bibliotekos variantas su šiek tiek kitokia sintakse. Tai fundamentaliai kitoks mąstymas apie tai, kaip turėtų veikti modernios web aplikacijos.
Qwik City yra pilnavertis meta-framework, pastatytas ant Qwik – resumable framework’o. Jei React turi Next.js, Vue turi Nuxt, tai Qwik turi Qwik City. Tačiau skirtumas čia ne tik pavadinime. Qwik City įgyvendina resumability koncepciją, kuri iš esmės keičia tai, kaip naršyklė elgiasi su JavaScript kodu. Užuot krovę ir vykdę visą aplikacijos kodą puslapio įkėlimo metu (kaip daro tradiciniai framework’ai), Qwik City leidžia aplikacijai „atsibusti” ten, kur serveryje baigėsi – be jokio papildomo JavaScript’o.
Skamba kaip magija? Iš dalies taip ir yra. Bet šią magiją galima paaiškinti.
Hydration problema, kurią visi ignoruoja
Pirmiausia reikia suprasti, kodėl Qwik City apskritai atsirado. Dabartiniai framework’ai turi vieną bendrą problemą – hydration. Kai serveris sugeneruoja HTML (SSR), naršyklė gauna puikiai atrodantį puslapį. Bet jis negyvybingas – mygtukai neveikia, formos nesubmituojamos, niekas nevyksta. Kodėl? Nes JavaScript dar neįkrautas.
Tada prasideda hydration procesas. Framework’as turi:
- Atsisiųsti visą JavaScript bundle’ą
- Jį išparsinti ir vykdyti
- Atkurti visą aplikacijos būseną
- Prijungti event listener’ius prie DOM elementų
- Tik tada puslapis tampa interaktyvus
Šis procesas gali užtrukti sekundes, ypač lėtesniuose įrenginiuose ar prasto interneto sąlygomis. Vartotojas mato puslapį, bando spausti mygtukus, bet niekas nevyksta. Tai vadinama uncanny valley efektu – puslapis atrodo gyvas, bet yra miręs.
Next.js bandė spręsti tai su partial hydration, Astro su islands architecture. Bet Qwik City eina dar toliau – jis visiškai atsisako hydration. Vietoj to, jis naudoja resumability.
Resumability: aplikacija, kuri niekada nemirė
Resumability koncepcija yra paprasta teoriškai, bet sudėtinga įgyvendinti. Pagrindinė idėja: aplikacija serveryje ir aplikacija naršyklėje yra ta pati aplikacija, tik skirtingose aplinkose. Kai serveris sugeneruoja HTML, jis į jį įterpią visą reikalingą informaciją apie aplikacijos būseną, event listener’ius, komponentų ribas.
Kai naršyklė gauna šį HTML, ji nežino nieko apie Qwik, React ar bet kokį kitą framework’ą. Ji tiesiog rodo HTML. Bet kai vartotojas bando su kažkuo sąveikauti – spaudžia mygtuką, užveda pelę – tik tada Qwik įsijungia ir lazy-loadina tik tą konkretų kodo gabalėlį, kuris reikalingas tam veiksmui.
Pavyzdžiui, turite puslapį su 50 mygtukų. Tradicinis framework’as turėtų įkrauti visų 50 mygtukų logiką iš karto. Qwik įkrauna tik to mygtuko logiką, kurį vartotojas paspaudė. Kiti 49 mygtukai lieka „miegantys”, kol jų prireikia.
Štai kaip atrodo paprastas Qwik komponentas:
„`typescript
import { component$, useSignal } from ‘@builder.io/qwik’;
export default component$(() => {
const count = useSignal(0);
return (
);
});
„`
Pastebėkite tuos $ simbolius? Tai ne atsitiktinumas. Tai Qwik optimizatoriaus žymekliai, kurie sako: „šis kodas gali būti išskaidytas į atskirą bundle’ą”. onClick$ reiškia, kad click handler’io kodas bus atskirtas ir įkrautas tik tada, kai vartotojas paspaus mygtuką.
Qwik City routing ir duomenų krovimas
Qwik City nėra tik apie resumability. Tai pilnavertis meta-framework su routing sistema, duomenų krovimu, middleware, API route’ais ir visa kita, ko tikitės iš modernaus framework’o.
Routing’as Qwik City yra file-based, kaip Next.js ar SvelteKit. Sukuriate failą src/routes/about/index.tsx ir automatiškai turite /about route’ą. Bet įdomiausia dalis yra tai, kaip veikia duomenų krovimas.
Qwik City turi routeLoader$ funkciją, kuri leidžia krauti duomenis serveryje prieš renderinant puslapį:
„`typescript
import { routeLoader$ } from ‘@builder.io/qwik-city’;
export const useUserData = routeLoader$(async (requestEvent) => {
const userId = requestEvent.params.userId;
const user = await db.users.findById(userId);
return user;
});
export default component$(() => {
const user = useUserData();
return
;
});
„`
Kas čia įdomu? routeLoader$ visada vykdomas serveryje. Jis niekada nepateks į kliento bundle’ą. Galite saugiai naudoti duomenų bazės užklausas, API raktus, bet kokią serverio logiką – ji niekada nebus matoma naršyklėje.
Be to, Qwik City automatiškai prefetch’ina duomenis, kai vartotojas užveda pelę ant nuorodos. Tai reiškia, kad kai jis paspaudžia, puslapis įsikrauna akimirksniu, nes duomenys jau yra.
Progressive enhancement ir zero JavaScript režimas
Vienas labiausiai neįvertintų Qwik City privalumų yra tai, kad jūsų aplikacija veikia net be JavaScript. Rimtai. Jei naršyklėje išjungsite JavaScript, Qwik City aplikacija vis tiek veiks – formos submituosis, nuorodos veiks, net kai kurie interaktyvūs elementai funkcionuos per serverio pusę.
Tai pasiekiama per progressive enhancement principą. Qwik City generuoja HTML formas su tinkamais action atributais, todėl jos gali būti submituojamos tradiciškai, per HTTP POST. Bet kai JavaScript yra įjungtas, Qwik perima kontrolę ir daro viską per AJAX, be puslapio perkrovimo.
Štai pavyzdys su forma:
„`typescript
import { routeAction$, Form } from ‘@builder.io/qwik-city’;
export const useAddUser = routeAction$(async (data, requestEvent) => {
const name = data.get(‘name’);
await db.users.create({ name });
return { success: true };
});
export default component$(() => {
const action = useAddUser();
return (
Vartotojas pridėtas!
}
);
});
„`
Ši forma veiks net be JavaScript. Bet su JavaScript ji veiks greičiau ir sklandžiau, be puslapio perkrovimo.
Realūs performance rezultatai
Teorija skamba puikiai, bet kaip Qwik City pasirodo praktikoje? Rezultatai gana įspūdingi. Builder.io (kompanija, kuri kuria Qwik) pateikia duomenis, kad Qwik aplikacijos pasiekia beveik tobulus Lighthouse rezultatus net su sudėtingomis aplikacijomis.
Pagrindinės metrikos, kuriose Qwik spindi:
- Time to Interactive (TTI) – dažnai matuojamas milisekundėmis, ne sekundėmis
- First Input Delay (FID) – praktiškai nulinis, nes JavaScript įsikrauna tik tada, kai reikia
- Total Blocking Time (TBT) – minimalus, nes nėra didelio hydration proceso
- Bundle size – pradinis bundle dažnai tik 1-2 KB
Bet reikia būti sąžiningiems – Qwik City nėra stebuklingas sprendimas visoms problemoms. Kai aplikacija tampa labai interaktyvi ir vartotojas aktyviai naudoja daug funkcijų, JavaScript vis tiek bus įkrautas. Skirtumas tas, kad jis kraunamas laipsniškai, pagal poreikį, o ne visas iš karto.
Taip pat verta paminėti, kad Qwik City optimizatorius kartais gali sugeneruoti daugiau mažų failų nei tradicinis bundler’is. Tai gali būti problema su HTTP/1.1, bet su HTTP/2 ar HTTP/3 tai ne problema, nes šie protokolai efektyviai tvarko daug mažų užklausų.
Ekosistema ir integracijos
Viena iš didžiausių naujų framework’ų problemų yra ekosistema. Jei neturite UI bibliotekų, state management sprendimų, routing’o, testing įrankių – framework’as lieka tik eksperimentu.
Qwik City šiuo klausimu yra gana brandus. Turime:
- Qwik UI – oficiali komponentų biblioteka su accessible komponentais
- Partytown – biblioteka trečiųjų šalių skriptams izoliuoti į web worker’ius
- Qwik React – galimybė naudoti React komponentus Qwik aplikacijose
- Vitest integracija testavimui
- Tailwind CSS, PostCSS ir kiti styling sprendimai
Ypač įdomus yra Qwik React. Tai leidžia jums naudoti egzistuojančius React komponentus Qwik aplikacijoje. Komponentas bus automatiškai lazy-loadinamas ir veiks kaip Qwik komponentas. Tai reiškia, kad galite migruoti po truputį, nenumesdami visos egzistuojančios kodo bazės.
Deployment pusėje Qwik City palaiko visas pagrindines platformas: Vercel, Netlify, Cloudflare Workers, AWS Lambda, Node.js serverius. Adapters sistema leidžia lengvai prisitaikyti prie bet kokios platformos.
Kada verta rinktis Qwik City ir kada ne
Qwik City nėra universalus sprendimas. Yra scenarijai, kur jis puikiai tinka, ir scenarijai, kur galbūt geriau rinktis ką nors kita.
Qwik City puikiai tinka:
- Content-heavy svetainėms, kur performance yra kritinis
- E-commerce projektams, kur kiekviena milisekundė įtakoja konversijas
- Viešoms svetainėms, kur SEO ir pradinis įkrovimas yra svarbūs
- Projektams, kur vartotojai dažnai naudoja lėtus įrenginius ar blogą internetą
- Aplikacijoms, kur progressive enhancement yra svarbus
Galbūt geriau rinktis ką nors kita:
- Labai interaktyvioms aplikacijoms (pvz., dizaino įrankiams, žaidimams), kur dauguma kodo bus įkrauta bet kuriuo atveju
- Projektams su labai mažu development team’u, kuris nežino Qwik ir neturi laiko mokytis
- Kai reikia specifinių bibliotekų, kurios dar neturi Qwik versijų
- Jei jūsų team’as jau turi gilų expertise su kitu framework’u ir projektas nėra performance-critical
Taip pat verta paminėti, kad Qwik City vis dar yra gana jaunas. Nors jis pasiekė 1.0 versiją ir yra production-ready, ekosistema nėra tokia brandi kaip React ar Vue. Kartais teks patiems spręsti problemas, kurioms kitur jau yra gatavi sprendimai.
Ateitis be hydration
Qwik City rodo mums, kaip galėtų atrodyti web development ateitis. Resumability nėra tik performance optimizacija – tai fundamentaliai kitoks požiūris į tai, kaip kuriame web aplikacijas. Vietoj to, kad stengtumėmės optimizuoti hydration (kaip daro Next.js su Partial Hydration ar Astro su Islands), Qwik tiesiog jo atsisako.
Ar tai reiškia, kad visi turėtume nedelsiant migruoti į Qwik City? Žinoma, ne. React, Vue, Svelte ir kiti framework’ai vis dar yra puikūs pasirinkimai daugeliui projektų. Bet Qwik City įrodo, kad yra erdvės inovacijoms, net tokioje, atrodytų, pribrendusioje srityje kaip frontend development.
Jei kuriate naują projektą, kur performance yra svarbus, arba tiesiog norite išbandyti ką nors radikaliai skirtingo – Qwik City tikrai vertas jūsų dėmesio. Dokumentacija yra puiki, community auga, o Builder.io aktyviai investuoja į framework’o vystymą. Taip, teks išmokti naujų koncepcijų ir kartais susidurti su ekosistemos trūkumais, bet mainais gausite aplikacijas, kurios kraunasi akimirksniu ir veikia net seniausiais telefonais.
Resumability gali būti ne tik Qwik City ypatybė. Jei ši koncepcija įrodys savo vertę (o kol kas atrodo, kad įrodo), gali būti, kad kiti framework’ai pradės įgyvendinti panašius sprendimus. Arba Qwik City taps mainstream pasirinkimu. Arba liksime su įvairove, kur skirtingi projektai naudoja skirtingus įrankius pagal savo poreikius. Bet viena aišku – web development niekada nesustoja evoliucionuoti, ir tai yra gera žinia mums visiems.
