Fresh: Süvenemine Deno serveripoolselt renderdatud veebiraamistikku

Veebiarenduse pidevalt arenevas maastikus tekivad pidevalt uued raamistikud ja tööriistad, millest igaüks lubab lahendada konkreetseid probleeme ja parandada arendajakogemust. Üks selline märkimisväärset tähelepanu pälvinud raamistik on Fresh, järgmise põlvkonna veebiraamistik, mis on ehitatud Deno peale. Fresh eristub keskendumisega serveripoolsele renderdamisele (SSR), saare-arhitektuurile ja unikaalsele lähenemisele, mis vähendab kliendipoolse JavaScripti vajadust, tulemuseks erakordselt kiire jõudlus ja paranenud SEO.

Mis on Fresh?

Fresh on täis-stack veebiraamistik, mis on loodud kaasaegsete, dünaamiliste veebisaitide ja veebirakenduste loomiseks. See kasutab Deno, turvalise JavaScripti ja TypeScripti käituskeskkonna jõudu ja lihtsust. Freshi peamised omadused on:

• Serveripoolne renderdamine (SSR): Fresh renderdab komponendid serveris, saates kliendile täielikult renderdatud HTML-i. See parandab oluliselt esialgseid lehevaate aegu ja SEO-d, kuna otsingumootorid saavad sisu hõlpsalt indekseerida.
• Saare-arhitektuur: Fresh kasutab saare-arhitektuuri, kus ainult interaktiivsed komponendid lehel täiendatakse kliendipoolse JavaScriptiga. See vähendab brauseri poolt allalaaditava ja käivitatava JavaScripti hulka, mille tulemuseks on kiirem jõudlus ja parem kasutajakogemus.
• Vaikimisi null käitusaja JS: Erinevalt paljudest teistest raamistikest, mis nõuavad suure hulga JavaScripti kliendile saatmist, püüab Fresh vähendada kliendipoolset JavaScripti. Enamik rakenduste loogikast töötab serveris ja kliendile saadetakse ainult vajalik JavaScript interaktiivsuse haldamiseks.
• Sisseehitatud marsruutimise süsteem: Fresh pakub failisüsteemipõhist marsruutimise süsteemi, mis teeb marsruutide määratlemise ja erinevate päringute käsitlemise lihtsaks.
• TypeScripti tugi: Fresh on ehitatud TypeScriptiga, pakkudes tüübiga turvalisust ja paremat arendajate tootlikkust.
• Deno integratsioon: Deno-põhise raamistikuna saab Fresh kasu Deno turvafunktsioonidest, sõltuvuste haldamisest ja üldisest jõudlusest.

Miks valida Fresh?

Fresh pakub mitmeid veenvaid eeliseid võrreldes traditsiooniliste veebiraamistikega:

1. Jõudlus

Jõudlus on kaasaegses veebiarenduses kriitilise tähtsusega tegur. Aeglaselt laadivad veebisaidid võivad põhjustada kasutajate pettumust, kõrgemat tagasilöögimäära ja madalamat otsingumootori positsiooni. Freshi SSR ja saare-arhitektuur parandavad oluliselt veebisaidi jõudlust, vähendades brauseri poolt allalaaditava ja käivitatava JavaScripti hulka. Selle tulemuseks on kiirem algne lehevaade aeg ja reageerivam kasutajakogemus.

Näide: Kujutage ette e-kaubanduse veebisaiti, mis kuvab toodete loendeid. Traditsioonilise kliendipoolse renderdamisega peaks brauser alla laadima ja käivitama suure JavaScripti paketi, et toodete loendeid renderdada. Freshiga renderdab server toodete loendid ja saadab HTML-i kliendile, mille tulemuseks on palju kiirem algne laadimisaeg. Ainult interaktiivsed elemendid, nagu nupp "Lisa ostukorvi", nõuaksid kliendipoolset JavaScripti.

2. SEO Optimeerimine

Otsingumootori optimeerimine (SEO) on orgaanilise liikluse suunamiseks veebisaidile hädavajalik. Otsingumootorid tuginevad sisulehe indekseerimiseks robotitele. Kliendipoolselt renderdatud veebisaite võib olla otsingumootori robotitele raske indekseerida, kuna need nõuavad sisu renderdamiseks JavaScripti käivitamist. Freshi SSR tagab, et otsingumootorid saavad sisu hõlpsalt indekseerida, mis viib otsingumootorite paremate positsioonideni.

Näide: Freshiga ehitatud uudiste veebisait renderdab oma artiklid serveris, muutes need otsingumootori robotitele hõlpsasti kättesaadavaks. See võimaldab veebisaidil kõrgemalt positsioneerida otsingutulemustes vastavate märksõnade osas, suunates saidile rohkem orgaanilist liiklust.

3. Parem kasutajakogemus

Kiire ja reageeriv veebisait pakub paremat kasutajakogemust. Freshi keskendumine jõudlusele ja minimaalsele JavaScriptile tagab kasutajatele sujuvama ja nauditavama sirvimiskogemuse. See võib suurendada kaasatust, vähendada tagasilöögimäära ja suurendada konversioonimäära.

Näide: Freshiga ehitatud veebipõhine õppeplatvorm pakub õpilastele sujuvat ja reageerivat õppimiskogemust. Õpilased saavad kiiresti juurde materjalidele, osaleda aruteludes ja täita ülesandeid, ilma et nad kogeksid pettumust tekitavaid viivitusi või jõudlusprobleeme.

4. Lihtsustatud arendus

Fresh lihtsustab veebiarendust, pakkudes ühtset ja intuitiivset arenduskogemust. Raamistiku sisseehitatud marsruutimise süsteem, TypeScripti tugi ja Deno integratsioon muudavad keerukate veebirakenduste loomise ja hooldamise lihtsaks.

Näide: Arendaja, kes ehitab Freshiga suhtlusvõrgustiku rakendust, saab hõlpsasti määratleda marsruudid erinevatele lehtedele, nagu kasutajaprofiilid, ajajooned ja seaded. TypeScripti tüübiga turvalisus aitab vältida vigu ja parandab koodi hooldatavust. Deno turvafunktsioonid tagavad, et rakendus on turvaline ja kaitstud haavatavuste eest.

5. Deno Ökosüsteem

Fresh on ehitatud Deno peale, mis pakub Node.js ees mitmeid eeliseid, sealhulgas paremat turvalisust, sisseehitatud TypeScripti tuge ja kaasaegsemat sõltuvuste haldamise süsteemi. Deno detsentraliseeritud moodulisüsteem välistab vajaduse keskkondade nagu npm järele, vähendades tarneahela rünnakute riski.

Näide: Deno kasutades saab Fresh otse URL-idelt ES-mooduleid kasutada, propageerides muutumatust ja vältides sõltuvuste segaduse rünnakuid. See parandab turvalisust võrreldes traditsiooniliste Node.js rakendustega, mis tuginevad npm-pakettidele.

Kuidas Fresh töötab: Saare-arhitektuur üksikasjalikult

Saare-arhitektuur on Freshi jõudluseliste eeliste taga olev võtmekontseptsioon. Kogu lehe täiendamise asemel JavaScriptiga täiendatakse ainult spetsiifilisi interaktiivseid komponente, mida nimetatakse "saarteks". Ülejäänud leht jääb staatiliseks HTML-iks. See valikuline täiendamine vähendab allalaaditava ja käivitatava JavaScripti hulka, mis viib kiiremate lehevaadete ja parema jõudluse saavutamiseni.

Näide: Kujutage ette ajaveebiartiklit kommentaaride sektsiooniga. Ajaveebiartikkel ise on staatiline sisu ega vaja kliendipoolset JavaScripti. Kommentaaride sektsioon aga on interaktiivne ja vajab kasutaja sisestuste haldamiseks, kommentaaride kuvamiseks ja uute kommentaaride esitamiseks JavaScripti. Freshis renderdatakse ajaveebiartikkel serveris ja saadetakse kliendile staatilise HTML-ina. Ainult kommentaaride sektsioon täiendatakse JavaScriptiga, muutes selle lehel interaktiivsuse "saareks".

Protsessi saab kokku võtta järgmiselt:

1. Serveripoolne renderdamine: Server renderdab kogu lehe, sealhulgas nii staatilise sisu kui ka interaktiivsed komponendid.
2. Osade kaupa täiendamine: Fresh tuvastab interaktiivsed komponendid (saared) lehel.
3. Kliendipoolne täiendamine: Brauser laadib alla ja käivitab JavaScripti koodi, mida on vaja ainult interaktiivsete komponentide täiendamiseks.
4. Interaktiivne kogemus: Interaktiivsed komponendid muutuvad täielikult funktsionaalseks, samas kui ülejäänud leht jääb staatiliseks HTML-iks.

Alustamine Freshiga

Freshiga alustamine on lihtne. Peate oma süsteemis olema installitud Deno. Deno saate installida, järgides juhiseid ametlikul Deno veebisaidil: https://deno.land/

Kui teil on Deno installitud, saate luua uue Fresh projekti järgmise käsuga:

            deno run -A npm:create-fresh@latest
            

              
                Copy
              
            
          

See käsk juhendab teid uue Fresh projekti loomise protsessis. Teilt küsitakse projekti nime ja malli valimist. Fresh pakub mitmeid malle, sealhulgas põhilist malli, ajaveebi malli ja e-kaubanduse malli.

Pärast projekti loomist saate arendusserveri käivitada järgmise käsuga:

            deno task start
            

              
                Copy
              
            
          

See käivitab arendusserveri pordil 8000. Seejärel saate rakendusele brauseris juurde pääseda aadressil http://localhost:8000.

Näide: Lihtsa loenduri komponendi loomine

Loome lihtsa loenduri komponendi, et illustreerida, kuidas Fresh töötab. Looge uus fail nimega routes/counter.tsx järgmise koodiga:

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

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

  return (
    <>
      <Head>
        <title>Loendur</title>
      </Head>
      <div>
        <p>Loend: {count}</p>
        <button onClick={() => setCount(count + 1)}>Suurenda</button>
      </div>
    <>
  );
}

            

              
                Copy
              
            
          

See komponent kasutab loenduri oleku haldamiseks Preacti `useState` hooki. Komponent renderdab lõigu, mis kuvab praeguse loenduri, ja nupu, mis seda suurendab, kui sellele klõpsatakse. `Head` komponenti kasutatakse lehe pealkirja määramiseks.

Nüüd looge uus fail nimega routes/index.tsx järgmise koodiga:

            import Counter from "./counter.tsx";

export default function Home() {
  return (
    <>
      <h1>Tere tulemast Freshi!</h1>
      <Counter />
    <>
  );
}

            

              
                Copy
              
            
          

See komponent renderdab pealkirja ja `Counter` komponendi. Kui pääsete rakendusele brauseris juurde, peaksite nägema pealkirja ja loenduri komponenti. Nupu klõpsamine suurendab loendurit, demonstreerides komponendi interaktiivsust.

Täiustatud funktsioonid ja kontseptsioonid

Fresh pakub mitmeid täiustatud funktsioone ja kontseptsioone, mis võimaldavad teil luua keerukaid ja peeni veebirakendusi.

1. Middleware

Middleware võimaldab teil päringuid ja vastuseid vahele võtta ja muuta. See võib olla kasulik selliste ülesannete jaoks nagu autentimine, autoriseerimine, logimine ja päringute muutmine. Fresh pakub lihtsat ja paindlikku middleware süsteemi, mis võimaldab teil määratleda middleware funktsioone, mis täidetakse enne või pärast marsruudihaldureid.

2. Pluginid

Pluginid võimaldavad teil Freshi funktsionaalsust laiendada, lisades uusi funktsioone, integratsioone ja kohandusi. Fresh pakub pluginasüsteemi, mis võimaldab teil oma rakenduste täiustamiseks luua ja kasutada pluginaid.

3. Andmete hankimine

Fresh pakub mitmeid andmete hankimise võimalusi, sealhulgas andmete hankimist API-dest, andmebaasidest ja muudest andmeallikatest. Andmete hankimiseks ja nende renderdamiseks oma komponentides saate kasutada `fetch` API-i või muid teeke.

4. Oleku haldamine

Keerukamate rakenduste jaoks võite vajada keerukamat oleku haldamise lahendust. Fresh integreerub hästi populaarsete oleku haldamise teekidega, nagu Redux ja Zustand.

Fresh vs. Muud raamistikud

Fresh ei ole ainus veebiraamistik, mis pakub serveripoolset renderdamist ja saare-arhitektuuri. Teised populaarsed raamistikud, nagu Next.js ja Remix, pakuvad samuti neid funktsioone. Fresh eristub aga keskendumisega kliendipoolse JavaScripti minimeerimisele ja Deno integratsioonile.

Next.js: Populaarne React-põhine raamistik, mis pakub serveripoolset renderdamist, staatiliste saitide genereerimist ja rikkalikku pluginate ja tööriistade ökosüsteemi. Next.js on hea valik keerukate veebirakenduste loomiseks, mis nõuavad suurt kohandamisastet.

Remix: Täis-stack veebiraamistik, mis keskendub veebistandarditele ja pakub sujuvat arenduskogemust. Remix on hea valik veebirakenduste loomiseks, mis eelistavad jõudlust ja kasutajakogemust.

Astro: Staatiline saidigeneraator, mis kasutab saare-arhitektuuri. Astro on suurepärane sisupõhiste veebisaitide, nagu ajaveebid või dokumentatsioonisaidid, loomiseks.

Raamistiku valik sõltub teie projekti konkreetsetest nõudmistest. Kui te eelistate jõudlust, minimaalset JavaScripti ja Deno-põhist keskkonda, on Fresh suurepärane valik. Kui vajate küpsemat ökosüsteemi või eelistate Reacti, võib Next.js olla parem valik. Remix pakub suurepärast jõudlust ja keskendumist veebistandarditele.

Kasutusjuhud Freshile

Fresh sobib hästi mitmesugusteks kasutusjuhtudeks, sealhulgas:

• E-kaubanduse veebisaidid: Freshi jõudlus ja SEO eelised muudavad selle ideaalseks valikuks e-kaubanduse veebisaitide loomiseks, mis peavad kiiresti laadima ja otsingutulemustes kõrgel kohal olema.
• Ajaveebid ja sisulehed: Freshi serveripoolne renderdamine ja saare-arhitektuur muudavad kiirete ja SEO-sõbralike ajaveebide ja sisulehtede loomise lihtsaks.
• Veebirakendused: Freshi TypeScripti tugi, sisseehitatud marsruutimise süsteem ja Deno integratsioon muudavad selle hea valiku keerukate veebirakenduste loomiseks.
• Maandumislehed: Fresh on suurepärane konversioonile keskendunud kõrge jõudlusega maandumislehtede loomiseks.

Freshi tulevik

Fresh on suhteliselt uus raamistik, kuid see on juba kogunud märkimisväärset tähelepanu veebiarenduse kogukonnas. Raamistiku keskendumine jõudlusele, SEO-le ja arendajakogemusele teeb sellest paljulubava valiku kaasaegsete veebirakenduste loomiseks. Raamistiku küpsemisel ja Deno ökosüsteemi jätkuval kasvul saab Freshist tõenäoliselt veelgi populaarsem valik veebiarendajate jaoks.

Freshi meeskond töötab aktiivselt raamistiku täiustamise ja uute funktsioonide lisamise kallal. Mõned plaanitud funktsioonid hõlmavad:

• Parem tööriistastik: Freshi meeskond töötab arendaja tööriistastiku, näiteks siluri ja koodiredaktori integratsiooni parandamise kallal.
• Rohkem pluginaid: Freshi meeskond julgustab kogukonda looma rohkem pluginaid raamistiku funktsionaalsuse laiendamiseks.
• Parem dokumentatsioon: Freshi meeskond töötab dokumentatsiooni parandamise kallal, et arendajatel oleks lihtsam raamistikku õppida ja kasutada.

Järeldus

Fresh on paljulubav veebiraamistik, mis pakub ainulaadset lähenemist kaasaegsete veebirakenduste loomisele. Selle keskendumine serveripoolsele renderdamisele, saare-arhitektuurile ja minimaalsele JavaScriptile tagab erakordselt kiire jõudluse, paranenud SEO ja parema kasutajakogemuse. Kui otsite kaasaegset, jõudlust ja SEO-sõbralikku veebiraamistikku, tasub Fresh kindlasti kaaluda. See on võimas tööriist kiirete, tõhusate ja hõlpsalt hooldatavate veebisaitide ja rakenduste loomiseks. Kui Deno ökosüsteem kasvab, on Fresh valmis saama veebiarenduse juhtivaks jõuks.

Tegevuslik ülevaade: Tutvu Freshi dokumentatsiooniga ja katseta väikese projektiga, et mõista raamistiku kontseptsioone ja eeliseid esmalt. Kaaluge Freshi kasutamist oma järgmises veebiarendusprojektis, kui jõudlus ja SEO on kriitilise tähtsusega nõuded.