Bun y HTMX son dos de las cosas más interesantes que están sucediendo en el software en este momento. Bollo es una plataforma JavaScript del lado del servidor todo en uno increíblemente rápida y HTMLX es una extensión HTML utilizada para crear interfaces simples y potentes. En este artículo, usaremos estas dos excelentes herramientas juntas para desarrollar una aplicación completa que utilice MongoDB para el almacenamiento de datos y Elysia como su servidor HTTP.
La pila tecnológica
Nuestro enfoque en este artículo es cómo interactúan los cuatro componentes principales de nuestra pila tecnológica. Los componentes son Bun, HTMX, Elysia y MongoDB. Esta pila le brinda una configuración rápida que es fácil de configurar y ágil de cambiar.
- Bun es un motor de ejecución, agrupador, administrador de paquetes y ejecutor de pruebas de JavaScript.
- Elysia es un servidor HTTP de alto rendimiento similar a Express pero creado para Bun.
- HTMX ofrece un enfoque novedoso para agregar interactividad detallada a HTML.
- MongoDB es el buque insignia No SQL almacén de datos orientado a documentos.
Tenga en cuenta que este artículo tiene dos partes. En la segunda mitad, incorporaremos Pug, el motor de plantillas HTMX, que usaremos para desarrollar algunas interacciones de front-end sofisticadas.
Instalación y configuración
Necesitarás instalar Bun.js, que es fácil de hacer. También ejecutaremos MongoDB como servicio junto con Bun en nuestra máquina de desarrollo. Puede lea sobre la instalación y configuración de MongoDB aquí. Una vez que tenga estos paquetes instalados, tanto el bun -v
y mongod -version
Los comandos deberían funcionar desde la línea de comandos.
A continuación, comencemos un nuevo proyecto:
$ bun create elysia iw-beh
esto dice bun
para crear un nuevo proyecto usando la plantilla Elysia. A plantilla en Bun es una manera conveniente de impulsar proyectos usando el create
dominio. Bun puede funcionar como Node, sin ninguna configuración, pero es bueno tener la configuración. (Obtenga más información sobre las plantillas de Bun aquí.)
Ahora, vaya al nuevo directorio: $ cd iw-beh
.
Y ejecute el proyecto tal como está: $ bun run src/index.js
.
Este último comando le dice bun
para ejecutar el src/index.js
archivo. El src/index.js
El archivo es el código para iniciar un servidor Elysia simple:
import { Elysia } from "elysia";
const app = new Elysia()
.get("https://www.infoworld.com/", () => "Hello Elysia")
.listen(3000);
console.log(
`🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`
);
En este archivo, importamos Elysia y lo usamos para crear una instancia de un nuevo servidor que escucha en el puerto 3000 y tiene un único GET
punto final en la raíz. Este punto final devuelve una cadena de texto: «Hola Elysia». El funcionamiento de todo esto es similar en espíritu a Express.
Si tú visitas localhost:3000
Recibirás un saludo sencillo:
Ahora que tenemos a Elysia ejecutándose, agreguemos el static
enchufar. Elysia tiene varios complementos para manejar escenarios comunes. En este caso, queremos servir algo de HTML desde el disco. El static
El complemento es justo lo que necesitamos:
$ bun add @elysiajs/static
Ahora el servidor Elysia ejecutando el static
El complemento debe servir a todo lo que hay en el iw-beh/public
directorio. Si colocamos un archivo HTML simple allí y visitamos localhost:3000/ public
veremos su contenido.
La magia de HTMX
A continuación, agreguemos una página HTMX a index.html
. Aquí hay uno simple del página de inicio HTML:
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<button hx-post="/clicked"
hx-trigger="click"
hx-target="#parent-div"
hx-swap="outerHTML">
Click Me!
</button>
Esta página muestra un botón. Cuando se hace clic, el botón realiza una llamada al servidor para el /clicked
punto final, y el botón se reemplaza con lo que esté en la respuesta. Todavía no hay nada allí, por lo que actualmente no hace nada.
Pero observe que todo esto sigue siendo HTML. Estamos realizando una llamada a la API y realizando un cambio DOM detallado sin ningún JavaScript. (El trabajo lo realiza JavaScript en el htmx.org
biblioteca que acabamos de importar, pero el punto es que no tenemos que preocuparnos por eso).
HTMX proporciona una sintaxis HTML que hace estas cosas usando solo tres atributos de elementos:
hx-post
envía una publicación cuando se activa para una solicitud AJAX.hx-target
dicehx-post
qué eventos ejecutan una solicitud AJAX.hx-swap
dice qué hacer cuando ocurre un evento AJAX. En este caso, reemplace el elemento actual con la respuesta.
¡Eso es bastante simple!
Elysia y MongoDB
Ahora creemos un punto final en Elysia que escribirá algo en MongoDB. Primero, agregaremos el controlador MongoDB para Bun:
bun add mongodb
A continuación, modifique src.index.ts
como esto:
import { Elysia } from "elysia";
import { staticPlugin } from '@elysiajs/static';
const { MongoClient } = require('mongodb');
const app = new Elysia()
.get("https://www.infoworld.com/", () => "Hello Elysia")
.get("/db", async () => {
const url = "mongodb://127.0.0.1:27017/quote?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+1.8.0";
const client = new MongoClient(url, { useUnifiedTopology: true });
try {
await client.connect();
const database = client.db('quote');
const collection = database.collection('quotes');
const stringData = "Thought is the grandchild of ignorance.";
const result = await collection.insertOne({"quote":stringData});
console.log(`String inserted with ID: ${result.insertedId}`);
} catch (error) {
console.error(error);
} finally {
await client.close();
}
return "OK";
})
.use(staticPlugin())
.listen(3000);
console.log(
`🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`
);
En este código, hemos agregado un /db
punto final que habla con MongoDB. En este momento, simplemente escribe una cotización en la base de datos de cotizaciones, dentro de la colección de cotizaciones. Puedes probar esto directamente yendo a localhost:3000/db
. Luego, puedes verificar que los datos estén en MongoDB:
$ mongosh
test> use quote
switched to db quote
quote> db.quotes.find()
[
{
_id: ObjectId("65ba936fd59e9c265cc8c092"),
quote: 'Thought is the grandchild of ignorance.',
author: 'Swami Venkatesananda'
}
]
Crear una tabla HTMX
Ahora que nos estamos conectando a la base de datos desde el front-end, creemos una tabla para generar las cotizaciones existentes. Como prueba rápida, agregaremos un punto final al servidor:
.get("/quotes", async () => {
const data = [
{ name: 'Alice' },
{ name: 'Bob' },
];
// Build the HTML list structure
let html="<ul>";
for (const item of data) {
html += `<li>${item.name}</li>`;
}
html += '</ul>';
return html
})
Y luego usarlo en nuestro index.html
:
<ul id="data-list"></ul>
<button hx-get="/quotes" hx-target="#data-list">Load Data</button>
Ahora, cuando cargas /public/index.html
y haga clic en el botón, se muestra la lista enviada desde el servidor. Tenga en cuenta que la emisión de HTML desde el punto final es diferente del patrón JSON común. Eso es por diseño. Nos estamos conformando a Principios RESTful aquí. HTMX tiene complementos para trabajar con puntos finales JSON, pero esto es más idiomático.
En nuestro punto final, simplemente estamos creando manualmente el HTML. En una aplicación real, probablemente usaríamos algún tipo de marco de plantillas JavaScript-HTML para hacer las cosas más manejables.
Ahora podemos recuperar los datos de la base de datos:
.get("/quotes", async () => {
const url = "mongodb://127.0.0.1:27017/quote?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+1.8.0";
const client = new MongoClient(url, { useUnifiedTopology: true });
try {
await client.connect();
const database = client.db('quote');
const collection = database.collection('quotes');
const quotes = await collection.find().toArray();
// Build the HTML table structure
let html="<table border="1">";
html += '<tr><th>Quote</th><th>Author</th></tr>';
for (const quote of quotes) {
html += `<tr><td>${quote.quote}</td><td>${quote.author}</td></tr>`;
}
html += '</table>';
return html;
} catch (error) {
console.error(error);
return "Error fetching quotes";
} finally {
await client.close();
}
})
En este punto final, recuperamos todas las cotizaciones existentes en la base de datos y las devolvemos como una simple tabla HTML. (Tenga en cuenta que en una aplicación real, extraeríamos el trabajo de conexión de la base de datos a un lugar central).
Verás algo como esto:
Esta captura de pantalla muestra la fila que insertamos cuando presionamos el /db
punto final antes.
Ahora, agreguemos la posibilidad de crear una nueva cotización. Aquí está el código de fondo (src/index.ts
):
app.post("/add-quote", async (req) => {
const url = "mongodb://127.0.0.1:27017/quote?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+1.8.0";
try {
const client = new MongoClient(url, { useUnifiedTopology: true });
await client.connect();
const database = client.db('quote');
const collection = database.collection('quotes');
const quote = req.body.quote;
const author = req.body.author;
await collection.insertOne({ quote, author });
return "Quote added successfully";
} catch (error) {
console.error(error);
return "Error adding quote";
} finally {
await client.close();
}
})
Y aquí está la parte delantera (public/index.html
):
<form hx-post="/add-quote">
<input type="text" name="quote" placeholder="Enter quote">
<input type="text" name="author" placeholder="Enter author">
<button type="submit">Add Quote</button>
Cuando ingresas un autor y una cita, y presionas Agregar cotización se agregará a la base de datos. Si haces clic Cargar datos, verá su actualización en la lista. Debería verse así:
Si observa tanto el servidor como el cliente de la aplicación hasta ahora, podrá ver que estamos haciendo un mínimo de trabajo. Lo más importante que HTMX ha simplificado aquí es el envío del formulario. El hx-post
El atributo reemplaza todo el trabajo de sacar los datos del formulario, ordenarlos en JSON y enviarlos con fetch()
o algo similar.
Conclusión
A medida que las cosas se vuelven más complejas, comienzas a depender de JavaScript en el cliente, incluso con HTMX. Por ejemplo, edición de filas en línea. Algunas cosas para las que esperaría usar JavaScript, como insertar las nuevas filas directamente en la tabla, se pueden hacer con HTMX. intercambiando. HTMX te permite hacer mucho con su sintaxis simple y luego recurrir a JavaScript cuando sea necesario.
El mayor cambio mental está en generar HTMX desde el servidor. Tienes tu elección de varios motores de plantillas HTML o JavaScript de alta gama para hacer esto mucho más fácil. Una vez que esté acostumbrado a trabajar con HTMX, será muy sencillo. Básicamente, ha eliminado toda la capa de conversión JSON de la pila.
Acabamos de realizar la prueba más rápida combinando bun, Elysia, HTMX y MongoDB, pero al menos deberías tener una idea de esta pila. Los componentes funcionan bien juntos sin fricciones innecesarias. Bun, Elysia y MongoDB hacen su trabajo silenciosamente, mientras que HTMX requiere un poco más de atención si está más acostumbrado a las API JSON. Encuentre el código para este artículo en mi repositorio de GitHub. Trabajaremos más con este ejemplo en el próximo artículo, donde usaremos Pug para agregar algunas interacciones sofisticadas a la mezcla.
Copyright © 2024 IDG Communications, Inc.