Kas tas Deno ir kodėl jis iš viso atsirado?

Jei sekate JavaScript ekosistemą, tikriausiai jau girdėjote apie Deno – runtime aplinką, kurią sukūrė tas pats Ryan Dahl, Node.js tėvas. Tik šįkart jis nusprendė pataisyti savo paties klaidas. 2018 metais konferencijoje JSConf jis pasakė garsią kalbą „10 dalykų, kurių gailisi apie Node.js”, ir štai rezultatas – Deno.

Bet Fresh framework’as yra dar naujesnis dalykas. Tai web framework’as, sukurtas specialiai Deno ekosistemoje, kuris 2022 metais pristatė gana radikalią idėją: o gal galima daryti šiuolaikiškus web projektus be build step’o? Be webpack’o, be vite’o, be jokių bundler’ių? Skamba kaip fantastika, ypač jei paskutinius kelerius metus praleidote konfigūruodami babel, typescript, ir dar dešimt kitų įrankių.

Fresh žada grąžinti paprastumą, bet tuo pačiu išlaikyti visus modernius funkcionalumus. Tai ne grįžimas į 2010-uosius – tai šuolis į priekį, tik kitu keliu.

No-build architektūros esmė

Tradiciškai, kai kuriate React, Vue ar bet kokį kitą modernų web projektą, jūsų workflow atrodo maždaug taip: rašote kodą, paleidžiate build procesą, kuris viską sukompiliuoja, optimizuoja, sujungia į bundle’us, ir tik tada galite matyti rezultatą naršyklėje. Development režime tai vyksta automatiškai background’e, bet vis tiek – tas procesas egzistuoja.

Fresh’as veikia fundamentaliai kitaip. Jūsų TypeScript kodas vykdomas tiesiogiai serveryje be jokio transpiliavimo. Komponentai renderinami server-side, o į klientą siunčiamas minimalus JavaScript kiekis – tik tai, kas tikrai reikalinga interaktyvumui.

Kaip tai įmanoma? Deno natively palaiko TypeScript ir modernius ES modulius. Naršyklės šiais laikais taip pat palaiko ES modulius. Taigi, kam tas tarpininkas? Fresh tiesiog eliminuoja šį perteklinį sluoksnį.

Praktiškai tai reiškia, kad jūs išsaugote failą ir iš karto matote pakeitimus. Ne po 3 sekundžių, ne po 10 sekundžių kaip sudėtingesniuose projektuose – iš karto. Hot module replacement čia nėra magiška technologija, kurią reikia konfigūruoti – tai tiesiog natūrali sistemos dalis.

Kaip Fresh veikia po gaubtu

Fresh architektūra remiasi keliais pagrindiniais principais. Pirma, Islands Architecture – koncepcija, kurią populiarino Astro framework’as. Idėja paprasta: dauguma jūsų puslapio yra statinis HTML, o interaktyvumas yra tik „salelėse” – atskiruose komponentuose, kuriems tikrai reikia JavaScript.

Pavyzdžiui, turite straipsnį su komentarų sekcija. Straipsnis – statinis HTML, renderintas serveryje. Komentarų forma su real-time validacija – tai „sala”, kuri gauna JavaScript ir tampa interaktyvi. Fresh automatiškai identifikuoja šias salas ir siunčia tik reikalingą kodą.

Antra, file-based routing. Jei dirbote su Next.js ar SvelteKit, tai jums pažįstama. Sukuriate failą `routes/about.tsx` – turite route’ą `/about`. Paprasta, intuityvu, nereikia konfigūruoti jokių router’ių.

Trečia, Preact kaip UI biblioteka. Fresh naudoja Preact – React alternatyvą, kuri yra tik 3KB dydžio. Ji turi beveik identišką API kaip React, tad jei mokate React, mokate ir Preact. Bet ji daug mažesnė ir greitesnė.

Ketvirta, zero config filosofija. Jūs neatidarysite `fresh.config.js` failo su 200 eilučių konfigūracijos. Tokio failo tiesiog nėra. Framework’as turi protingus defaults, kurie veikia 95% atvejų. Jei reikia kažko specifinio, galite customizuoti, bet pradžiai – tiesiog pradėkite kurti.

Praktinis pavyzdys: sukuriame pirmą projektą

Užtenka teorijos, pažiūrėkime, kaip tai atrodo praktikoje. Pirma, jums reikia Deno. Įdiegimas paprastas:

„`bash
curl -fsSL https://deno.land/install.sh | sh
„`

Dabar sukuriame Fresh projektą:

„`bash
deno run -A -r https://fresh.deno.dev my-project
cd my-project
deno task start
„`

Ir viskas. Jūsų projektas veikia `localhost:8000`. Nereikėjo instaliuoti `node_modules` su 300MB priklausomybių. Nereikėjo laukti, kol npm įdiegs pusę interneto.

Pažiūrėkime į paprastą route’ą. Sukuriate `routes/index.tsx`:

„`typescript
import { Head } from „$fresh/runtime.ts”;
import Counter from „../islands/Counter.tsx”;

export default function Home() {
return (
<>

);
}
„`

O dabar interaktyvi „sala” – `islands/Counter.tsx`:

„`typescript
import { Signal, useSignal } from „@preact/signals”;

interface CounterProps {
start: number;
}

export default function Counter(props: CounterProps) {
const count = useSignal(props.start);

return (

);
}
„`

Atkreipkite dėmesį: `routes/` kataloge – server-side komponentai, `islands/` kataloge – client-side interaktyvūs komponentai. Fresh automatiškai supranta skirtumą. Jums nereikia rašyti `”use client”` ar kitų direktyvų.

Signals: reaktyvumas be overhead’o

Fresh naudoja Preact Signals – naują reaktyvumo sistemą, kuri yra greitesnė už tradicinį React state management. Signals yra primityvios reaktyvios reikšmės, kurios automatiškai atnaujina UI, kai pasikeičia.

Kodėl tai svarbu? Tradiciniame React, kai pasikeičia state, komponentas re-renderinamas visas. Su Signals, atnaujinamos tik tos DOM dalys, kurios tikrai priklauso nuo pasikeitusios reikšmės. Tai labai efektyvu.

Pavyzdys su forma:

„`typescript
import { useSignal } from „@preact/signals”;

export default function ContactForm() {
const name = useSignal(„”);
const email = useSignal(„”);
const message = useSignal(„”);
const isValid = useComputed(() =>
name.value.length > 0 &&
email.value.includes(„@”) &&
message.value.length > 10
);

const handleSubmit = async (e: Event) => {
e.preventDefault();
if (!isValid.value) return;

await fetch(„/api/contact”, {
method: „POST”,
body: JSON.stringify({
name: name.value,
email: email.value,
message: message.value
})
});
};

return (