Bouw een snelle reactieve blog met Svelte en Sapper

Sapper is een raamwerk dat op Svelte is gebouwd. Het richt zich op de snelheid uit de doos met serverweergave, koppelingspreloading en het vermogen om servicemedewerkers te creëren. Gecombineerd met Svelte, is het eindresultaat een zeer aanpasbare, bliksemsnelle site met een kleine voetafdruk.

In deze tutorial zullen we Sapper gebruiken om een ​​lichtgewicht blogsite te bouwen met Svalte-componenten (zie onze Hoe een blog starten Post voor wat minder technische tips op bloggen). Svelte is een raamwerk met een verschil. Het analyseert de code op compileertijd en creëert een set modules in vanille javascript, die de noodzaak voor een runtime vermijdt. Als je verdere hulp nodig hebt met lay-outs, bekijk dan onze post over hoe je het perfecte krijgt Website-indeling ​Of zie deze bovenaan voor andere opties Website-bouwers en onthoud, je moet ook je halen web hosting Service op punt.

Download de tutorial-bestanden op Filesilo hier

01. Installeer afhankelijkheden

Ten eerste moeten we afhankelijkheden downloaden en installeren. Het is afhankelijk van Svelte om te werken en vereist een ander raamwerk om de server te bouwen, maar de rest is afhankelijk van de toepassing die wordt gebouwd. In dit geval hebben we een paar pakketten nodig om later op te pakken.

Download de tutorial-bestanden (hierboven), zoek ze op de opdrachtregel en installeer de afhankelijkheden.

> npm install

02. Bouw de server uit

Sapper wordt gebouwd in twee delen - het raamwerk van de klant en de server-zijweergave van dat raamwerk. Dit helpt die extra snelheidsboost voor die op langzamere netwerken. Het is gebouwd met behulp van knooppunt, waarmee de Sapper Middleware al het zware tillen voor ons kan doen.

Open Server.js en maak de server met Express. Met behulp van hun aanbevelingen omvatten we compressie om de bestanden te verkleinen die we sturen en sirv om statische bestanden te dienen.

 Express ()
  .gebruik(
    Compressie ({drempel: 0}),
    SIRV ("Static", {dev}),
    sapper.middleware ()
  ​
  .Listen (poort); 

03. Monteer de applicatie

Aan de kant van de klant moeten we Sapper vertellen waar u de aanvraag moet monteren. Dit is vergelijkbaar met reageer Dom's renderen of vue's dollar methoden. Binnenclient.js, start Sapper en monteer het op de root & LT; DIV & GT; element. Dat element is opgenomen in het sjabloonbestand, dat we later zullen komen.

 Importeren * als Sapper van "@ Sapper / App";
sapper.start ({
  Doel: document.getelementByID (
   "wortel")
}); 

04. Start de ontwikkelingsserver

Met de standaardserver- en clientbestanden die zijn ingesteld, kunnen we de ontwikkelingsserver starten. Dit schopt een build van de server-, client- en servicemedewerkers en het start standaard op poort 3000. Telkens wanneer een bestand verandert, zal het het deel van de applicatie opnieuw opbouwen die is gewijzigd.

Voer de server uit op de opdrachtregel. Houd dit venster open tijdens het ontwikkelen van de site.

 & GT; NPM RUN Dev 

05. Maak een serverroute

Alles in de map "Routes" wordt veranderd in een route voor de toepassing. Bestanden met de .js extensie wordt wat serverroutes wordt genoemd. Deze routes hebben geen UI, maar worden in plaats daarvan gevraagd door de toepassing om gegevens op te halen. In ons geval zullen we ze gebruiken om blogposts op te laden.

De Routes / blog / index.json.js bestand zal de /blog.json eindpunt op onze server. Importeer de blogposts en maak wat JSON van hen.

 Posten importeren van "./_posts.js";
const inhoud = json.stringify (
  Post.Map (Post = & GT; ({
    Auteur: post.author,
    Afbeelding: post.image,
    Titel: Post.Title,
    Slug: Post.Slug
  ​
); 

06. Retourneer de blogposts

Serverroutes Exporteerfuncties die overeenkomen met HTTP-methoden. Om bijvoorbeeld te reageren op een ontvangen verzoek, zouden we een functie exporteren krijgen van het serverroute-bestand. Maak een krijgen Functie die reageert met de gegevens die we in de vorige stap in een JSON-indeling verzamelden. Open http: // localhost: 3000 / blog.json In de browser en controleer de posten er doorheen.

 Exportfunctie Krijg (req, res) {
  Res.Writehead (200, {
    "Inhoudstype": "Toepassing / JSON"
  ​

  res.D (inhoud);
} 

07. Maak indexpagina

Pagina's in Sapper zijn gewone svelte-componenten. Elke component is een enkel bestand met een .svelte extensie en bevatten alle logica en styling voor het beheren van zichzelf. Elk Javascript dat dit onderdeel moet worden uitgevoerd, zal in een & lt; script & gt; Tag - net als elke HTML-pagina.

Binnen Routes / index.svelte , importeer een paar andere svelte-componenten die we kunnen gebruiken om deze pagina te bouwen. Exporteren berichten Variabele dat we later zullen bevolken.

 & lt; script & gt;
  Importeer container van
   "../Componenten/container.svelte";
  importeren postsummy van
   "../Componenten/postsummary.svelte";
  Export laat posten;
& LT; / Script & GT; 

08. Fetch Blog Postgegevens

Met de opstelling van de pagina kunnen we beginnen met het inbrengen van blogposts (misschien wilt u een back-up van cloud opslag ​We moeten dit doen zodra de pagina is geladen. Om ervoor te zorgen dat de server hiervan op de hoogte is en deze gegevens aanvraagt ​​wanneer het de pagina weergeeft, moet deze in een apart gaan & lt; script context = "Module" & GT; label.

Op de server zal Sapper op zoek zijn naar een preload functie en wacht tot het voltooid is voordat u de pagina laat zien. Hier bevorderen we de berichten variabel uit de vorige stap.

 & lt; script context = "Module" & GT;
  Export Async-functie Preload () {
    Const Res = wacht op
     this.fetch ("blog.json");
    Const-gegevens = wachten op res.jon ();
    RETURN {posten: gegevens};
  ​
& LT; / Script & GT; 

09. Display Post Samenvattingen

In Svelte zijn variabelen standaard reactief. Dit betekent dat, terwijl ze bijwerken, onze componenten ook ook zullen updaten. Als de berichten Variabele heeft nu een reeks blogposts, we kunnen deze overlopen en ze weergeven.

We kunnen dit doen met behulp van een #elk blok. Deze zullen herhalen wat er in de beugels voor elk item in een array zit. Onderaan de component, buiten alle tags, voegt u de HTML toe om de palen weer te geven.

 & LT; Container & GT;
  & LT; UL & GT;
    {#ach-berichten als post}
      & LT; LI & GT;
        & LT; PostSummy {... Post} / & GT;
      & LT; / LI & GT;
    {/elk}
  & LT; / UL & GT;
& LT; / Container & GT; 

10. Stijl de container

We kunnen componenten gebruiken om een ​​herhaalde logica te bevatten en ze te gebruiken waar ze nodig zijn - stijlen inbegrepen. De & LT; Container & GT; Component doet momenteel niets, maar we kunnen het gebruiken om een ​​maximale breedte aan de inhoud erin te geven.

Openen Componenten / container.Svelte en voeg wat stijlen toe in een & LT; STYLE & GT; label. Alle stijlen die we in een component toepassen, worden in die component geschergt, wat betekent dat we een generieke selector kunnen gebruiken.

 & LT; STYLE & GT;
  div {
    Marge: 0 Auto;
    Vulling: 0 1Rem;
    Max-breedte: 50rem;
  ​
& LT; / STYLE & GT; 

11. Definieer A & LT; Slot & GT;

Als een component is ontworpen om de ouder naar andere componenten te zijn, hebben we een manier nodig om die componenten door te geven. De & LT; Slot & GT; Element doet precies dat, en kan overal worden geplaatst die logisch is in de markup van een component.

Met & LT; Container & GT; , we wikkelen de inhoud in een stijl & LT; DIV & GT; ​Gebruik & LT; Slot & GT; binnen in de & LT; DIV & GT; om alles erdoorheen te laten.

 & lt; div & gt;
  & LT; Slot / & GT;
& lt; / div & gt; 

12. Stel postsummary rekwisieten bloot

Niet elke component gaat sommige gegevens ophalen. Omdat we de berichten van de hoofdpagina-component laden, kan deze worden doorgegeven aan de componenten die het door zijn attributen maakt.

Open Componenten / PostSummary.Svelte en definieer sommige kenmerken boven aan het bestand. Deze worden ingevuld door de spread-operator die we in stap 09 hebben toegevoegd.

 & lt; script & gt;
  export laat auteur;
  Exporteren Laat beeld;
  Export Laat Slug;
  Export laat de titel;
& LT; / Script & GT; 

13. Geef blog weergeven Summary

Wanneer de kenmerken zijn bevolkt, worden ze dan toegankelijk als elke andere variabele. Door afzonderlijke attributen voor elk deel van het bericht samenvatting te hebben, maken we de markup gemakkelijker te lezen.

Voeg onder aan de component wat HTML toe om de samenvatting te maken. De klassen hebben betrekking op de vooraf gedefinieerde stijlen.

& LT; Article & GT;
& lt; div class = "post-image" -stijl = "
 Achtergrond-afbeelding: URL ({Image}) "/ & GT;
& lt; div class = "lichaam" & GT;
  & LT; DIV-klasse = "Auteur-afbeelding" & GT;
    & lt; img src = {auteur.image}
     alt = {auteur.name} / & GT;
  & LT; / DIV & GT;
  & lt; div class = "Over" & GT;
    & LT; H1 & GT; {TITEL} & LT; / H1 & GT;
    & lt; span class = "byline" & gt; door
     {auteur.name} & lt; / span & gt;
  & LT; / DIV & GT;
& LT; / DIV & GT;
& LT; / Article & GT; 

14. Link naar blogpost

In tegenstelling tot vergelijkbare kaders zoals next.js, werkt Sapper werkt met gewone ankerlinks. Op buildietijd is het in staat om interne links te detecteren en ook om zijn eigen optimalisaties te maken.

Werk de markup bij van de vorige stap door het in een link te wikkelen. Er is geen behoefte aan u om sjabloonsnaren te maken om de slompert-URL samen te stellen.

 & lt; een rel = "prefetch" href = "/ blog / {slak}" & GT;
  & LT; Artikel & GT; ... & LT; / Article & GT;
& LT; / A & GT; 

15. Haal een bericht op slak

Sapper is in staat om pagina's te maken op basis van URL-parameters. In ons geval linken we aan / blog / slak, wat betekent dat het de component rijdt /routes/blog/[slug].svelte ​

In dat component haalt u de bloggegevens op zoals wij voor de indexpagina deden. De paramets Object bevat de parameters van de URL, die in dit geval de slak is.

 & lt; script context = "Module" & GT;
  Export Async-functie
   preload ({params}) {
    Const Res = wacht op deze. FETCH (
     `blog / $ {params.slug} .json`);
    Const-gegevens = wachten op res.jon ();
  ​
& LT; / Script & GT; 

16. Fout als POST niet wordt gevonden

In tegenstelling tot de indexpagina is er een kans dat er geen blogpost bij de URL is. In dat geval moeten we een fout weergeven. Samen met halen , de preload Methode omvat ook fout Dat verandert in plaats daarvan het antwoord op een foutpagina.

Toon aan het einde van de Preload-methode een foutmelding als er geen bericht is gevonden. Zet anders de post variabele voor de pagina.

 if (res.status === 200) {
  RETURN {post: gegevens};
} anders {
  deze.Error (res.status,
    gegevens. Message);
} 

17. Geef het blogpost weer

Met de gegevens die zijn opgehaald, kunnen we nu het bericht op de pagina tonen. Vergelijkbaar met de postsumm-component, tonen we elk deel van de inhoud van de post binnen krullende haakjes. Voeg onderaan het onderdeel een mark-up toe om op de pagina weer te geven.

 & LT; Article & GT;
  & LT; Container & GT;
    & lt; div class = "titel" & GT;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; div class = "byline" & gt; door
       {post.author.name} & lt; / div & gt;
    & LT; / DIV & GT;
    & lt; img class = "post-image" src = {post.image} alt = "" / & GT;
     {post.html}
  & LT; / Container & GT;
& LT; / Article & GT; 

18. Geef in plaats daarvan HTML weer

Nu naar de pagina kijken, wordt alles correct weergegeven, afgezien van de eigenlijke postinhoud. De marketingconversie genereert HTML, maar we zien die gedrukt als tekst op de post zelf. Sapper heeft voor deze zaak een HTML-parser ingebouwd. Plaatsen @html Voor het zal deze parser gebruiken.

 {@ html post.html} 

19. SET PAGINA & LT; TITEL & GT; waarde

Onze blog functioneert correct, maar er zijn een aantal wijzigingen die nodig zijn om het af te maken. Een daarvan is om de & LT; TITLE & GT; Op de pagina om het tabblad te herteren, wordt het weergegeven.

Svelte ondersteunt een & LT; Svelte: Head & GT; element, dat iets in de binnenin in de & LT; HOOFD & GT; van de pagina. Gebruik dit om de titel van de post in te stellen als & LT; TITLE & GT; ​

 & LT; Svelte: Head & GT;
  & lt; title & gt; {post.title} |
   Sapper Blog & LT; / TITLE & GT;
& LT; / Svelte: Head & GT; 

20. Updating van het & LT; TITLE & GT;

Elke pagina doorloopt een sjabloon om de HTML voor de rest van de pagina uit te roeien. Dit is waar elke setup zoals lettertype-invoer en metatags zou worden ingevoerd. Open sjabloon.html en voeg een haak toe voor de inhoud van de & LT; Svelte: Head & GT; element uit de vorige stap. Voeg dit toe in net voor de sluiting & LT; / HOOFD & GT; label.

 & LT; HOOFD & GT;
  ​% Sapper.head%
& LT; / Head & GT; het laatste ding dat we moeten toevoegen is een lay-out voor de blog. In plaats van elke pagina in een component in te wikkelen, zal Sapper op zoek gaan naar een bestand "_layout.svelte" om deze taak voor ons te doen.
Binnen _layout.svelte, importeer de & lt; header & gt; component en laat zien dat bovenaan elke pagina. Het biedt een handige link terug naar de startpagina. 

21. Voeg permanente koptekst toe

Het laatste ding dat we moeten toevoegen is een lay-out voor de blog. In plaats van elke pagina in een component in te wikkelen, zal Sapper op zoek zijn naar een _layout.svelte Bestand om deze taak voor ons te doen. Binnen _layout.svelte , Importeer het & LT; Header & GT; component en laat zien dat bovenaan elke pagina. Het biedt een handige link terug naar de startpagina.

 & lt; script & gt;
  importkop van
   "../Components/header.svelte";
& LT; / Script & GT;
& LT; MAIN & GT;
  & lt; header / gt;
  & LT; Slot / & GT;
& LT; / MAIN & GT; 

Deze inhoud verscheen oorspronkelijk in Web Designer.

• Webcomponenten: de ultieme gids
• 30 chroomextensies voor webontwerpers en devs
• 52 Webontwerphulpmiddelen om u te helpen slimmer te werken in 2019