Kas tas Deno ir kodėl apie jį verta kalbėti?
Prieš keletą metų Ryan Dahl, Node.js kūrėjas, pristatė Deno – naują JavaScript ir TypeScript runtime aplinką. Ir nors daugelis iš pradžių žiūrėjo į tai kaip į dar vieną technologijų pasaulio eksperimentą, Deno pamažu įrodė, kad turi ką pasiūlyti. Ypač įdomu tai, kad kartu su pačia runtime aplinka vystosi ir jos ekosistema, įskaitant web framework’us.
Skirtingai nei Node.js, Deno buvo kuriamas jau žinant, kokios klaidos buvo padarytos anksčiau. Saugumas pagal nutylėjimą, įtaisytas TypeScript palaikymas, modernus modulių sistema, atsisakymas nuo node_modules – visa tai skamba patraukliai bet kuriam programuotojui, kuris bent kartą susidūrė su npm priklausomybių pragaru.
Fresh – naujos kartos framework’as
Tarp įvairių Deno framework’ų išsiskiria Fresh – santykinai naujas, bet jau spėjęs sukelti nemažai susidomėjimo projektas. Jį kuria Luca Casonato, vienas iš pagrindinių Deno komandos narių, todėl galima būti tikram, kad šis framework’as tikrai išnaudoja visas Deno galimybes.
Fresh filosofija yra paprasta: minimali JavaScript kiekis kliento pusėje, maksimali sparta ir kūrėjo patirtis, kuri nevargintu. Tai nėra dar vienas React ar Vue klonas – tai visiškai kitoks požiūris į web aplikacijų kūrimą, kuris primena senųjų laikų paprastumą, bet su modernių technologijų privalumais.
Vienas iš svarbiausių Fresh bruožų – tai „islands architecture” arba salų architektūra. Esmė ta, kad dauguma puslapio yra statinis HTML, o interaktyvūs komponentai (salos) yra hidratuojami tik ten, kur reikia. Tai reiškia, kad jūsų vartotojai neturi parsisiųsti megabaitų JavaScript kodo, kad pamatytų paprastą puslapį su vienu mygtuku.
Kaip pradėti dirbti su Fresh?
Pradėti naudoti Fresh yra stebėtinai paprasta. Jums nereikės valandų konfigūruoti build įrankių, webpack’ų ar babel’ių. Viskas veikia iš dėžės:
deno run -A -r https://fresh.deno.dev
Ši komanda sukurs naują projektą su visa reikalinga struktūra. Taip, teisingai supratote – jums net nereikia nieko įsidiegti iš anksto (išskyrus patį Deno, žinoma). Tai vienas iš Deno privalumų – galite paleisti kodą tiesiogiai iš URL.
Projekto struktūra yra intuityvi. Turite routes/ katalogą, kur kiekvienas failas automatiškai tampa maršrutu. Norite sukurti /about puslapį? Tiesiog sukurkite routes/about.tsx failą. Jokių papildomų konfigūracijų, jokio maršrutų registro – viskas veikia pagal failo sistemos struktūrą.
Komponentai ir interaktyvumas
Fresh naudoja Preact – lengvą React alternatyvą, kuri užima vos 3KB. Jei mokate React, mokate ir Fresh. Sintaksė praktiškai identiška, tik viskas veikia greičiau ir lengviau.
Tačiau štai kur prasideda įdomybės. Fresh atskiria du komponentų tipus: statinius ir interaktyvius. Statiniai komponentai gyvena components/ kataloge ir renderinami tik serveryje. Jie tampa paprastu HTML ir nesiunčia jokio JavaScript į naršyklę.
Interaktyvūs komponentai (salos) gyvena islands/ kataloge. Tik šie komponentai bus hidratuoti kliento pusėje. Pavyzdžiui, jei turite puslapį su straipsniu ir vienu „patinka” mygtuku, visas straipsnis bus statinis HTML, o tik mygtukas bus interaktyvus komponentas. Rezultatas? Puslapis užsikrauna akimirksniu, o vartotojas gauna tik tai, kas tikrai reikalinga.
Štai paprastas interaktyvaus komponento pavyzdys:
// islands/Counter.tsx
import { useState } from "preact/hooks";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Skaičius: {count}</p>
<button onClick={() => setCount(count + 1)}>
Pridėti
</button>
</div>
);
}
Duomenų valdymas ir API maršrutai
Fresh leidžia lengvai kurti tiek puslapius, tiek API endpoint’us. Kiekvienas maršrutas gali eksportuoti handler funkcijas, kurios apdoroja įvairius HTTP metodus.
Tarkime, norite sukurti formą, kuri priima duomenis. Galite tai padaryti viename faile:
// routes/contact.tsx
import { Handlers, PageProps } from "$fresh/server.ts";
interface ContactData {
message?: string;
}
export const handler: Handlers<ContactData> = {
async POST(req, ctx) {
const form = await req.formData();
const message = form.get("message");
// Čia galite išsaugoti duomenis į DB
return ctx.render({ message: "Pranešimas išsiųstas!" });
},
GET(req, ctx) {
return ctx.render({});
}
};
export default function ContactPage({ data }: PageProps<ContactData>) {
return (
<div>
{data.message && <p>{data.message}</p>}
<form method="POST">
<textarea name="message"></textarea>
<button type="submit">Siųsti</button>
</form>
</div>
);
}
Atkreipkite dėmesį, kaip paprasta. Jokių atskirų API maršrutų, jokio sudėtingo state valdymo – tiesiog HTML forma ir serverio pusės logika. Tai grąžina mus į laikus, kai web kūrimas buvo paprastesnis, bet su visais modernių technologijų privalumais.
Deployment ir produkcija
Vienas iš didžiausių Fresh privalumų – tai kaip lengva jį iškelti į produkciją. Deno komanda sukūrė Deno Deploy – serverless platformą, kuri idealiai tinka Fresh aplikacijoms.
Deployment procesas yra trivialus: sujungiate savo GitHub repository su Deno Deploy, ir kiekvienas commit automatiškai deployjinamas. Jokių Docker konteinerių, jokių sudėtingų CI/CD pipeline’ų. Tiesiog git push ir po kelių sekundžių jūsų pakeitimai jau live.
Kas dar geriau – Deno Deploy veikia edge tinkle, panašiai kaip Cloudflare Workers ar Vercel Edge Functions. Tai reiškia, kad jūsų aplikacija veiks fiziškai arti jūsų vartotojų, nepriklausomai nuo to, kur jie yra pasaulyje. Atsakymo laikas? Dažniausiai kelios dešimtys milisekundžių.
Žinoma, galite Fresh aplikacijas kelti ir į bet kurią kitą platformą, kuri palaiko Deno – AWS, Google Cloud, net paprastą VPS serverį. Bet Deno Deploy patirtis yra tokia sklandi, kad sunku atsispirti.
Realūs panaudojimo atvejai
Dabar tikriausiai galvojate: „Gerai, skamba įdomiai, bet ar tai tinka realiems projektams?” Atsakymas priklauso nuo to, ką kuriate.
Fresh puikiai tinka turinio orientuotoms svetainėms: tinklaraščiams, dokumentacijai, landing page’ams, portfolio. Bet kurioje situacijoje, kur jums reikia greito puslapio su minimalia interaktyvumu, Fresh spindi. Pavyzdžiui, jei kuriate įmonės svetainę su keliais puslapiais ir kontaktų forma – Fresh bus idealus pasirinkimas.
Taip pat Fresh gerai tinka MVP kūrimui. Jei turite idėją ir norite greitai sukurti prototipą, Fresh leidžia tai padaryti be didelio overhead’o. Nereikia konfigūruoti dešimčių įrankių, galite tiesiog pradėti rašyti kodą.
Tačiau jei kuriate sudėtingą SPA su daug kliento pusės logikos, daug real-time funkcionalumo, Fresh gali būti ne geriausias pasirinkimas. Nors techniškai galite tai padaryti, framework’as tikrai nėra optimizuotas tokiems scenarijams. Čia geriau tiktų tradiciniai framework’ai kaip React ar Vue su jų ekosistemomis.
Ką verta žinoti prieš pradedant
Pirmas dalykas – Fresh vis dar yra gana jaunas. Tai nereiškia, kad jis nestabilus ar neparuoštas naudojimui, bet ekosistema nėra tokia brandi kaip Next.js ar Nuxt. Rasite mažiau tutorialų, mažiau trečiųjų šalių bibliotekų, mažiau Stack Overflow atsakymų. Tačiau dokumentacija yra puiki, o Deno bendruomenė Discord’e labai draugiška.
Antra – jei jūsų komanda įpratusi prie Node.js ekosistemos, perėjimas gali pareikalauti šiek tiek adaptacijos. Nors Deno palaiko daugelį npm paketų per CDN’us kaip esm.sh ar skypack.dev, ne viskas veikia sklandžiai. Kartais teks ieškoti alternatyvų arba rašyti savo sprendimus.
Trečia – TypeScript yra first-class citizen Fresh ekosistemoje. Tai puiku, jei jau naudojate TypeScript, bet jei vis dar esate JavaScript puristas, gali tekti prisitaikyti. Nors galite rašyti ir paprastą JavaScript, dauguma pavyzdžių ir dokumentacijos yra TypeScript.
Dar vienas praktinis patarimas – pradėkite nuo mažo projekto. Nesistenkite iš karto migruoti didelės aplikacijos. Sukurkite paprastą landing page ar nedidelį įrankį, pajuskite, kaip viskas veikia. Fresh filosofija gali skirtis nuo to, prie ko esate įpratę, todėl geriau pirmiausia susipažinti su pagrindinėmis koncepcijomis.
Kodėl Fresh gali būti ateitis (arba bent jos dalis)
Web kūrimas pastaraisiais metais tapo pernelyg sudėtingas. Mes siunčiame megabaitus JavaScript kodo, kad parodytume paprastą puslapį. Mes praleidžiame valandas konfigūruodami build įrankius. Mes kovojame su priklausomybių konfliktais ir saugumo spragomis.
Fresh ir panašūs framework’ai siūlo kitą kelią. Jie primena, kad web iš esmės yra paprasta platforma, ir ne visada mums reikia sudėtingų sprendimų. Kartais HTML, CSS ir šiek tiek JavaScript yra viskas, ko reikia.
Salų architektūra nėra nauja idėja – apie ją kalbama jau kelerius metus. Bet Fresh yra vienas iš pirmųjų framework’ų, kuris ją įgyvendina taip elegantiškai ir paprastai. Kartu su Deno privalumais – saugumu, greičiu, modernia modulių sistema – tai tampa labai patraukliu paketu.
Ar Fresh pakeis React ar Next.js? Greičiausiai ne. Bet ar jis turi savo vietą web kūrimo ekosistemoje? Absoliučiai. Ypač projektams, kur svarbu našumas, paprastumas ir greitas time-to-market.
Jei esate programuotojas, kuris mėgsta eksperimentuoti su naujomis technologijomis, Fresh tikrai vertas jūsų dėmesio. Net jei nuspręsite jo nenaudoti produkcijoje, patirtis su skirtingu požiūriu į web kūrimą gali pakeisti jūsų mąstymą apie tai, kaip kuriame aplikacijas. Ir kartais būtent tai – naujas perspektyvos kampas – yra vertingiausias dalykas, kurį galime gauti iš naujų technologijų.
