Frameworks

Configuración inicial

Instalación de Deno

En primer lugar, necesitaremos instalar Deno en nuestro sistema. Puedes hacerlo ejecutando el siguiente comando en tu terminal:

curl -fsSL https://deno.land/x/install/install.sh | sh

Configuración del entorno de desarrollo

Tras la instalación, asegúrate de configurar tu entorno de desarrollo según tus preferencias. Puedes utilizar tu editor de código favorito junto con las extensiones adecuadas para TypeScript y Deno.

Creación de un proyecto básico

Estructura del proyecto

Para empezar, crearemos la estructura básica de nuestro proyecto. Abre tu terminal y ejecuta los siguientes comandos:

mkdir mi-aplicacion-deno //creamos el directorio de trabajo
cd mi-aplicacion-deno //cambiamos a la nueva carpeta
touch app.ts //creamos el archivo app.ts

Creación de un “Hola Mundo”

Dentro del archivo app.ts, escribe el siguiente código para imprimir “Hola Mundo” en la consola:

console.log("¡Hola Mundo desde Deno!");

Para ejecutar nuestra aplicación, simplemente ejecuta el siguiente comando en la terminal:

deno run app.ts

Y verás el mensaje “¡Hola Mundo desde Deno!” impreso en la terminal de consola.

Para ampliar conocimientos sobre Deno podemos elaborar un ejemplo más complejo, como por ejemplo un pequeño programa que reciba argumentos desde la terminal y devuelva un resultado, para ello codificamos el siguiente archivo:

// Importamos el módulo `flags` para parsear los argumentos de la línea de comandos
import { parse } from "https://deno.land/std/flags/mod.ts";

// Parseamos los argumentos de la línea de comandos
const {
  _: [num1, num2],
} = parse(Deno.args);

// Verificamos que se proporcionen dos números como argumentos
if (!num1 || !num2) {
  console.error("Por favor, proporciona dos números como argumentos.");
  Deno.exit(1);
}

// Convertimos los argumentos en números enteros
const n1 = parseInt(num1);
const n2 = parseInt(num2);

// Verificamos que los argumentos sean números válidos
if (isNaN(n1) || isNaN(n2)) {
  console.error("Los argumentos deben ser números válidos.");
  Deno.exit(1);
}

// Calculamos la suma de los números
const suma = n1 + n2;

// Mostramos la suma en la consola
console.log(`La suma de ${n1} y ${n2} es: ${suma}`);

Para ejecutar este script, guarda el código en un archivo con extensión .ts (por ejemplo, suma.ts) y luego ejecútalo desde la terminal de la siguiente manera:

deno run suma.ts 10 20

Este comando ejecutará el script suma.ts y pasará los números 10 y 20 como argumentos. La consola mostrará entonces el resultado de la suma de estos dos números.

Uso de módulos de terceros

Importación de módulos

Deno nos permite importar módulos de terceros directamente desde una URL.

Por ejemplo, para importar el módulo std/http, debemos declarar el módulo de la siguiente forma:

// Importamos el módulo `serve` de la biblioteca estándar de Deno para crear un servidor HTTP
import { serve } from "https://deno.land/std/http/server.ts";

// Definimos el puerto en el que queremos que nuestro servidor escuche las solicitudes
const PORT = 8000;

// Creamos un nuevo servidor HTTP que escuche en el puerto especificado
const server = serve({ port: PORT });
console.log(`Servidor escuchando en el puerto ${PORT}...`);

// Función asincrónica para manejar las solicitudes entrantes
for await (const req of server) {
  // Enviamos una respuesta HTTP con el código de estado 200 (OK) y el cuerpo "¡Hola desde Deno!"
  req.respond({ body: "¡Hola desde Deno!" });
}

Módulos populares

Se puede ampliar la funcionalidad de Deno con módulos, en esta lista puedes ver los más conocidos:

• Oak: es un framework web minimalista y modular para Deno, inspirado en Koa.js (un popular framework para Node.js). Proporciona una manera elegante y eficiente de crear aplicaciones web en Deno, con un enfoque en la simplicidad y la flexibilidad.

• DenoDB: es un ORM (Object-Relational Mapping) para Deno, que proporciona una capa de abstracción sobre la base de datos para facilitar las operaciones CRUD. Soporta bases de datos SQL como PostgreSQL, MySQL y SQLite.

• Mongo: es un cliente MongoDB para Deno, que permite interactuar con bases de datos MongoDB de manera sencilla y eficiente. Proporciona una API intuitiva y fácil de usar para realizar operaciones CRUD y trabajar con documentos BSON.

• Deno-GraphQL: es una implementación de GraphQL para Deno, que permite construir APIs GraphQL de forma fácil y eficiente. Proporciona herramientas para definir esquemas, resolver consultas y realizar validaciones, todo ello con el poder de TypeScript.

• OakCors: es un middleware para Oak que proporciona compatibilidad con CORS (Cross-Origin Resource Sharing) en aplicaciones web desarrolladas con Oak. Permite configurar políticas CORS de forma flexible para controlar el acceso a recursos desde dominios externos.

Puedes explorar más módulos y herramientas en el sitio web oficial o en el repositorio de módulos de Deno.

Manejo de rutas y middleware

Deno permite la gestión de rutas y los permisos asociados de una forma simplificada.

Creación de rutas

La creación de rutas en Deno es muy sencillo, este es un ejemplo de creación de rutas con el framework web Oak:

import { Application, Router } from "https://deno.land/x/oak/mod.ts";

const app = new Application();
const router = new Router();

router.get("/", (ctx) => {
  ctx.response.body = "¡Hola desde la ruta Raíz";
});

app.use(router.routes());
app.use(router.allowedMethods());

Cuando accedemos a nuestra url +’/’, devolverá ese mensaje.

Uso de middleware

Un middleware se define como una función que se usa para procesar y manipular solicitudes HTTP entrantes antes de llegar a su destino final o antes de enviar una respuesta al cliente. Los middlewares son componentes clave en el desarrollo de aplicaciones web, ya que permiten realizar diversas tareas como la autenticación, la validación de datos, el registro de solicitudes, la gestión de cookies, …

En Deno, podemos utilizar middleware con el framework Oak de la siguiente manera:

app.use(async (ctx, next) => {
  console.log(`URL solicitada: ${ctx.request.url}`);
  await next();
});

De esta forma podemos establecer permisos según el usuario logueado o diferentes acciones de forma dinámica.

Interacción con una base de datos

Conexión a bases de datos

Para interactuar con una base de datos en Deno, podemos utilizar módulos como mongo para MongoDB o DenoDB para bases de datos SQL. Este es un ejemplo de cómo conectarse a una base de datos MongoDB:

import { MongoClient } from "https://deno.land/x/mongo/mod.ts";

const client = new MongoClient();
await client.connect("mongodb://localhost:27017");

const db = client.database("mi-base-de-datos");

Operaciones CRUD

Tras la conexión a base de datos, podemos realizar operaciones CRUD fácilmente.

Por ejemplo, para insertar un documento en una colección:

const usuarios = db.collection("usuarios");
await usuarios.insertOne({ nombre: "Juan", edad: 30 });

Añadiendo una interfaz de usuario

Servir archivos estáticos

Para servir archivos estáticos, como HTML, CSS y JavaScript, podemos utilizar la función serveStatic del Framework Oak. Por ejemplo:

import { Application, send } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use(async (ctx) => {
  await send(ctx, ctx.request.url.pathname, {
    root: `${Deno.cwd()}/public`,
    index: "index.html",
  });
});

Frameworks de frontend

Para construir interfaces de usuario más complejas, podemos utilizar frameworks frontend como React, Vue.js o Svelte junto a Deno.

Para integrar un framework necesitas importar los scripts necesarios en tus archivos HTML, aquí tienes un ejemplo de cómo puedes utilizar el framework React junto con Deno para construir una aplicación web:

1. Instala React y ReactDOM

   Primero, asegúrate de tener instalado React y ReactDOM. Puedes hacerlo ejecutando los siguientes comandos en tu terminal:

   npm install react react-dom
   

2. Crea un archivo HTML

   Crea un archivo HTML (index.html) donde incluirás tu aplicación React:

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>React App con Deno</title>
     </head>
     <body>
       <div id="root"></div>
       <script type="module" src="app.js"></script>
     </body>
   </html>
   

3. Crea un archivo JavaScript (app.js) para tu aplicación React

   En este archivo, importa React y ReactDOM, y crea tu componente de React:

   import React from "https://dev.jspm.io/react";
   import ReactDOM from "https://dev.jspm.io/react-dom";
   
   function App() {
     return (
       <div>
         <h1>¡Hola desde React y Deno!</h1>
         <p>Esta es una aplicación React básica desarrollada con Deno.</p>
       </div>
     );
   }
   
   ReactDOM.render(<App />, document.getElementById("root"));
   

4. Ejecuta tu aplicación con Deno

   Abre tu terminal y ejecuta el siguiente comando para iniciar un servidor HTTP local con Deno:

   deno run --allow-net --allow-read server.ts
   

   Asegúrate de tener el archivo server.ts que sirva el archivo HTML (index.html) en el puerto que prefieras.

5. Abre tu navegador

   Abre tu navegador web y navega a la URL donde se está ejecutando tu aplicación (por ejemplo, http://localhost:8000).

Con este ejemplo, puedes comenzar a construir aplicaciones web más complejas utilizando React como tu framework frontend y Deno como tu entorno de ejecución.

Pruebas y depuración

Herramientas de pruebas

Deno incluye una herramienta de pruebas integrada llamada Deno test, que permite escribir y ejecutar pruebas unitarias fácilmente. Puedes escribir tus pruebas en archivos separados y ejecutarlas con el comando deno test.

Este es un ejemplo de cómo podrías escribir un test unitario en Deno utilizando la herramienta de pruebas integrada deno test.

1. Crea un archivo sumar.ts con la función a probar

   // sumar.ts
   export function sumar(a: number, b: number): number {
     return a + b;
   }
   

2. Crea un archivo sumar_test.ts para escribir el test unitario

   // sumar_test.ts
   import { sumar } from "./sumar.ts";
   import { assertEquals } from "https://deno.land/std/testing/asserts.ts";
   
   // Definimos nuestra suite de pruebas
   Deno.test("Prueba de la función sumar", () => {
     // Probamos la función sumar con diferentes valores de entrada
     assertEquals(sumar(1, 1), 2); // Esperamos que 1 + 1 sea igual a 2
     assertEquals(sumar(5, 3), 8); // Esperamos que 5 + 3 sea igual a 8
     assertEquals(sumar(-1, 1), 0); // Esperamos que -1 + 1 sea igual a 0
   });
   

3. Ejecuta el test con deno test

   Desde la terminal, navega al directorio donde tienes los archivos sumar.ts y sumar_test.ts y ejecuta el siguiente comando:

   deno test
   

   Deno ejecutará todos los tests encontrados en el directorio actual y sus subdirectorios. En este caso, ejecutará Prueba de la función sumar y mostrará los resultados en la consola.

   Si la función sumar funciona correctamente, verás un mensaje indicando que todas las pruebas pasaron. Si alguna prueba falla, Deno mostrará un mensaje de error indicando la razón del fallo.

Depuración en Deno

Para depurar nuestras aplicaciones Deno, podemos utilizar las herramientas de depuración integradas en nuestro editor de código o ejecutar Deno en modo de depuración con el flag —inspect.

Esto permite conectar un depurador externo, como Chrome DevTools o Node.js Inspector, para inspeccionar y depurar el código en tiempo real. Al utilizar esta opción, podemos realizar un seguimiento detallado del flujo de ejecución de nuestro programa, inspeccionar el estado de las variables y detectar posibles problemas de manera eficiente.

Despliegue de la aplicación

Opciones de despliegue

Una vez que nuestra aplicación esté operativa, podemos desplegarla en varios entornos, como servidores VPS, plataformas de contenedores como Docker, o servicios de despliegue en la nube como Heroku o Vercel.

Automatización del despliegue

Para automatizar el proceso de despliegue, podemos utilizar herramientas de integración continua como GitHub Actions o GitLab CI/CD para construir, probar y desplegar nuestra aplicación automáticamente cada vez que hacemos un push a nuestro repositorio.

Conclusiones

En esta guía, hemos aprendido cómo desarrollar una aplicación web básica con Deno, desde la instalación hasta el despliegue, para familiarizarnos con la plataforma, desde aspectos básicos a otros más avanzados, como testing o la implementación de librerías de terceros.

Deno es un entorno de ejecución para JavaScript y TypeScript que se ejecuta en el motor V8 de Chrome. Aunque comparte similitudes con Node.js, esta alternativa destaca por sus características de seguridad incorporadas, incluyendo un modelo de permisos predefinidos y la ausencia de acceso a la API del sistema operativo por defecto. Además, Deno facilita la gestión de dependencias al permitir la importación de módulos directamente desde una URL, eliminando la necesidad de un administrador de paquetes separado

En resumen, Deno ofrece un entorno moderno y seguro para el desarrollo de aplicaciones web, y su creciente ecosistema de módulos y herramientas lo convierten en una opción atractiva para los desarrolladores.

Para obtener más información, recuerda visitar el blog de OpenWebinars, donde encontrarás, entre otros, el artículo: Qué es Deno y qué lo hace diferente que te permitirá conocer más sobre este entorno.