Las features de Astro en su última versión están dando un paso adelante del generador de webs estáticas inicial, y por supuesto que, en Melt teníamos que probarlo y dejarte nuestras primeras impresiones. 📝👀 ¡Los detalles aquí!
Desde que salió Astro.build como generador de sitios estáticos hemos puesto en sospecha su poco uso de JavaScript, incluso hicimos un video donde algunos miembros de meltstudio.co debatían su utilidad [conócelo aquí 🤭] y luego amamos Astro al conocer su poder incluso mayor a Next.js, Vue y otros marcos web (en algunas comparaciones).
Los atractivos de Astro iniciales los puedes encontrar en nuestro primer blog donde hablamos sobre ¿Qué es Astro y cómo usar el framework web para sitios web estáticos?: Construye React Apps con Astro (Cero JavaScript) ¡Guía en español!.
Una de las curiosidades de Astro, explicadas en el blog anterior, es que no utiliza JS de forma predeterminada, que no pesan los proyectos y que los componentes no se renderizan en el cliente, sino que compilan usando renderización del lado del server (SSR).
Lo que a los devs les encanta de Astro en la versión 4, es la potencia de las nuevas features con la API View Transitions de Astro 3 ¡ya estable! que sumadas a la velocidad del desarrollo propia de Astro y las mejores en las integraciones con frameworks: React, Vue, Svelte y Solid, etc... le dan un plus para Destacar de la competencia.
Y por supuesto su nueva base de datos AstroDB
Una base de datos SQL completamente diseñada para ser administrada exclusivamente por web apps de Astro.build: Construido en LibSQL de SQLite mantenida por el equipo de base de datos de Turso.
Esta base de datos SQLite puede ser ejecutada, administrada localmente y sincronizada en la nube usando Astro Studio: el hosting de Astro DB (gratis 1 GB de almacenamiento, mil millones de lecturas de filasy un millón de escrituras de filas por mes).
Probamos las características en el sgt Melt Tutorial y estas son las primeras impresiones:
Tutorial AstroDB y Astro Studio
1. Instalación:
// ejecuta el comando
npx astro add db 2. Crea una cuenta Astro Studio, con la CLI, conecta tu proyecto local:
Crea un token
ASTRO_STUDIO_APP_TOKEN desde la nube y ponlo en tu .env3. Crea una base de datos en el archivo db/config.ts y define tus campos
const Post = defineTable({
columns: {
title: column.text(),
author: column.text(),
content: column.text(),
}
});
const Comment = defineTable({
columns: {
authorId: column.text(),
postId: column.text(),
body: column.text(),
publishDate: column.date(),
}
});
export default defineDb({
tables: { Posts, Comment },
});Para crear datos locales, inicializa la base de datos dentro de
db/seed.ts
// Y para enviar a producción ejecuta:
astro db execute db/seed.ts --remote
// Si quieres sincronizar:
astro db push¿Quieres mostrar solo las primeras 10 publicaciones?
const posts = await db.select().from(Posts).limit(10);¿Ordenarlos por título?
const posts = await db.select().from(Posts).orderBy(Posts.title);Por el momento sólo es compatible con GitHub, aún así, tu código con Astro es más legible, conciso y fácil de entender ♡ ¡Pásate al lado de los astronautas! 🧑🏻🚀🌕
¿Dónde Practicar Algoritmos?
Este TOP 5, publicado también en nuestras redes sociales (que por cierto, ¡síguenos! sacamos tips de desarrollo todas las semanas) recopila las mejores plataformas para practicar algoritmos ✨, con opción gratuita, path de estudios y algunas en español ¡dale click! 👌🏻
¡Gracias por leer!
📍 Conéctate con nosotros en instagram👇