SvelteKit ist das neueste Anwendungsframework der nächsten Generation, wie ich es nennen würde. Es stellt natürlich eine Anwendung für Sie bereit, mit dem dateibasierten Routing, der Bereitstellung und dem serverseitigen Rendering, das Next schon immer getan hat. Aber SvelteKit unterstützt auch verschachtelte Layouts, Servermutationen, die die Daten auf Ihrer Seite synchronisieren, und einige andere Feinheiten, auf die wir noch eingehen werden.
Dieser Beitrag soll eine Einführung auf hohem Niveau sein, um hoffentlich etwas Aufregung für alle zu schaffen, die SvelteKit noch nie verwendet haben. Es wird eine entspannte Tour. Wenn Ihnen gefällt, was Sie sehen, die vollständige Dokumente sind hier.
In gewisser Weise ist es eine Herausforderung, diesen Beitrag zu schreiben. SvelteKit ist ein Anwendungsrahmen. Es existiert, um Ihnen beim Erstellen von … na ja, Anwendungen zu helfen. Das macht es schwer zu demonstrieren. Es ist nicht möglich, eine vollständige Anwendung in einem Blogbeitrag zu erstellen. Also benutzen wir stattdessen ein wenig unsere Vorstellungskraft. Wir bauen das Gerüst einer Anwendung, haben einige leere UI-Platzhalter und fest codierte statische Daten. Das Ziel ist nicht, eine tatsächliche Anwendung zu erstellen, sondern Ihnen zu zeigen, wie die beweglichen Teile von SvelteKit funktionieren, damit Sie Ihre eigene Anwendung erstellen können.
Dazu bauen wir beispielhaft die bewährte To-Do-Anwendung auf. Aber keine Sorge, es wird viel, viel mehr darum gehen, zu sehen, wie SvelteKit funktioniert, als eine weitere To-Do-App zu erstellen.
Der Code für alles in diesem Beitrag ist verfügbar auf GitHub. Dieses Projekt ist auch auf Vercel eingesetzt für eine Live-Demo.
Erstellen Sie Ihr Projekt
Das Spinnen eines neuen SvelteKit-Projekts ist einfach genug. Laufen npm create your-app-name
im Terminal und beantworten Sie die Fragen. Stellen Sie sicher, dass Sie „Skeleton Project“ auswählen, aber treffen Sie ansonsten die gewünschte Auswahl für TypeScript, ESLint usw.
Sobald das Projekt erstellt ist, führen Sie es aus npm i
machen npm run dev
und ein Dev-Server sollte laufen. Anfeuern localhost:5173
im Browser und Sie erhalten die Platzhalterseite für die Skeleton-App.
Grundlegendes Routing
Beachten Sie die routes
Ordner unter src
. Das enthält Code für alle unsere Routen. Es gibt bereits eine +page.svelte
Datei darin mit Inhalt für das Stammverzeichnis /
Route. Unabhängig davon, wo Sie sich in der Dateihierarchie befinden, hat die eigentliche Seite für diesen Pfad immer den Namen +page.svelte
. In diesem Sinne erstellen wir Seiten für /list
, /details
, /admin/user-settings
machen admin/paid-status
, und fügen Sie außerdem einige Textplatzhalter für jede Seite hinzu.
Ihr Dateilayout sollte in etwa so aussehen:
Sie sollten in der Lage sein zu navigieren, indem Sie die URL-Pfade in der Adressleiste des Browsers ändern.
Layouts
Wir wollen Navigationslinks in unserer App, aber wir wollen das Markup für sie sicherlich nicht auf jeder Seite kopieren, die wir erstellen. Erstellen wir also eine +layout.svelte
Datei im Stammverzeichnis unserer routes
Ordner, den SvelteKit als globale Vorlage für alle Seiten behandelt. Lassen Sie uns einige Inhalte hinzufügen:
<nav> <ul> <li> <a href="/de/">Home</a> </li> <li> <a href="/de/list">To-Do list</a> </li> <li> <a href="/de/admin/paid-status">Account status</a> </li> <li> <a href="/de/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>
Einige rudimentäre Navigation mit einigen grundlegenden Stilen. Von besonderer Bedeutung ist die <slot />
Schild. Das ist nicht den Steckplatz, den Sie mit Webkomponenten und Schatten-DOM verwenden, sondern eher eine Svelte-Funktion, die angibt, wo unsere Inhalte platziert werden sollen. Wenn eine Seite gerendert wird, wird der Seiteninhalt dort hineingeschoben, wo sich der Slot befindet.
Und jetzt haben wir etwas Navigation! Wir werden keine Designwettbewerbe gewinnen, aber wir versuchen es auch nicht.
Verschachtelte Layouts
Was wäre, wenn wir wollten, dass alle unsere Admin-Seiten das normale Layout erben, das wir gerade erstellt haben, aber auch einige Dinge gemeinsam haben, die allen Admin-Seiten (aber nur Admin-Seiten) gemeinsam sind? Kein Problem, wir fügen ein weiteres hinzu +layout.svelte
Datei in unserem Root admin
Verzeichnis, das von allem darunter geerbt wird. Machen wir das und fügen diesen Inhalt hinzu:
<div>This is an admin page</div> <slot /> <style> div { padding: 15px; margin: 10px 0; background-color: red; color: white; }
</style>
Wir fügen ein rotes Banner hinzu, das anzeigt, dass dies eine Admin-Seite ist, und dann, wie zuvor, a <slot />
die angibt, wohin unser Seiteninhalt gehen soll.
Unser Root-Layout von vor dem Rendern. Innerhalb des Root-Layouts befindet sich a <slot />
Schild. Der Inhalt des verschachtelten Layouts wird in den des Stammlayouts eingefügt <slot />
. Und schließlich definiert das verschachtelte Layout sein eigenes <slot />
, in die der Seiteninhalt gerendert wird.
Wenn Sie zu den Admin-Seiten navigieren, sollten Sie das neue rote Banner sehen:
Definition unserer Daten
OK, lassen Sie uns einige tatsächliche Daten rendern – oder zumindest sehen, wie wir einige tatsächliche Daten rendern können. Es gibt hundert Möglichkeiten, eine Datenbank zu erstellen und sich mit ihr zu verbinden. In diesem Beitrag geht es jedoch um SvelteKit und nicht um die Verwaltung von DynamoDB, daher „laden“ wir stattdessen einige statische Daten. Aber wir verwenden dieselben Maschinen, um sie zu lesen und zu aktualisieren, die Sie für echte Daten verwenden würden. Tauschen Sie für eine echte Web-App die Funktionen, die statische Daten zurückgeben, gegen Funktionen aus, die eine Verbindung zu und Abfragen zu der von Ihnen verwendeten Datenbank herstellen.
Lassen Sie uns ein ganz einfaches Modul in erstellen lib/data/todoData.ts
die einige statische Daten zusammen mit künstlichen Verzögerungen zurückgibt, um echte Abfragen zu simulieren. Sie werden das sehen lib
Ordner woanders importiert via $lib
. Dies ist eine SvelteKit-Funktion für diesen bestimmten Ordner, und Sie können sogar Fügen Sie Ihre eigenen Aliase hinzu.
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);
}
Eine Funktion, um ein flaches Array unserer Aufgaben zurückzugeben, eine Suche nach unseren Tags und eine Funktion, um eine einzelne Aufgabe abzurufen (wir verwenden die letzte Aufgabe auf unserer Detailseite).
Laden unserer Daten
Wie bekommen wir diese Daten in unsere Svelte-Seiten? Es gibt eine Reihe von Möglichkeiten, aber jetzt erstellen wir eine +page.server.js
Datei in unserem list
Ordner und fügen Sie diesen Inhalt darin ein:
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); const tags = getTags(); return { todos, tags, };
}
Wir haben a definiert load()
Funktion, die die für die Seite benötigten Daten einliest. Beachten Sie, dass wir es sind nicht await
-ing Anrufe an unsere getTodos
machen getTags
asynchrone Funktionen. Dies würde zu einem Wasserfall beim Laden von Daten führen, da wir darauf warten, dass unsere To-Do-Elemente eingehen, bevor wir unsere Tags laden. Stattdessen geben wir die rohen Versprechungen ab load
, und SvelteKit erledigt die notwendige Arbeit für await
Them.
Wie greifen wir also von unserer Seitenkomponente auf diese Daten zu? SvelteKit bietet eine data
prop für unsere Komponente mit Daten darauf. Wir greifen mit a auf unsere Aufgaben und Tags zu reaktive Zuordnung.
Unsere Listenseitenkomponente sieht jetzt so aus.
<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>
Und dies sollte unsere To-Do-Items rendern!
Layoutgruppen
Bevor wir zur Detailseite übergehen und Daten mutieren, werfen wir einen Blick auf eine wirklich nette SvelteKit-Funktion: Layoutgruppen. Wir haben bereits verschachtelte Layouts für alle Admin-Seiten gesehen, aber was wäre, wenn wir ein Layout zwischen beliebigen Seiten auf derselben Ebene unseres Dateisystems teilen wollten? Was wäre insbesondere, wenn wir ein Layout nur zwischen unserer Listenseite und unserer Detailseite teilen wollten? Wir haben bereits ein globales Layout auf dieser Ebene. Stattdessen können wir ein neues Verzeichnis erstellen, aber mit einem Namen, der in Klammern steht, wie folgt:
Wir haben jetzt eine Layoutgruppe, die unsere Listen- und Detailseiten abdeckt. Ich habe es benannt (todo-management)
aber du kannst es benennen wie du willst. Um es klar zu sagen, dieser Name wird nicht wirken sich auf die URLs der Seiten innerhalb der Layoutgruppe aus. Die URLs bleiben gleich; Mit Layoutgruppen können Sie gemeinsam genutzte Layouts zu Seiten hinzufügen, ohne dass sie alle das gesamte Verzeichnis darin umfassen routes
.
We könnte füge hinzu ein +layout.svelte
Datei und einige dumm <div>
Banner mit der Aufschrift „Hey, wir verwalten Aufgaben“. Aber machen wir etwas Interessanteres. Layouts definieren können load()
Funktionen, um Daten für alle darunter liegenden Routen bereitzustellen. Lassen Sie uns diese Funktionalität verwenden, um unsere Tags zu laden – da wir unsere Tags in unserer verwenden werden details
Seite – zusätzlich zu der list
Seite haben wir bereits.
In Wirklichkeit lohnt es sich mit ziemlicher Sicherheit nicht, eine Layoutgruppe zu zwingen, nur ein einziges Datenelement bereitzustellen. Es ist besser, diese Daten in der zu duplizieren load()
Funktion für jede Seite. Aber für diesen Beitrag liefert er die Entschuldigung, die wir brauchen, um ein neues SvelteKit-Feature zu sehen!
Lassen Sie uns zunächst in unsere gehen list
Seite +page.server.js
Datei und entfernen Sie die Tags daraus.
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); return { todos, };
}
Unsere Listenseite sollte jetzt einen Fehler erzeugen, da es keine gibt tags
Objekt. Lassen Sie uns dies beheben, indem Sie a hinzufügen +layout.server.js
Datei in unserer Layout-Gruppe, dann definieren Sie eine load()
Funktion, die unsere Tags lädt.
import { getTags } from "$lib/data/todoData"; export function load() { const tags = getTags(); return { tags, };
}
Und einfach so wird unsere Listenseite wieder gerendert!
Wir laden Daten von mehreren Standorten
Lassen Sie uns auf den Punkt bringen, was hier passiert:
- Wir haben a definiert
load()
Funktion für unsere Layoutgruppe, die wir eingefügt haben+layout.server.js
. - Dies liefert Daten für alle der Seiten, für die das Layout dient – was in diesem Fall unsere Listen- und Detailseiten bedeutet.
- Unsere Listenseite definiert auch a
load()
Funktion, die in seine geht+page.server.js
Datei. - SvelteKit erledigt die Routinearbeit, die Ergebnisse dieser Datenquellen zu nehmen, sie zusammenzuführen und beides verfügbar zu machen
data
.
Unsere Detailseite
Wir verwenden unsere Seite „Details“, um eine Aufgabe zu bearbeiten. Zuerst fügen wir der Tabelle auf unserer Listenseite eine Spalte hinzu, die auf die Detailseite mit der ID des zu erledigenden Elements in der Abfragezeichenfolge verweist.
<td><a href="/de/details?id={t.id}">Edit</a></td>
Lassen Sie uns nun unsere Detailseite aufbauen. Zuerst fügen wir einen Loader hinzu, um das zu bearbeitende To-do-Element zu erfassen. Ein ... kreieren +page.server.js
in /details
, mit diesem Inhalt:
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, };
}
Unser Lader kommt mit a url
-Eigenschaft, aus der wir Abfragezeichenfolgenwerte abrufen können. Dies erleichtert das Nachschlagen des Aufgabeneintrags, den wir gerade bearbeiten. Lassen Sie uns diese Aufgabe zusammen mit der Funktionalität zum Bearbeiten rendern.
SvelteKit hat wunderbare eingebaute Mutationsfähigkeiten, solange Sie Formulare verwenden. Erinnern Sie sich an Formulare? Hier ist unsere Detailseite. Ich habe die Stile der Kürze halber weggelassen.
<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>
Wir holen uns die Tags wie zuvor aus dem Loader unserer Layoutgruppe und die Aufgaben aus dem Loader unserer Seite. Wir greifen nach dem Eigentlichen tag
Objekte aus der To-Do-Liste der Tag-IDs und rendert dann alles. Wir erstellen ein Formular mit einer versteckten Eingabe für die ID und einer echten Eingabe für den Titel. Wir zeigen die Tags an und stellen dann eine Schaltfläche zum Absenden des Formulars zur Verfügung.
Falls dir das aufgefallen ist use:enhance
, das SvelteKit einfach anweist, progressive Erweiterung und Ajax zu verwenden, um unser Formular zu senden. Das wirst du wahrscheinlich immer verwenden.
Wie speichern wir unsere Änderungen?
Beachten Sie die action="?/editTodo"
Attribut auf dem Formular selbst? Dies sagt uns, wo wir unsere bearbeiteten Daten einreichen möchten. Für unseren Fall wollen wir uns einer unterwerfen editTodo
"Aktion."
Lassen Sie uns es erstellen, indem Sie Folgendes zu hinzufügen +page.server.js
Datei, die wir bereits für Details haben (die derzeit eine load()
Funktion, um unsere To-dos zu erfassen):
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"); },
};
Formularaktionen geben uns a request
Objekt, das Zugriff auf unsere bietet formData
, die eine hat get
Methode für unsere verschiedenen Formularfelder. Wir haben diese versteckte Eingabe für den ID-Wert hinzugefügt, damit wir sie hier abrufen können, um das zu bearbeitende Aufgabenelement nachzuschlagen. Wir simulieren eine Verspätung, rufen eine neue an updateTodo()
-Methode, und leiten Sie den Benutzer dann zurück zur /list
Seite. Die updateTodo()
Die Methode aktualisiert lediglich unsere statischen Daten; Im wirklichen Leben würden Sie eine Art Update in dem Datenspeicher ausführen, den Sie verwenden.
export async function updateTodo(id, newTitle) { const todo = todos.find(t => t.id == id); Object.assign(todo, { title: newTitle });
}
Probieren wir es aus. Wir gehen zuerst zur Listenseite:
Klicken Sie nun auf die Schaltfläche Bearbeiten für eines der Aufgaben, um die Bearbeitungsseite aufzurufen /details
.
Wir werden einen neuen Titel hinzufügen:
Klicken Sie nun auf Speichern. Das sollte uns zurück zu unserem bringen /list
Seite, auf der der neue To-Do-Titel angewendet wird.
Wie kam es, dass der neue Titel so auftauchte? Es war automatisch. Einmal haben wir auf die umgeleitet /list
Seite hat SvelteKit alle unsere Loader automatisch erneut ausgeführt, so wie es es unabhängig davon getan hätte. Dies ist der entscheidende Fortschritt, den Anwendungsframeworks der nächsten Generation wie SvelteKit Remix und Nächstes 13 bieten. Anstatt Ihnen eine bequeme Möglichkeit zum Rendern von Seiten zu geben und Ihnen dann viel Glück beim Abrufen aller Endpunkte zu wünschen, die Sie möglicherweise zum Aktualisieren von Daten benötigen, integrieren sie neben dem Laden von Daten auch die Datenmutation, sodass beide zusammen arbeiten können.
Ein paar Dinge, die Sie sich vielleicht fragen …
Dieses Mutationsupdate scheint nicht allzu beeindruckend zu sein. Die Ladeprogramme werden bei jeder Navigation erneut ausgeführt. Was wäre, wenn wir in unserer Formularaktion keine Weiterleitung hinzugefügt hätten, sondern auf der aktuellen Seite geblieben wären? SvelteKit würde die Aktualisierung wie zuvor in der Formularaktion durchführen, aber würde Noch Führen Sie alle Ladeprogramme für die aktuelle Seite erneut aus, einschließlich der Ladeprogramme in den Seitenlayouts.
Können wir unsere Daten gezielter entwerten? Beispielsweise wurden unsere Tags nicht bearbeitet, sodass wir sie im wirklichen Leben nicht erneut abfragen möchten. Ja, was ich Ihnen gezeigt habe, ist nur das Standardverhalten von Formularen in SvelteKit. Sie können das Standardverhalten deaktivieren, indem Sie Bereitstellung eines Rückrufs an use:enhance
. Dann bietet SvelteKit Handbuch Invalidierungsfunktionen.
Das Laden von Daten bei jeder Navigation ist potenziell teuer und unnötig. Kann ich diese Daten zwischenspeichern, wie ich es mit Tools wie z react-query
? Ja, nur anders. Mit SvelteKit können Sie die Cache-Control-Header setzen (und dann respektieren), die das Web bereits bereitstellt. Und ich werde Cache-Invalidierungsmechanismen in einem Folgebeitrag behandeln.
Alles, was wir in diesem Artikel getan haben, verwendet statische Daten und ändert Werte im Speicher. Wenn Sie alles rückgängig machen und von vorne beginnen müssen, stoppen Sie die und starten Sie sie neu npm run dev
Knotenprozess.
Wrapping up
Wir haben kaum an der Oberfläche von SvelteKit gekratzt, aber hoffentlich haben Sie genug gesehen, um sich darüber zu freuen. Ich kann mich nicht erinnern, wann mir die Webentwicklung das letzte Mal so viel Spaß gemacht hat. Da Dinge wie Bündelung, Routing, SSR und Bereitstellung sofort einsatzbereit sind, verbringe ich mehr Zeit mit dem Programmieren als mit dem Konfigurieren.
Hier sind ein paar weitere Ressourcen, die Sie als nächste Schritte zum Erlernen von SvelteKit verwenden können:
- SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
- Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
- Quelle: https://css-tricks.com/getting-started-with-sveltekit/
- 1
- 10
- 100
- 11
- 7
- 9
- 98
- a
- Fähig
- Über uns
- darüber
- Zugang
- Konto
- Action
- Aktionen
- Marcus
- hinzugefügt
- Zusatz
- Adresse
- Administrator
- advanced
- beeinflussen
- Alle
- Zulassen
- neben
- bereits
- immer
- Betrag
- machen
- Ein anderer
- beantworten
- jemand
- App
- Anwendung
- Anwendungen
- angewandt
- um
- Feld
- Artikel
- künstlich
- zugewiesen
- automatische
- Im Prinzip so, wie Sie es von Google Maps kennen.
- verfügbar
- – warten auf Sie!
- Zurück
- Hintergrund
- banner
- Bar
- basic
- Bevor
- BESTE
- Besser
- zwischen
- Bit
- Schwarz
- Blog
- Blog-Beiträge
- Blau
- Box
- bringen
- Browser
- Bugs
- bauen
- erbaut
- eingebaut
- Taste im nun erscheinenden Bestätigungsfenster nun wieder los.
- Cache-Speicher
- rufen Sie uns an!
- Aufrufe
- Fähigkeiten
- Häuser
- sicherlich
- herausfordernd
- Ändern
- klar
- Code
- Programmierung
- Farbe
- Kolonne
- wie die
- gemeinsam
- Ligen
- Komponente
- Komponenten
- Kongressbegleitung
- Vernetz Dich
- Sich zusammenschliessen
- Konsul (Console)
- Inhalt
- Praktische
- könnte
- Kurs
- Abdeckung
- Covers
- erstellen
- erstellt
- Erstellen
- Strom
- Zur Zeit
- technische Daten
- Datenbase
- Standard
- Definiert
- verzögern
- Verzögerungen
- Einsatz
- Design
- Details
- Entwickler
- Entwicklung
- DID
- Display
- Tut nicht
- Dabei
- Nicht
- jeder
- anderswo
- genug
- Ganz
- Gesamtheit
- Fehler
- etc
- Sogar
- Jedes
- alles
- Beispiel
- aufgeregt
- Aufregung
- existiert
- teuer
- exportieren
- möglich
- Merkmal
- wenige
- Felder
- Reichen Sie das
- Mappen
- Endlich
- Ende
- Feuer
- Vorname
- Fixieren
- Wohnung
- Folgende
- für immer
- unten stehende Formular
- Format
- Formen
- gefunden
- Gerüste
- für
- voller
- Spaß
- Funktion
- Funktionalität
- Funktionen
- bekommen
- bekommen
- ABSICHT
- Unterstützung
- Global
- Go
- Kundenziele
- Goes
- gehen
- greifen
- Gruppe an
- Gruppen
- passieren
- hart
- Überschriften
- Hilfe
- hier
- versteckt
- Hierarchie
- High-Level
- hält
- Hoffentlich
- Horizontale
- Ultraschall
- HTML
- HTTPS
- KRANK
- Vorstellungen
- importieren
- Bedeutung
- beeindruckend
- in
- Einschließlich
- Anfangs-
- Varianten des Eingangssignals:
- beantragen müssen
- integrieren
- interessant
- Einleitung
- IT
- Artikel
- selbst
- JavaScript
- Wesentliche
- Nachname
- neueste
- Layout
- lernen
- Lasst uns
- Niveau
- Li
- Lebensdauer
- !
- wahrscheinlich
- Links
- Liste
- leben
- Belastung
- Ladeprogramm
- Laden
- Belastungen
- Lang
- aussehen
- SIEHT AUS
- Nachschlagen
- Glück
- Maschinen
- um
- MACHT
- Making
- flächendeckende Gesundheitsprogramme
- manuell
- Marge
- Materie
- Mittel
- Memory
- nur
- Verschmelzung
- Methode
- könnte
- Geist / Bewusstsein
- Modul
- mehr
- schlauer bewegen
- ziehen um
- mehrere
- Name
- Namens
- nav
- Navigieren
- Navigation
- notwendig,
- Need
- Neu
- weiter
- Knoten
- normal
- Anzahl
- Objekt
- Objekte
- EINEM
- Auftrag
- Andere
- Andernfalls
- besitzen
- besondere
- Weg
- Ausführen
- wählen
- Stück
- Stücke
- Platzhalter
- Plato
- Datenintelligenz von Plato
- PlatoData
- Points
- Post
- BLOG-POSTS
- möglicherweise
- Danach
- Aufgabenstellung:
- Prozessdefinierung
- produziert
- fortschrittlich
- Projekt
- Promises
- Resorts
- geschützt
- die
- bietet
- Pullover
- setzen
- Frage
- Roh
- Lesen Sie mehr
- echt
- wahres Leben
- Realität
- Rot
- umleiten
- Ungeachtet
- bleiben
- merken
- entfernen
- Rendering
- macht
- Anforderung
- Downloads
- Die Ergebnisse
- Rückkehr
- Rückkehr
- Rückgabe
- zurückkehren
- Reiches
- Wurzel
- Straße
- Routen
- Führen Sie
- Laufen
- gleich
- Speichern
- Sehen
- dient
- kompensieren
- Shadow
- Teilen
- von Locals geführtes
- sollte
- erklären
- Einfacher
- einfach
- da
- Single
- Schlitten
- So
- einige
- etwas
- Quellen
- verbringen
- Anfang
- begonnen
- blieb
- Shritte
- Stoppen
- abschicken
- Unterstützt
- Oberfläche
- System
- Tabelle
- TAG
- Nehmen
- Einnahme
- Reden
- Tandem
- gezielt
- erzählt
- Vorlage
- Terminal
- Das
- während
- Zeit
- Titel
- zu
- gemeinsam
- auch
- Werkzeuge
- Tour
- behandeln
- was immer dies auch sein sollte.
- WENDE
- Typoskript
- ui
- für
- Aktualisierung
- Updates
- URL
- us
- -
- Mitglied
- Wert
- Werte
- verschiedene
- Anzeigen
- warten
- wollte
- Wege
- Netz
- Webkomponenten
- Web-Entwicklung
- Was
- welche
- Weiß
- werden wir
- gewinnen
- ohne
- wunderbar
- Arbeiten
- Werk
- wert
- würde
- schreiben
- Du
- Ihr
- Zephyrnet