Fresh: Išsamus serverio pusėje atvaizduoto Deno žiniatinklio karkaso tyrimas

Nuolat besikeičiančiame žiniatinklio kūrimo kraštovaizdyje nuolat atsiranda naujų karkasų ir įrankių, kurių kiekvienas žada išspręsti konkrečias problemas ir pagerinti kūrėjo patirtį. Vienas iš tokių karkasų, sulaukęs didelio dėmesio, yra Fresh, naujos kartos žiniatinklio karkasas, sukurtas ant Deno. Fresh išsiskiria tuo, kad daugiausia dėmesio skiria serverio pusės atvaizdavimui (SSR), salų architektūrai ir unikaliam požiūriui, kuris sumažina kliento pusės JavaScript poreikį, todėl užtikrinamas išskirtinai greitas našumas ir pagerintas SEO.

Kas yra Fresh?

Fresh yra viso paketo žiniatinklio karkasas, skirtas kurti šiuolaikines, dinamines svetaines ir žiniatinklio programas. Jis išnaudoja Deno, saugios JavaScript ir TypeScript vykdymo aplinkos, galią ir paprastumą. Pagrindinės Fresh funkcijos apima:

• Serverio pusės atvaizdavimas (SSR): Fresh atvaizduoja komponentus serveryje, siųsdamas visiškai atvaizduotą HTML klientui. Tai žymiai pagerina pradinį puslapio įkėlimo laiką ir SEO, nes paieškos sistemos gali lengvai nuskaityti ir indeksuoti turinį.
• Salų architektūra: Fresh naudoja salų architektūrą, kurioje tik interaktyvūs puslapio komponentai yra hidratuojami su kliento pusės JavaScript. Tai sumažina JavaScript kiekį, kurį reikia atsisiųsti ir vykdyti naršyklėje, todėl pagreitėja našumas ir pagerėja vartotojo patirtis.
• Nulinis vykdymo JS pagal numatytuosius nustatymus: Skirtingai nuo daugelio kitų karkasų, kuriems reikia didelio kiekio JavaScript siųsti klientui, Fresh siekia sumažinti kliento pusės JavaScript. Dauguma programos logikos veikia serveryje, o tik būtinas JavaScript siunčiamas klientui, kad būtų galima valdyti interaktyvumą.
• Integruotas maršrutizavimas: Fresh siūlo integruotą failų sistemos pagrindu sukurtą maršrutizavimo sistemą, leidžiančią lengvai apibrėžti maršrutus ir tvarkyti skirtingus užklausimus.
• TypeScript palaikymas: Fresh sukurtas su TypeScript, užtikrinančiu tipų saugumą ir pagerinantį kūrėjo produktyvumą.
• Deno integracija: Būdamas Deno pirmasis karkasas, Fresh naudojasi Deno saugos funkcijomis, priklausomybių valdymu ir bendru našumu.

Kodėl verta rinktis Fresh?

Fresh siūlo keletą įtikinamų pranašumų, palyginti su tradiciniais žiniatinklio karkasais:

1. Našumas

Našumas yra labai svarbus veiksnys šiuolaikiniame žiniatinklio kūrime. Lėtai įkeliančios svetainės gali sukelti nusivylimą vartotojams, didesnį atmetimo rodiklį ir žemesnį paieškos sistemos reitingą. Fresh SSR ir salų architektūra žymiai pagerina svetainės našumą sumažindama JavaScript kiekį, kurį reikia atsisiųsti ir vykdyti naršyklėje. Tai lemia greitesnį pradinį puslapio įkėlimo laiką ir jautresnę vartotojo patirtį.

Pavyzdys: Apsvarstykite elektroninės prekybos svetainę, kurioje rodomi produktų sąrašai. Naudojant tradicinį kliento pusės atvaizdavimą, naršyklė turėtų atsisiųsti ir vykdyti didelį JavaScript paketą, kad atvaizduotų produktų sąrašus. Naudojant Fresh, serveris atvaizduoja produktų sąrašus ir siunčia HTML klientui, todėl pradinis įkėlimo laikas yra daug greitesnis. Tik interaktyviems elementams, pvz., mygtukui „Įdėti į krepšelį", reikės kliento pusės JavaScript.

2. SEO optimizavimas

Paieškos sistemos optimizavimas (SEO) yra būtinas norint pritraukti organinį srautą į svetainę. Paieškos sistemos remiasi robotais, kad indeksuotų žiniatinklio puslapių turinį. Kliento pusėje atvaizduojamas svetaines gali būti sunku indeksuoti paieškos sistemos robotams, nes joms reikia, kad JavaScript būtų vykdomas norint atvaizduoti turinį. Fresh SSR užtikrina, kad paieškos sistemos galėtų lengvai nuskaityti ir indeksuoti turinį, todėl pagerėja paieškos sistemos reitingai.

Pavyzdys: Naujienų svetainė, sukurta su Fresh, turės savo straipsnius, atvaizduotus serveryje, todėl jie bus lengvai pasiekiami paieškos sistemos robotams. Tai leidžia svetainei užimti aukštesnę vietą paieškos rezultatuose pagal atitinkamus raktinius žodžius, pritraukiant daugiau organinio srauto į svetainę.

3. Pagerinta vartotojo patirtis

Greita ir reaguojanti svetainė suteikia geresnę vartotojo patirtį. Fresh dėmesys našumui ir minimaliam JavaScript užtikrina sklandesnę ir malonesnę naršymo patirtį vartotojams. Tai gali padidinti įsitraukimą, sumažinti atmetimo rodiklius ir padidinti konversijų rodiklius.

Pavyzdys: Internetinė mokymosi platforma, sukurta su Fresh, studentams suteiks sklandžią ir reaguojančią mokymosi patirtį. Studentai gali greitai pasiekti kursų medžiagą, dalyvauti diskusijose ir atlikti užduotis nepatirdami erzinančių vėlavimų ar našumo problemų.

4. Supaprastintas kūrimas

Fresh supaprastina žiniatinklio kūrimą, suteikdamas nuoseklią ir intuityvią kūrimo patirtį. Karkaso integruota maršrutizavimo sistema, TypeScript palaikymas ir Deno integracija leidžia lengvai kurti ir prižiūrėti sudėtingas žiniatinklio programas.

Pavyzdys: Kūrėjas, kuriantis socialinio tinklo programą su Fresh, gali lengvai apibrėžti maršrutus skirtingiems puslapiams, pvz., vartotojo profiliams, laiko juostoms ir nustatymams. TypeScript tipo saugumas padeda išvengti klaidų ir pagerina kodo priežiūrą. Deno saugos funkcijos užtikrina, kad programa būtų saugi ir apsaugota nuo pažeidžiamumų.

5. Deno ekosistema

Fresh sukurtas ant Deno, kuris siūlo keletą pranašumų, palyginti su Node.js, įskaitant patobulintą saugumą, integruotą TypeScript palaikymą ir modernesnę priklausomybių valdymo sistemą. Deno decentralizuota modulių sistema pašalina centrinės paketų saugyklos, tokios kaip npm, poreikį, sumažindama tiekimo grandinės atakų riziką.

Pavyzdys: Naudojant Deno, Fresh gali tiesiogiai naudoti ES modulius iš URL, skatinant nekeičiamumą ir užkertant kelią priklausomybių painiavos atakoms. Tai padidina saugumą, palyginti su tradicinėmis Node.js programomis, priklausančiomis nuo npm paketų.

Kaip veikia Fresh: Išsami salų architektūra

Salų architektūra yra pagrindinė Fresh našumo pranašumų koncepcija. Vietoj to, kad visas puslapis būtų hidratuojamas su JavaScript, hidratuojami tik konkretūs interaktyvūs komponentai, vadinami „salomis". Likusi puslapio dalis išlieka statiniu HTML. Ši selektyvi hidratacija sumažina JavaScript kiekį, kurį reikia atsisiųsti ir vykdyti, todėl pagreitėja puslapio įkėlimo laikas ir pagerėja našumas.

Pavyzdys: Įsivaizduokite tinklaraščio įrašą su komentarų skiltimi. Pats tinklaraščio įrašas yra statinis turinys ir jam nereikia jokio kliento pusės JavaScript. Tačiau komentarų skiltis yra interaktyvi ir jai reikia JavaScript, kad būtų galima tvarkyti vartotojo įvestį, rodyti komentarus ir pateikti naujus komentarus. Fresh atveju tinklaraščio įrašas būtų atvaizduotas serveryje ir išsiųstas klientui kaip statinis HTML. Tik komentarų skiltis būtų hidratuojama su JavaScript, todėl ji taptų „interaktyvumo sala" puslapyje.

Procesą galima apibendrinti taip:

1. Serverio pusės atvaizdavimas: Serveris atvaizduoja visą puslapį, įskaitant statinį turinį ir interaktyvius komponentus.
2. Dalinis hidratavimas: Fresh identifikuoja interaktyvius komponentus (salas) puslapyje.
3. Kliento pusės hidratavimas: Naršyklė atsisiunčia ir vykdo JavaScript kodą, reikalingą hidratuoti tik interaktyvius komponentus.
4. Interaktyvi patirtis: Interaktyvūs komponentai tampa visiškai funkcionalūs, o likusi puslapio dalis išlieka statiniu HTML.

Darbo pradžia su Fresh

Darbo pradžia su Fresh yra paprasta. Turėsite įdiegti Deno savo sistemoje. Galite įdiegti Deno vadovaudamiesi instrukcijomis oficialioje Deno svetainėje: https://deno.land/

Įdiegę Deno, galite sukurti naują Fresh projektą naudodami šią komandą:

            deno run -A npm:create-fresh@latest
            

              
                Copy
              
            
          

Ši komanda padės jums sukurti naują Fresh projektą. Būsite paraginti pasirinkti projekto pavadinimą ir pasirinkti šabloną. Fresh siūlo keletą šablonų, įskaitant pagrindinį šabloną, tinklaraščio šabloną ir elektroninės prekybos šabloną.

Sukūrę projektą, galite paleisti kūrimo serverį naudodami šią komandą:

            deno task start
            

              
                Copy
              
            
          

Tai paleis kūrimo serverį 8000 prievade. Tada galite pasiekti programą naršyklėje adresu http://localhost:8000.

Pavyzdys: Paprasto skaitiklio komponento kūrimas

Sukurkime paprastą skaitiklio komponentą, kad parodytume, kaip veikia Fresh. Sukurkite naują failą pavadinimu `routes/counter.tsx` su šiuo kodu:

            import { useState } from "preact/hooks";
import { Head } from "$fresh/runtime.ts";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Head>
        <title>Counter</title>
      </Head>
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    <>
  );
}

            

              
                Copy
              
            
          

Šis komponentas naudoja `useState` kabliuką iš Preact, kad valdytų skaitiklio būseną. Komponentas atvaizduoja pastraipą, kurioje rodomas dabartinis skaičius, ir mygtuką, kuris padidina skaičių, kai spustelėjamas. `Head` komponentas naudojamas puslapio pavadinimui nustatyti.

Dabar sukurkite naują failą pavadinimu `routes/index.tsx` su šiuo kodu:

            import Counter from "./counter.tsx";

export default function Home() {
  return (
    <>
      <h1>Welcome to Fresh!</h1>
      <Counter />
    <>
  );
}

            

              
                Copy
              
            
          

Šis komponentas atvaizduoja antraštę ir `Counter` komponentą. Kai pasiekiate programą naršyklėje, turėtumėte pamatyti antraštę ir skaitiklio komponentą. Spustelėjus mygtuką padidės skaičius, parodant komponento interaktyvumą.

Išplėstinės funkcijos ir koncepcijos

Fresh siūlo daugybę išplėstinių funkcijų ir koncepcijų, leidžiančių kurti sudėtingas ir rafinuotas žiniatinklio programas.

1. Tarpinė programinė įranga

Tarpinė programinė įranga leidžia jums perimti ir modifikuoti užklausas ir atsakymus. Tai gali būti naudinga atliekant tokias užduotis kaip autentifikavimas, autorizavimas, registravimas ir užklausų modifikavimas. Fresh siūlo paprastą ir lanksčią tarpinės programinės įrangos sistemą, leidžiančią apibrėžti tarpinės programinės įrangos funkcijas, kurios vykdomos prieš arba po maršruto tvarkyklių.

2. Įskiepiai

Įskiepiai leidžia jums išplėsti Fresh funkcionalumą pridedant naujų funkcijų, integracijų ir tinkinimų. Fresh siūlo įskiepių sistemą, leidžiančią jums kurti ir naudoti įskiepius, kad patobulintumėte savo programas.

3. Duomenų gavimas

Fresh siūlo keletą duomenų gavimo parinkčių, įskaitant duomenų gavimą iš API, duomenų bazių ir kitų duomenų šaltinių. Galite naudoti `fetch` API arba kitas bibliotekas, kad gautumėte duomenis ir atvaizduotumėte juos savo komponentuose.

4. Būsenos valdymas

Sudėtingesnėms programoms gali prireikti sudėtingesnio būsenos valdymo sprendimo. Fresh gerai integruojasi su populiariomis būsenos valdymo bibliotekomis, tokiomis kaip Redux ir Zustand.

Fresh vs. Kiti karkasai

Fresh nėra vienintelis žiniatinklio karkasas, siūlantis serverio pusės atvaizdavimą ir salų architektūrą. Kiti populiarūs karkasai, tokie kaip Next.js ir Remix, taip pat siūlo šias funkcijas. Tačiau Fresh išsiskiria tuo, kad daugiausia dėmesio skiria kliento pusės JavaScript mažinimui ir integracijai su Deno.

Next.js: Populiarus React pagrindu sukurtas karkasas, siūlantis serverio pusės atvaizdavimą, statinių svetainių generavimą ir turtingą įskiepių ir įrankių ekosistemą. Next.js yra geras pasirinkimas kuriant sudėtingas žiniatinklio programas, kurioms reikia didelio tinkinimo laipsnio.

Remix: Viso paketo žiniatinklio karkasas, kuriame daugiausia dėmesio skiriama žiniatinklio standartams ir užtikrinama sklandi kūrimo patirtis. Remix yra geras pasirinkimas kuriant žiniatinklio programas, kuriose pirmenybė teikiama našumui ir vartotojo patirčiai.

Astro: Statinių svetainių generatorius, naudojantis salų architektūrą. Astro puikiai tinka kurti turiniu turtingas svetaines, tokias kaip tinklaraščiai ar dokumentacijos svetainės.

Karkaso pasirinkimas priklauso nuo konkrečių jūsų projekto reikalavimų. Jei jums svarbiausia našumas, minimalus JavaScript ir Deno pagrindu sukurta aplinka, Fresh yra puikus pasirinkimas. Jei jums reikia brandesnės ekosistemos arba pageidaujate React, Next.js gali būti geresnis pasirinkimas. Remix siūlo puikų našumą ir daugiausia dėmesio skiria žiniatinklio standartams.

Fresh naudojimo atvejai

Fresh puikiai tinka įvairiems naudojimo atvejams, įskaitant:

• Elektroninės prekybos svetainės: Fresh našumo ir SEO pranašumai daro jį idealiu pasirinkimu kuriant elektroninės prekybos svetaines, kurios turi greitai įkelti ir užimti aukštą vietą paieškos rezultatuose.
• Tinklaraščiai ir turinio svetainės: Fresh serverio pusės atvaizdavimas ir salų architektūra leidžia lengvai kurti greitus ir SEO draugiškus tinklaraščius ir turinio svetaines.
• Žiniatinklio programos: Fresh TypeScript palaikymas, integruota maršrutizavimo sistema ir Deno integracija daro jį geru pasirinkimu kuriant sudėtingas žiniatinklio programas.
• Pristatymo puslapiai: Fresh puikiai tinka kurti didelio našumo pristatymo puslapius, orientuotus į konversiją.

Fresh ateitis

Fresh yra palyginti naujas karkasas, tačiau jis jau sulaukė didelio susidomėjimo žiniatinklio kūrimo bendruomenėje. Karkaso dėmesys našumui, SEO ir kūrėjo patirčiai daro jį perspektyviu pasirinkimu kuriant šiuolaikines žiniatinklio programas. Karkasui bręstant ir Deno ekosistemai toliau augant, Fresh greičiausiai taps dar populiaresniu pasirinkimu žiniatinklio kūrėjams.

Fresh komanda aktyviai dirba tobulindama karkasą ir pridėdama naujų funkcijų. Kai kurios iš planuojamų funkcijų apima:

• Patobulinti įrankiai: Fresh komanda dirba tobulindama kūrėjo įrankius, tokius kaip derintojas ir kodo redaktoriaus integracija.
• Daugiau įskiepių: Fresh komanda skatina bendruomenę kurti daugiau įskiepių, kad išplėstų karkaso funkcionalumą.
• Patobulinta dokumentacija: Fresh komanda dirba tobulindama dokumentaciją, kad kūrėjams būtų lengviau išmokti ir naudoti karkasą.

Išvada

Fresh yra perspektyvus žiniatinklio karkasas, siūlantis unikalų požiūrį į šiuolaikinių žiniatinklio programų kūrimą. Jo dėmesys serverio pusės atvaizdavimui, salų architektūrai ir minimaliam JavaScript užtikrina išskirtinai greitą našumą, pagerintą SEO ir geresnę vartotojo patirtį. Jei ieškote šiuolaikinio, našaus ir SEO draugiško žiniatinklio karkaso, Fresh tikrai verta apsvarstyti. Tai galingas įrankis kuriant greitas, efektyvias ir lengvai prižiūrimas svetaines ir programas. Augant Deno ekosistemai, Fresh yra pasirengęs tapti viena iš pirmaujančių jėgų žiniatinklio kūrime.

Praktinė įžvalga: Ištirkite Fresh dokumentaciją ir eksperimentuokite kurdami nedidelį projektą, kad iš pirmų lūpų suprastumėte karkaso koncepcijas ir pranašumus. Apsvarstykite galimybę naudoti Fresh kitam žiniatinklio kūrimo projektui, jei našumas ir SEO yra esminiai reikalavimai.