SvelteKit on viimeisin niistä, joita kutsuisin seuraavan sukupolven sovelluskehyksiksi. Se tietysti rakentaa sinulle sovelluksen tiedostopohjaisella reitityksellä, käyttöönotolla ja palvelinpuolen renderöinnillä, joita Next on tehnyt ikuisesti. Mutta SvelteKit tukee myös sisäkkäisiä asetteluja, palvelinmutaatioita, jotka synkronoivat sivusi tiedot, ja joitain muita hienouksia, joihin tulemme tutustumaan.

Tämän postauksen on tarkoitus olla korkeatasoinen johdanto, joka toivottavasti herättää jännitystä kaikille, jotka eivät ole koskaan käyttäneet SvelteKitiä. Siitä tulee rento kiertue. Jos pidät näkemästäsi, täydelliset asiakirjat ovat täällä.

Jollain tapaa tämä postaus on haastava kirjoittaa. SvelteKit on sovelluskehys. Se on olemassa auttamaan sinua rakentamaan… no, sovelluksia. Tämä vaikeuttaa demoa. Ei ole mahdollista rakentaa koko sovellusta blogikirjoitukseen. Joten sen sijaan käytämme hieman mielikuvitustamme. Rakennamme sovelluksen rungon, käytämme tyhjiä käyttöliittymän paikkamerkkejä ja kovakoodattuja staattisia tietoja. Tavoitteena ei ole rakentaa varsinaista sovellusta, vaan näyttää kuinka SvelteKitin liikkuvat osat toimivat, jotta voit rakentaa oman sovelluksesi.

Tätä tarkoitusta varten rakennamme esimerkkinä toimivan To-Do-sovelluksen. Mutta älä huoli, tämä on paljon, paljon enemmän SvelteKitin toiminnan näkemistä kuin uuden tehtäväsovelluksen luomista.

Koodi kaikkeen tässä viestissä on saatavilla GitHubista. Tämä projekti on myös otettu käyttöön Vercelissä live-demoa varten.

Projektin luominen

Uuden SvelteKit-projektin pyörittäminen on tarpeeksi yksinkertaista. Juosta npm create [email protected] your-app-name terminaalissa ja vastaa kysymyksiin. Muista valita "Skeleton Project", mutta muuten tee haluamasi valinnat TypeScriptille, ESLintille jne.

Kun projekti on luotu, suorita npm i ja npm run dev ja kehityspalvelimen pitäisi alkaa toimia. Sytyttää localhost:5173 selaimessa ja saat luurankosovelluksen paikkamerkkisivun.

Perusreititys

Ilmoitus routes kansio alla src. Se sisältää koodin kaikille reiteillemme. Siellä on jo a +page.svelte tiedosto, joka sisältää sisällön juurille / reitti. Olitpa missä tahansa tiedostohierarkiassa, polun varsinaisella sivulla on aina nimi +page.svelte. Tätä silmällä pitäen luodaan sivuja varten /list, /details, /admin/user-settings ja admin/paid-statusja lisää myös tekstipaikkamerkit jokaiselle sivulle.

Tiedostoasettelusi pitäisi näyttää suunnilleen tältä:

Sinun pitäisi pystyä liikkumaan muuttamalla URL-polkuja selaimen osoitepalkissa.

kaavoista

Haluamme navigointilinkkejä sovellukseemme, mutta emme todellakaan halua kopioida niiden merkintöjä jokaiselle luomamme sivulle. Luodaan siis a +layout.svelte tiedosto meidän juureen routes kansio, jota SvelteKit käsittelee yleisenä mallina kaikille sivuille. Lisätäänpä siihen vähän sisältöä:

<nav> <ul> <li> <a href="/fi/">Home</a> </li> <li> <a href="/fi/list">To-Do list</a> </li> <li> <a href="/fi/admin/paid-status">Account status</a> </li> <li> <a href="/fi/admin/user-settings">User settings</a> </li> </ul>
</nav> <slot /> <style> nav { background-color: beige; } nav ul { display: flex; } li { list-style: none; margin: 15px; } a { text-decoration: none; color: black; }
</style>

Jotain alkeellista navigointia perustyyleillä. Erityisen tärkeä on <slot /> tag. Tämä on emme paikka, jota käytät verkkokomponenttien ja varjo-DOM:n kanssa, vaan Svelte-ominaisuus, joka osoittaa, mihin sisältömme tulee sijoittaa. Kun sivu renderöidään, sivun sisältö liukuu sisään paikkaan, jossa paikka on.

Ja nyt meillä on navigointia! Emme voita suunnittelukilpailuja, mutta emme yritäkään.

Sisäkkäiset asettelut

Entä jos haluaisimme kaikkien järjestelmänvalvojasivujemme perivän juuri luomamme normaalin asettelun, mutta myös yhteisiä asioita kaikille järjestelmänvalvojasivuille (mutta vain järjestelmänvalvojasivuille)? Ei hätää, lisäämme toisen +layout.svelte tiedosto juurissamme admin hakemistoon, jonka kaikki sen alla oleva perii. Tehdään niin ja lisätään tämä sisältö:

<div>This is an admin page</div> <slot /> <style> div { padding: 15px; margin: 10px 0; background-color: red; color: white; }
</style>

Lisäämme punaisen bannerin, joka osoittaa, että tämä on järjestelmänvalvojasivu, ja sitten, kuten ennen, a <slot /> osoittavat, minne haluamme sivumme sisällön menevän.

Juuriasettelumme ennen renderöintiä. Juuriasettelun sisällä on a <slot /> tag. Sisäkkäisen asettelun sisältö menee juuriasetteluun <slot />. Ja lopuksi sisäkkäinen asettelu määrittelee oman <slot />, johon sivun sisältö muuttuu.

Jos siirryt järjestelmänvalvojan sivuille, sinun pitäisi nähdä uusi punainen banneri:

Tietojemme määrittely

OK, renderöidään jotain todellista dataa – tai ainakin katsotaan kuinka voimme hahmontaa todellisia tietoja. Tietokannan luomiseen ja siihen yhdistämiseen on sata tapaa. Tämä viesti koskee kuitenkin SvelteKitiä, ei DynamoDB:n hallintaa, joten "lataamme" sen sijaan staattista dataa. Käytämme kuitenkin kaikkia samoja koneita sen lukemiseen ja päivittämiseen, joita käyttäisit oikeille tiedoille. Jos haluat oikean verkkosovelluksen, vaihda staattista tietoa palauttavat toiminnot funktioilla, jotka muodostavat yhteyden ja tekevät kyselyjä mihin tahansa tietokantaan, jota käytät.

Luodaan sisään likainen moduuli lib/data/todoData.ts joka palauttaa joitain staattisia tietoja sekä keinotekoisia viiveitä todellisten kyselyjen simuloimiseksi. Näet tämän lib kansio tuotu muualle kautta $lib. Tämä on SvelteKit-ominaisuus kyseiselle kansiolle, ja voit jopa lisää omat aliaksesi.

let todos = [ { id: 1, title: "Write SvelteKit intro blog post", assigned: "Adam", tags: [1] }, { id: 2, title: "Write SvelteKit advanced data loading blog post", assigned: "Adam", tags: [1] }, { id: 3, title: "Prepare RenderATL talk", assigned: "Adam", tags: [2] }, { id: 4, title: "Fix all SvelteKit bugs", assigned: "Rich", tags: [3] }, { id: 5, title: "Edit Adam's blog posts", assigned: "Geoff", tags: [4] },
]; let tags = [ { id: 1, name: "SvelteKit Content", color: "ded" }, { id: 2, name: "Conferences", color: "purple" }, { id: 3, name: "SvelteKit Development", color: "pink" }, { id: 4, name: "CSS-Tricks Admin", color: "blue" },
]; export const wait = async amount => new Promise(res => setTimeout(res, amount ?? 100)); export async function getTodos() { await wait(); return todos;
} export async function getTags() { await wait(); return tags.reduce((lookup, tag) => { lookup[tag.id] = tag; return lookup; }, {});
} export async function getTodo(id) { return todos.find(t => t.id == id);
}

Toiminto, joka palauttaa tasaisen joukon tehtäviä, haku tunnisteistamme ja toiminto yksittäisen tehtävän hakemiseksi (käytämme viimeistä Tiedot-sivullamme).

Ladataan tietojamme

Miten saamme nämä tiedot Svelte-sivuillemme? On olemassa useita tapoja, mutta nyt luodaan a +page.server.js tiedosto meidän list kansio ja laita siihen tämä sisältö:

import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); const tags = getTags(); return { todos, tags, };
}

Olemme määritellyt a load() toiminto, joka hakee sivulle tarvittavat tiedot. Huomaa, että olemme emme await- soittaa meille getTodos ja getTags asynkronointitoiminnot. Tämä loisi tietojen latausvesiputouksen, kun odotamme, että tehtävämme saapuvat ennen tunnisteiden lataamista. Sen sijaan palautamme raakalupaukset load, ja SvelteKit tekee tarvittavan työn await niitä.

Joten miten pääsemme käyttämään näitä tietoja sivukomponenttimme kautta? SvelteKit tarjoaa a data tuki komponentillemme datan kanssa. Pääsemme tehtäviisiimme ja tunnisteisiin siitä käyttämällä a reaktiivinen tehtävä.

Luettelosivumme komponentti näyttää nyt tältä.

<script> export let data; $: ({ todo, tags } = data);
</script> <table cellspacing="10" cellpadding="10"> <thead> <tr> <th>Task</th> <th>Tags</th> <th>Assigned</th> </tr> </thead> <tbody> {#each todos as t} <tr> <td>{t.title}</td> <td>{t.tags.map((id) => tags[id].name).join(', ')}</td> <td>{t.assigned}</td> </tr> {/each} </tbody>
</table> <style> th { text-align: left; }
</style>

Ja tämän pitäisi tehdä meidän tehtävästämme!

Asetteluryhmät

Ennen kuin siirrymme Tiedot-sivulle ja muokkaamme tietoja, katsotaanpa todella siistiä SvelteKit-ominaisuutta: asetteluryhmät. Olemme jo nähneet sisäkkäisiä asetteluja kaikille järjestelmänvalvojan sivuille, mutta entä jos haluaisimme jakaa asettelun mielivaltaisten sivujen välillä samalla tiedostojärjestelmällämme? Entä jos haluaisimme jakaa asettelun vain Luettelo- ja Tiedot-sivumme välillä? Meillä on jo globaali asettelu tällä tasolla. Sen sijaan voimme luoda uuden hakemiston, mutta nimellä, joka on suluissa, kuten tämä:

Meillä on nyt asetteluryhmä, joka kattaa Luettelo- ja Tiedot-sivumme. Nimesin sen (todo-management) mutta voit nimetä sen miksi haluat. Selvyyden vuoksi tämä nimi tulee olemaan emme vaikuttavat asetteluryhmän sisällä olevien sivujen URL-osoitteisiin. URL-osoitteet pysyvät samoina; asetteluryhmien avulla voit lisätä sivuille jaettuja asetteluja ilman, että ne kaikki käsittävät koko hakemiston routes.

We voisi lisää +layout.svelte tiedosto ja jotain typerää <div> banneri, jossa lukee "Hei, hoidamme tehtäviä". Mutta tehdään jotain mielenkiintoisempaa. Layouts voi määritellä load() toimintoja tarjotakseen tietoja kaikista niiden alla olevista reiteistä. Käytetään tätä toimintoa tunnisteiden lataamiseen – koska käytämme tunnisteitamme details -sivun lisäksi list sivu meillä on jo.

Todellisuudessa asetteluryhmän pakottaminen antamaan vain yksittäinen tieto ei ole läheskään varmasti sen arvoista. on parempi kopioida tiedot load() toiminto jokaiselle sivulle. Mutta tätä viestiä varten se tarjoaa tekosyyn, jonka tarvitsemme nähdäksemme uuden SvelteKit-ominaisuuden!

Ensin mennään omaan list sivun +page.server.js tiedosto ja poista tunnisteet siitä.

import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); return { todos, };
}

Luettelosivumme pitäisi nyt tuottaa virhe, koska sitä ei ole tags esine. Korjataan tämä lisäämällä a +layout.server.js tiedosto asetteluryhmässämme ja määritä sitten a load() toiminto, joka lataa tunnisteemme.

import { getTags } from "$lib/data/todoData"; export function load() { const tags = getTags(); return { tags, };
}

Ja juuri näin, listasivumme renderöidään taas!

Lataamme tietoja useista paikoista

Laitetaanpa hieno pointti siihen, mitä täällä tapahtuu:

• Määrittelimme a load() toiminto asetteluryhmällemme, jonka laitoimme +layout.server.js.
• Tämä tarjoaa tietoja kaikki sivuista, joita asettelu palvelee – mikä tässä tapauksessa tarkoittaa Luettelo- ja Tiedot-sivujamme.
• Luettelosivumme määrittelee myös a load() siihen kuuluva toiminto +page.server.js tiedosto.
• SvelteKit ottaa näiden tietolähteiden tulokset, yhdistää ne yhteen ja asettaa molemmat saataville data.

Tietosivumme

Käytämme Tiedot-sivuamme tehtäväkohteen muokkaamiseen. Lisätään ensin sarake Luettelo-sivumme taulukkoon, joka linkittää Tiedot-sivulle ja jonka tehtävän tunnus on kyselymerkkijonossa.

<td><a href="/fi/details?id={t.id}">Edit</a></td>

Rakennetaan nyt Tiedot-sivumme. Ensin lisäämme lataajan nappaamaan muokkaamamme tehtävät. Luo +page.server.js in /details, tällä sisällöllä:

import { getTodo, updateTodo, wait } from "$lib/data/todoData"; export function load({ url }) { const id = url.searchParams.get("id"); console.log(id); const todo = getTodo(id); return { todo, };
}

Kuormaimemme mukana tulee a url ominaisuus, josta voimme vetää kyselymerkkijonoarvoja. Tämä helpottaa muokkaamamme tehtäväkohteen etsimistä. Tehdään tämä tehtävä ja sen muokkaustoiminnot.

SvelteKitissä on upeita sisäänrakennettuja mutaatiokykyjä, kunhan käytät lomakkeita. Muistatko lomakkeet? Tässä on Tietosivumme. Olen karsinut tyylit lyhyyden vuoksi.

<script> import { enhance } from "$app/forms"; export let data; $: ({ todo, tags } = data); $: currentTags = todo.tags.map(id => tags[id]);
</script> <form use:enhance method="post" action="?/editTodo"> <input name="id" type="hidden" value="{todo.id}" /> <input name="title" value="{todo.title}" /> <div> {#each currentTags as tag} <span style="{`color:" ${tag.color};`}>{tag.name}</span> {/each} </div> <button>Save</button>
</form>

Nappaamme tunnisteet kuten ennenkin asetteluryhmämme latausohjelmasta ja tehtävät sivumme latausohjelmasta. Tartumme todellisuuteen tag objektit tehtäväluettelon tunnistetunnusten luettelosta ja renderöi sitten kaikki. Luomme lomakkeen, jossa on piilotettu syöte tunnukselle ja todellinen syöte otsikolle. Näytämme tunnisteet ja tarjoamme sitten painikkeen lomakkeen lähettämistä varten.

Jos huomasit use:enhance, joka yksinkertaisesti käskee SvelteKitin käyttämään progressiivista parannusta ja Ajaxia lähettämään lomakkeemme. Käytät sitä todennäköisesti aina.

Kuinka tallennamme muokkaukset?

Ilmoitus action="?/editTodo" attribuutti itse lomakkeessa? Tämä kertoo meille, minne haluamme lähettää muokatut tietomme. Meidän tapauksessamme haluamme esittää an editTodo "toiminta."

Luodaan se lisäämällä seuraavat +page.server.js tiedosto, joka meillä on jo yksityiskohtia varten (jossa on tällä hetkellä load() toiminto, tarttuaksesi tehtäväämme):

import { redirect } from "@sveltejs/kit"; // ... export const actions = { async editTodo({ request }) { const formData = await request.formData(); const id = formData.get("id"); const newTitle = formData.get("title"); await wait(250); updateTodo(id, newTitle); throw redirect(303, "/list"); },
};

Lomaketoiminnot antavat meille a request esine, joka tarjoaa pääsyn meidän formData, jolla on get menetelmä erilaisille lomakekentillemme. Lisäsimme piilotetun syötteen tunnuksen arvoa varten, jotta voisimme napata sen täältä etsiäksemme muokkaamamme tehtävän. Simuloimme viivettä, soitamme uudelle updateTodo() -menetelmää, ohjaa sitten käyttäjä takaisin osoitteeseen /list sivu. updateTodo() menetelmä vain päivittää staattisia tietojamme; tosielämässä suoritat jonkinlaisen päivityksen missä tahansa käyttämäsi tietovarastoon.

export async function updateTodo(id, newTitle) { const todo = todos.find(t => t.id == id); Object.assign(todo, { title: newTitle });
}

Kokeillaan sitä. Siirrymme ensin luettelosivulle:

Napsauta nyt jonkin tehtävän Muokkaa-painiketta avataksesi muokkaussivun /details.

Lisäämme uuden otsikon:

Napsauta nyt Tallenna. Sen pitäisi saada meidät takaisin omaan /list sivulle, jossa uusi tehtävänimike on käytössä.

Miten uusi otsikko ilmestyi näin? Se oli automaattinen. Kun olemme ohjanneet osoitteeseen /list -sivulla SvelteKit suoritti kaikki kuormaimemme automaattisesti uudelleen, kuten se olisi tehnyt siitä huolimatta. Tämä on tärkein edistysaskel, jonka seuraavan sukupolven sovelluskehykset, kuten SvelteKit, Remixja Seuraava 13 tarjota. Sen sijaan, että ne tarjoaisivat sinulle kätevän tavan renderöidä sivuja ja toivottaisivat sinulle onnea tietojen päivittämiseen mahdollisesti tarvittavien päätepisteiden hakemiseen, ne integroivat datan mutaation tietojen lataamisen rinnalle, jolloin nämä kaksi voivat toimia rinnakkain.

Muutama asia, jota saatat ihmetellä…

Tämä mutaatiopäivitys ei vaikuta kovin vaikuttavalta. Kuormaajat toimivat uudelleen aina kun navigoit. Entä jos emme olisi lisänneet uudelleenohjausta lomaketoimintoomme, vaan pysyisimme nykyisellä sivulla? SvelteKit suorittaisi päivityksen lomaketoiminnolla, kuten ennenkin, mutta tekisi yhä suorita uudelleen kaikki nykyisen sivun latauslaitteet, mukaan lukien sivun asettelun lataajat.

Voisiko meillä olla kohdistetumpia keinoja tietojemme mitätöimiseksi? Esimerkiksi tunnisteitamme ei muokattu, joten todellisessa elämässä emme haluaisi kysyä niitä uudelleen. Kyllä, näytin sinulle vain SvelteKitin oletusmuotoista toimintaa. Voit poistaa oletuskäytön käytöstä valitsemalla soittamalla takaisin use:enhance. Sitten SvelteKit tarjoaa käyttöoppaan mitätöintitoiminnot.

Tietojen lataaminen jokaiseen navigointiin on mahdollisesti kallista ja tarpeetonta. Voinko tallentaa nämä tiedot välimuistiin kuten teen työkaluilla, kuten react-query? Kyllä, vain toisin. SvelteKit antaa sinun asettaa (ja sitten kunnioittaa) webin jo tarjoamia välimuistin ohjausotsikoita. Ja käsittelen välimuistin mitätöintimekanismeja jatkoviestissä.

Kaikki, mitä olemme tehneet tämän artikkelin aikana, käyttää staattista dataa ja muokkaa muistissa olevia arvoja. Jos sinun on palautettava kaikki ja aloitettava alusta, lopeta ja käynnistä se uudelleen npm run dev Solmuprosessi.

Käärimistä

Olemme tuskin raapuneet SvelteKitin pintaa, mutta toivottavasti olet nähnyt tarpeeksi innostuaksesi siitä. En muista, milloin viimeksi olisin pitänyt verkkokehityksestä näin hauskaa. Kun asiat, kuten niputtaminen, reititys, SSR ja käyttöönotto, hoidetaan heti valmiina, saan viettää enemmän aikaa koodaamiseen kuin konfigurointiin.

Tässä on muutamia lisäresursseja, joita voit käyttää SvelteKitin oppimisen seuraavissa vaiheissa:

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
• Lähde: https://css-tricks.com/getting-started-with-sveltekit/