Kit esbelto es lo último de lo que yo llamaría marcos de aplicación de última generación. Por supuesto, crea una aplicación para usted, con el enrutamiento basado en archivos, la implementación y la representación del lado del servidor que Next ha hecho desde siempre. Pero SvelteKit también es compatible con diseños anidados, mutaciones de servidor que sincronizan los datos en su página y algunas otras sutilezas que abordaremos.
Esta publicación pretende ser una introducción de alto nivel para, con suerte, generar algo de entusiasmo para cualquiera que nunca haya usado SvelteKit. Será un recorrido relajado. Si te gusta lo que ves, el los documentos completos están aquí.
De alguna manera, esta es una publicación desafiante para escribir. SvelteKit es un marco de aplicación. Existe para ayudarlo a crear... bueno, aplicaciones. Eso hace que sea difícil de demostrar. No es factible crear una aplicación completa en una publicación de blog. Entonces, en cambio, usaremos un poco nuestra imaginación. Construiremos el esqueleto de una aplicación, tendremos algunos marcadores de posición de interfaz de usuario vacíos y datos estáticos codificados. El objetivo no es crear una aplicación real, sino mostrarle cómo funcionan las piezas móviles de SvelteKit para que pueda crear su propia aplicación.
Con ese fin, construiremos la aplicación To-Do probada y verdadera como ejemplo. Pero no se preocupe, se tratará mucho más de ver cómo funciona SvelteKit que de crear otra aplicación To-Do.
El código para todo en esta publicación es disponible en GitHub. Este proyecto también es desplegado en Vercel para una demostración en vivo.
Creando tu proyecto
Poner en marcha un nuevo proyecto SvelteKit es bastante simple. Correr npm create your-app-name
en la terminal y responde las preguntas. Asegúrese de elegir "Proyecto esqueleto", pero de lo contrario, haga las selecciones que desee para TypeScript, ESLint, etc.
Una vez creado el proyecto, ejecute npm i
y npm run dev
y un servidor de desarrollo debería comenzar a ejecutarse. Quémalo localhost:5173
en el navegador y obtendrá la página de marcador de posición para la aplicación de esqueleto.
Enrutamiento básico
Note la routes
carpeta debajo src
. Eso contiene el código para todas nuestras rutas. ya hay un +page.svelte
archivo allí con contenido para la raíz /
ruta. No importa en qué parte de la jerarquía de archivos se encuentre, la página real para esa ruta siempre tiene el nombre +page.svelte
. Con eso en mente, creemos páginas para /list
, /details
, /admin/user-settings
y admin/paid-status
y también agregue algunos marcadores de posición de texto para cada página.
El diseño de su archivo debería verse así:
Debería poder navegar cambiando las rutas de URL en la barra de direcciones del navegador.
Diseños
Querremos enlaces de navegación en nuestra aplicación, pero ciertamente no queremos copiar el marcado para ellos en cada página que creamos. Entonces, vamos a crear un +layout.svelte
archivo en la raíz de nuestro routes
carpeta, que SvelteKit tratará como una plantilla global para todas las páginas. Vamos a agregarle algo de contenido:
<nav> <ul> <li> <a href="/es/">Home</a> </li> <li> <a href="/es/list">To-Do list</a> </li> <li> <a href="/es/admin/paid-status">Account status</a> </li> <li> <a href="/es/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>
Una navegación rudimentaria con algunos estilos básicos. De particular importancia es la <slot />
etiqueta. Esto es no la ranura que usas con componentes web y shadow DOM, sino más bien una característica Svelte que indica dónde colocar nuestro contenido. Cuando se procesa una página, el contenido de la página se deslizará hacia donde está la ranura.
¡Y ahora tenemos algo de navegación! No ganaremos ningún concurso de diseño, pero no lo intentaremos.
Diseños anidados
¿Qué pasaría si quisiéramos que todas nuestras páginas de administración heredaran el diseño normal que acabamos de crear, pero también compartimos algunas cosas comunes a todas las páginas de administración (pero solo a las páginas de administración)? No hay problema, agregamos otro +layout.svelte
archivo en nuestra raíz admin
directorio, que será heredado por todo lo que está debajo de él. Hagámoslo y agreguemos este contenido:
<div>This is an admin page</div> <slot /> <style> div { padding: 15px; margin: 10px 0; background-color: red; color: white; }
</style>
Agregamos un banner rojo que indica que esta es una página de administración y luego, como antes, un <slot />
indicando dónde queremos que vaya el contenido de nuestra página.
Nuestro diseño raíz anterior a los renderizados. Dentro del diseño raíz hay un <slot />
etiqueta. El contenido del diseño anidado va al diseño raíz <slot />
. Y finalmente, el diseño anidado define su propio <slot />
, en el que se representa el contenido de la página.
Si navega a las páginas de administración, debería ver el nuevo banner rojo:
Definiendo nuestros datos
Bien, representemos algunos datos reales, o al menos, veamos cómo podemos representar algunos datos reales. Hay cientos de formas de crear y conectarse a una base de datos. Sin embargo, esta publicación trata sobre SvelteKit, no sobre la administración de DynamoDB, por lo que "cargaremos" algunos datos estáticos en su lugar. Pero usaremos la misma maquinaria para leerlo y actualizarlo que usaría para datos reales. Para una aplicación web real, intercambie las funciones que devuelven datos estáticos con funciones que se conectan y consultan a cualquier base de datos que utilice.
Vamos a crear un módulo muy simple en lib/data/todoData.ts
que devuelve algunos datos estáticos junto con retrasos artificiales para simular consultas reales. verás esto lib
carpeta importada en otro lugar a través de $lib
. Esta es una característica de SvelteKit para esa carpeta en particular, e incluso puede agregue sus propios alias.
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);
}
Una función para devolver una matriz plana de nuestros elementos de tareas pendientes, una búsqueda de nuestras etiquetas y una función para obtener una sola tarea pendiente (usaremos esa última en nuestra página de Detalles).
Cargando nuestros datos
¿Cómo conseguimos esos datos en nuestras páginas de Svelte? Hay varias maneras, pero por ahora, vamos a crear un +page.server.js
archivar en nuestro list
carpeta, y poner este contenido en ella:
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); const tags = getTags(); return { todos, tags, };
}
Hemos definido un load()
función que extrae los datos necesarios para la página. Fíjate que estamos no await
-ing llamadas a nuestro getTodos
y getTags
funciones asíncronas. Hacerlo crearía una cascada de carga de datos mientras esperamos que lleguen nuestras tareas pendientes antes de cargar nuestras etiquetas. En su lugar, devolvemos las promesas en bruto de load
, y SvelteKit hace el trabajo necesario para await
de ellas.
Entonces, ¿cómo accedemos a estos datos desde nuestro componente de página? SvelteKit proporciona un data
prop para nuestro componente con datos en él. Accederemos a nuestras tareas pendientes y etiquetas desde él usando un asignación reactiva.
Nuestro componente de página de lista ahora se ve así.
<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>
¡Y esto debería generar nuestros elementos pendientes!
Grupos de diseño
Antes de pasar a la página Detalles y mutar los datos, echemos un vistazo a una función SvelteKit realmente interesante: grupos de diseño. Ya hemos visto diseños anidados para todas las páginas de administración, pero ¿qué pasaría si quisiéramos compartir un diseño entre páginas arbitrarias en el mismo nivel de nuestro sistema de archivos? En particular, ¿qué pasaría si quisiéramos compartir un diseño solo entre nuestra página de Lista y nuestra página de Detalles? Ya tenemos un diseño global a ese nivel. En su lugar, podemos crear un nuevo directorio, pero con un nombre entre paréntesis, como este:
Ahora tenemos un grupo de diseño que cubre nuestras páginas Lista y Detalles. lo nombré (todo-management)
pero puedes ponerle el nombre que quieras. Para ser claros, este nombre será no afectan las URL de las páginas dentro del grupo de diseño. Las URL seguirán siendo las mismas; Los grupos de diseño le permiten agregar diseños compartidos a las páginas sin que todos comprendan la totalidad de un directorio en routes
.
We podría Agrega un +layout.svelte
archivo y alguna tontería <div>
pancarta que dice: "Oye, estamos gestionando las tareas pendientes". Pero hagamos algo más interesante. Los diseños pueden definir load()
funciones con el fin de proporcionar datos para todas las rutas por debajo de ellos. Usemos esta funcionalidad para cargar nuestras etiquetas, ya que usaremos nuestras etiquetas en nuestro details
página — además de la list
página que ya tenemos.
En realidad, es casi seguro que no vale la pena obligar a un grupo de diseño solo a proporcionar un solo dato; es mejor duplicar esos datos en el load()
Función para cada página. ¡Pero para esta publicación, proporcionará la excusa que necesitamos para ver una nueva característica de SvelteKit!
Primero, entremos en nuestro list
de la página +page.server.js
archivo y elimine las etiquetas de él.
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); return { todos, };
}
Nuestra página de lista ahora debería producir un error ya que no hay tags
objeto. Arreglemos esto agregando un +layout.server.js
archivo en nuestro grupo de diseño, luego defina un load()
función que carga nuestras etiquetas.
import { getTags } from "$lib/data/todoData"; export function load() { const tags = getTags(); return { tags, };
}
Y, así, ¡nuestra página de lista se muestra de nuevo!
Estamos cargando datos de varias ubicaciones
Pongamos un punto fino en lo que está sucediendo aquí:
- Definimos un
load()
función para nuestro grupo de diseño, que ponemos en+layout.server.js
. - Esto proporciona datos para todos de las páginas que sirve el diseño, que en este caso significa nuestras páginas Lista y Detalles.
- Nuestra página Lista también define un
load()
función que va en su+page.server.js
archivo. - SvelteKit hace el trabajo duro de tomar los resultados de estas fuentes de datos, fusionarlos y hacer que ambos estén disponibles en
data
.
Nuestra página de detalles
Usaremos nuestra página Detalles para editar un elemento de tarea pendiente. Primero, agreguemos una columna a la tabla en nuestra página Lista que se vincule a la página Detalles con el ID del elemento pendiente en la cadena de consulta.
<td><a href="/es/details?id={t.id}">Edit</a></td>
Ahora construyamos nuestra página Detalles. Primero, agregaremos un cargador para capturar el elemento pendiente que estamos editando. Crear un +page.server.js
in /details
, con este contenido:
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, };
}
Nuestro cargador viene con un url
propiedad de la que podemos extraer valores de cadena de consulta. Esto hace que sea más fácil buscar el elemento pendiente que estamos editando. Vamos a renderizar esa tarea pendiente, junto con la funcionalidad para editarla.
SvelteKit tiene maravillosas capacidades de mutación incorporadas, siempre que use formularios. ¿Recuerdas los formularios? Aquí está nuestra página de Detalles. He elidido los estilos por brevedad.
<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>
Tomamos las etiquetas como antes del cargador de nuestro grupo de diseño y el elemento de tareas pendientes del cargador de nuestra página. Estamos agarrando el real tag
objetos de la lista de tareas pendientes de ID de etiqueta y luego renderizar todo. Creamos un formulario con una entrada oculta para el ID y una entrada real para el título. Mostramos las etiquetas y luego proporcionamos un botón para enviar el formulario.
Si notaste el use:enhance
, que simplemente le dice a SvelteKit que use la mejora progresiva y Ajax para enviar nuestro formulario. Es probable que siempre uses eso.
¿Cómo guardamos nuestras ediciones?
Note la action="?/editTodo"
atributo en el formulario mismo? Esto nos dice dónde queremos enviar nuestros datos editados. Para nuestro caso, queremos someternos a un editTodo
"acción."
Vamos a crearlo agregando lo siguiente al +page.server.js
archivo que ya tenemos para Detalles (que actualmente tiene un load()
para tomar nuestra tarea pendiente):
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"); },
};
Las acciones de forma nos dan una request
objeto, que proporciona acceso a nuestro formData
, que tiene un get
para nuestros diversos campos de formulario. Agregamos esa entrada oculta para el valor de ID para poder tomarla aquí y buscar el elemento pendiente que estamos editando. Simulamos un retraso, llamamos a un nuevo updateTodo()
método, luego redirigir al usuario de nuevo a la /list
La página updateTodo()
el método simplemente actualiza nuestros datos estáticos; en la vida real, ejecutaría algún tipo de actualización en cualquier almacén de datos que esté utilizando.
export async function updateTodo(id, newTitle) { const todo = todos.find(t => t.id == id); Object.assign(todo, { title: newTitle });
}
Probémoslo. Primero iremos a la página Lista:
Ahora hagamos clic en el botón Editar de uno de los elementos pendientes para que aparezca la página de edición en /details
.
Vamos a añadir un nuevo título:
Ahora, haga clic en Guardar. Eso debería llevarnos de vuelta a nuestro /list
página, con el nuevo título de tarea pendiente aplicado.
¿Cómo apareció así el nuevo título? Fue automático. Una vez redirigidos a la /list
página, SvelteKit volvió a ejecutar automáticamente todos nuestros cargadores como lo habría hecho independientemente. Este es el avance clave que los marcos de aplicaciones de próxima generación, como SvelteKit, Remixy Siguiente 13 proveer. En lugar de brindarle una forma conveniente de representar páginas y luego desearle la mejor de las suertes para obtener los puntos finales que pueda tener para actualizar los datos, integran la mutación de datos junto con la carga de datos, lo que permite que los dos funcionen en conjunto.
Algunas cosas que te estarás preguntando...
Esta actualización de mutación no parece demasiado impresionante. Los cargadores se volverán a ejecutar cada vez que navegue. ¿Qué pasaría si no hubiéramos agregado una redirección en nuestra acción de formulario, sino que nos hubiéramos quedado en la página actual? SvelteKit realizaría la actualización en forma de acción, como antes, pero aun vuelva a ejecutar todos los cargadores para la página actual, incluidos los cargadores en los diseños de página.
¿Podemos tener medios más específicos para invalidar nuestros datos? Por ejemplo, nuestras etiquetas no se editaron, por lo que en la vida real no querríamos volver a consultarlas. Sí, lo que te mostré es solo el comportamiento predeterminado de los formularios en SvelteKit. Puede desactivar el comportamiento predeterminado al proporcionar una devolución de llamada a use:enhance
. Entonces SvelteKit proporciona manual funciones de invalidación.
Cargar datos en cada navegación es potencialmente costoso e innecesario. ¿Puedo almacenar en caché estos datos como lo hago con herramientas como react-query
? Sí, sólo que de manera diferente. SvelteKit le permite establecer (y luego respetar) los encabezados de control de caché que ya proporciona la web. Y cubriré los mecanismos de invalidación de caché en una publicación de seguimiento.
Todo lo que hemos hecho a lo largo de este artículo usa datos estáticos y modifica valores en la memoria. Si necesita revertir todo y comenzar de nuevo, detenga y reinicie el npm run dev
Proceso de nodo.
Terminando
Apenas hemos arañado la superficie de SvelteKit, pero esperamos que hayas visto lo suficiente como para emocionarte. No puedo recordar la última vez que encontré el desarrollo web tan divertido. Con cosas como la agrupación, el enrutamiento, SSR y la implementación, todo manejado de forma inmediata, puedo pasar más tiempo codificando que configurando.
Aquí hay algunos recursos más que puede usar como próximos pasos para aprender SvelteKit:
- Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
- Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
- Fuente: https://css-tricks.com/getting-started-with-sveltekit/
- 1
- 10
- 100
- 11
- 7
- 9
- 98
- a
- Poder
- Nuestra Empresa
- sobre TI
- de la máquina
- Mi Cuenta
- la columna Acción
- acciones
- Adam
- adicional
- adición
- dirección
- Admin
- avanzado
- afectar
- Todos
- Permitir
- junto al
- ya haya utilizado
- hacerlo
- cantidad
- y
- Otra
- https://www.youtube.com/watch?v=xB-eutXNUMXJtA&feature=youtu.be
- nadie
- applicación
- Aplicación
- aplicaciones
- aplicada
- en torno a
- Formación
- artículo
- artificial
- asigna
- Automático
- automáticamente
- Hoy Disponibles
- esperar
- Atrás
- fondo
- bandera
- de caramelos
- básica
- antes
- MEJOR
- mejores
- entre
- Poco
- Negro
- Blog
- Entradas De Blog
- Azul
- Box
- llevar
- cada navegador
- loco
- build
- construido
- incorporado
- .
- cache
- llamar al
- Calls
- capacidades
- case
- ciertamente
- desafiante
- cambio
- limpiar
- código
- Codificación
- Color
- Columna
- cómo
- Algunos
- Competiciones
- componente
- componentes
- conferencias
- Contacto
- Conectándote
- Consola
- contenido
- Conveniente
- podría
- Curso
- cubierta
- Cubiertas
- Para crear
- creado
- Creamos
- Current
- En la actualidad
- datos
- Base de datos
- Predeterminado
- Define
- retrasar
- retrasos
- despliegue
- Diseño
- detalles
- Dev
- Desarrollo
- HIZO
- Pantalla
- No
- "Hacer"
- No
- cada una
- en otra parte
- suficientes
- Todo
- totalidad
- error
- etc.
- Incluso
- Cada
- todo
- ejemplo
- excitado
- Emoción
- existe
- costoso
- exportar
- factible
- Feature
- pocos
- Terrenos
- Archive
- archivos
- Finalmente
- en fin
- Incendió
- Nombre
- Fijar
- plano
- siguiendo
- hacia
- formulario
- formato
- Formularios
- encontrado
- marcos
- Desde
- ser completados
- diversión
- función
- a la fatiga
- funciones
- obtener
- conseguir
- Donar
- Diezmos y Ofrendas
- Buscar
- Go
- objetivo
- Va
- va
- agarrar
- Grupo procesos
- Grupo
- suceder
- Difícil
- cabeceras
- ayuda
- esta página
- Oculto
- jerarquía
- de alto nivel
- mantiene
- Con optimismo
- Horizontal
- Cómo
- HTML
- HTTPS
- ENFERMO
- imaginación
- importar
- importancia
- impresionante
- in
- Incluye
- inicial
- Las opciones de entrada
- integrar
- interesante
- Introducción
- IT
- artículos
- sí mismo
- JavaScript
- Clave
- Apellido
- más reciente
- Disposición
- aprendizaje
- Permíteme
- Nivel
- Li
- Vida
- luz
- que otros
- enlaces
- Lista
- para vivir
- carga
- cargador
- carga
- cargas
- Largo
- Mira
- MIRADAS
- búsqueda
- suerte
- maquinaria
- para lograr
- HACE
- Realizar
- administrar
- manual
- Margen
- Materia
- significa
- Salud Cerebral
- simplemente
- la fusión de
- Método
- podría
- mente
- Módulo
- más,
- movimiento
- emocionante
- múltiples
- nombre
- Llamado
- nav
- Navegar
- Navegación
- necesario
- ¿ Necesita ayuda
- Nuevo
- Next
- nodo
- normal
- número
- objeto
- objetos
- ONE
- solicite
- Otro
- de otra manera
- EL DESARROLLADOR
- particular
- camino
- Realizar
- recoger
- pieza
- piezas
- marcador de posición
- Platón
- Inteligencia de datos de Platón
- PlatónDatos
- punto
- Publicación
- Artículos
- la posibilidad
- Preparar
- Problema
- producir
- progresivo
- proyecto
- Promete
- perfecta
- protegido
- proporcionar
- proporciona un
- Tira
- poner
- pregunta
- Crudo
- Leer
- real
- vida real
- Realidad
- Rojo
- reorientar
- Independientemente
- permanecer
- recordarlo
- remove
- representación
- renders
- solicita
- Recursos
- Resultados
- volvemos
- volver
- devoluciones
- revertir
- Rico
- raíz
- Ruta
- rutas
- Ejecutar
- correr
- mismo
- Guardar
- ver
- sirve
- set
- Shadow
- Compartir
- compartido
- tienes
- Mostrar
- sencillos
- simplemente
- desde
- soltero
- diapositiva
- So
- algo
- algo
- Fuentes
- pasar
- comienzo
- fundó
- se quedó
- pasos
- Detener
- enviar
- soportes
- Superficie
- te
- mesa
- ETIQUETA
- ¡Prepárate!
- toma
- escuchar
- Tandem
- afectados
- decirles
- plantilla
- terminal
- El
- cosas
- a lo largo de
- equipo
- Título
- a
- juntos
- demasiado
- TOURS
- sorpresa
- verdadero
- GIRO
- Mecanografiado
- ui
- bajo
- Actualizar
- Actualizaciones
- Enlance
- us
- utilizan el
- Usuario
- propuesta de
- Valores
- diversos
- vía
- Ver
- esperar
- deseado
- formas
- web
- componentes web
- Desarrollo web
- ¿
- que
- complejo de salvador blanco
- seguirá
- ganar
- sin
- maravilloso
- Actividades:
- funciona
- valor
- se
- escribir
- Usted
- tú
- zephyrnet