El día 13 de este mes se lanzó la versión 1.0 de Deno, el nuevo runtime de JavaScript y TypeScript que ya está teniendo mucho éxito entre los programadores. En las últimas semanas, las preguntas: “¿Qué es Deno?”, “¿Cuáles son sus características?” y “¿Va a sustituir a Node?” han surgido en la Web y seguramente ya te has hecho estas preguntas. Hablaremos de ellas en este artículo. Comenzaremos conociendo un poco mejor al creador de Deno.
Un poco de Historia
Deno fue creado por Ryan Dahl, quien también creó Node.js, sin duda el runtime de JavaScript más utilizado en el mundo hoy. Nota que estas dos tecnologías están muy conectadas. De hecho, el nombre “Deno” es un gran juego de palabras con “Node”.
Durante la JSConf 2018, Ryan dio una charla con el tema “10 Things I Regret About Node.js” (10 Cosas que Lamento (Arrepiento) por Node.js, en traducción libre). Durante esta charla, anunció Deno como su nuevo proyecto. Ahora, aproximadamente dos años después, la primera versión de Deno está disponible. Al analizar la estructura de Deno, notamos características muy interesantes. Veamos algunas de ellas juntos.
Características de Deno
Engine
Deno fue desarrollado con el lenguaje Rust y utiliza el V8, motor de renderización de Google Chrome, en su estructura. ¿Puedes imaginar otra tecnología que use V8? Así es, Node.js también fue desarrollado sobre él.
Seguridad
Cuando comenzamos a usar Deno, desde el principio notamos un pequeño detalle: no podemos conectarnos a la Red ni acceder a algunos recursos del hardware de la computadora por defecto. Deno no permite que hagamos esto, a menos que dejemos claro qué recurso queremos acceder a través de flags, como veremos en un momento.
Puede que al principio nos parezca extraño tener que dar permiso para acceder a recursos de nuestra computadora, pero esto puede traernos algunos beneficios, como reducir la posibilidad de sufrir algún ataque en nuestro servidor.
Importación de Módulos
Al igual que Node, Deno tiene módulos nativos (Bibliotecas Estándar) y módulos de terceros. Sin embargo, hay una diferencia en la forma en que importan tales módulos a nuestro código. Node utiliza el conocido npm (Node Package Manager) para descargar paquetes de la Web. A través de npm almacenamos las herramientas descargadas en la carpeta node_modules, es decir, de manera local. Deno, por otro lado, realiza la importación de los módulos a través de una URL, de manera externa. Si ya has usado una CDN, sabes lo práctico que es esto.
Esta característica puede traernos algunas ventajas. Por ejemplo: algunos programadores se sienten molestos con el peso que la carpeta node_modules trae al servidor (algunos dicen que es más pesada que un agujero negro ?). Con las importaciones externas, no será necesario preocuparse por esta cuestión.
Imports del ES6
Aún hablando de importación de módulos, vemos que Deno utiliza los imports del ES6 en su estructura. Esto significa que si ya tienes el hábito de usar import / export en tus códigos JavaScript, no sentirás dificultades al trabajar con Deno.
Soporte a TypeScript
¿Te diste cuenta de que al inicio del artículo dijimos que Deno es un runtime de JavaScript y TypeScript? Deno también tiene soporte para este superset de JavaScript. Sabemos que TypeScript ha crecido bastante en los últimos años y nos ayuda mucho cuando necesitamos validar los tipos de variables en JavaScript, además de otras ventajas.
Si deseas usar solo JavaScript con Deno no hay problema, pero también podrás usar archivos TypeScript si lo prefieres.
Async/Await y Promises
Deno nos permite trabajar con funciones asíncronas y promesas de manera simple. Sabemos que usar código asíncrono es muy útil y JavaScript tiene una larga historia con este concepto. Además, no olvides consultar nuestra serie sobre JavaScript Asíncrono aquí en nuestro Blog.
Después de ver algunas de las características de Deno, ¿qué te parece si creamos un pequeño ejemplo con él? Empecemos con su instalación.
Instalación
Para instalar Deno, utilizaremos Chocolatey. Puedes aprender cómo instalarlo en este artículo: Conociendo Chocolatey: el Gestor de Paquetes de Windows
Usaremos el siguiente comando:
choco install deno
Si tienes una computadora Mac, puedes usar HomeBrew para realizar la instalación. Si estás usando Linux, puedes usar curl.
Para verificar si Deno ha sido instalado, ejecuta lo siguiente:
deno --version
Se devolverá lo siguiente:
Ahora estamos listos para nuestro primer ejemplo.
Primer Código con Deno - Creando un Servidor Web
Crearemos un archivo llamado first-server.js. Para crear un servidor, necesitaremos el módulo serve de Deno. Para ello, usaremos la siguiente línea:
import { serve } from 'https://deno.land/std/http/server.ts'
En este código ya vemos las importaciones del ES6 en práctica. Además, nota que usamos el concepto de destructuring para cargar solo el módulo serve del paquete completo server.ts. Por último, observa que la importación proviene de una URL, de los servidores del sitio de Deno.
Crearemos la configuración del servidor con la siguiente línea:
const server = serve({ port: 8000 });
Con este código solo aplicamos el módulo serve para crear un servidor Web y definimos que será accesible a través del puerto 8000. Podríamos definir el puerto que quisiéramos. Asignamos este servidor a la constante server.
Cuando el servidor inicie, querrás ver un mensaje en la consola, como un feedback de que todo está bien. Para ello, solo hay que añadir un console.log() en el código:
console.log('Server running...');
Ahora, necesitamos decir qué devolverá el servidor. Para ello, Deno utiliza un bucle for, más específicamente un for of. Quedará de la siguiente forma:
for await (const req of server) {
req.respond({
body: '<h1>Hello Hcode</h1>'
});
}
Notarás que usamos await en este for(). Por lo tanto, ya estamos trabajando con código asíncrono. Este código define que mientras haya solicitudes en nuestro servidor, se devolverá un mensaje de bienvenida.
Nuestro código está listo. Para probarlo, ejecutemos el siguiente comando:
deno run first-server.js
Esta estructura es muy parecida con npm, que tiene el comando npm run. Cuando ejecutamos este comando, obtenemos lo siguiente:
Se produjo un error. Informa que Deno no tiene permiso para acceder a la Red. ¿Recuerdas que hablamos hace un momento sobre la cuestión de la seguridad en Deno, que no accede a Internet por defecto? Es necesario dar permiso para que lo haga. En este momento vemos la importancia de las flags en Deno. Vamos a ejecutar el comando nuevamente, pero ahora estará así:
deno run --allow-net first-server.js
Con la flag “--allow-net” damos el permiso necesario para que Deno acceda a nuestra Red. Nota que indicamos la flag antes del nombre del archivo. Es importante recordar este orden para que el comando funcione bien. Además, observa que dejamos claro no solo el nombre del archivo JS, sino también su extensión. Deno exige que el nombre del archivo esté “completo”. Al ejecutar el comando nuevamente, vemos lo siguiente:
¡Ahora sí el servidor está funcionando sin problemas! Para acceder al servidor, necesitamos escribir localhost:8000 en nuestro navegador. Si definiste otro puerto, debes especificarlo después de los dos puntos. Al acceder al servidor, vemos el siguiente resultado:
¡Nuestro código está funcionando! ¿Qué te parece la estructura de nuestro primer archivo usando Deno? Siempre es genial crear nuestro primer “Hello World” usando cualquier tecnología. Pero, ¿qué tal si creamos un segundo ejemplo, explorando un poco más los recursos de Deno? Vamos a hacer eso ahora.
Segundo Código con Deno - Creando un Generador de QR Code
Nuestro segundo ejemplo se llamará qrcode-generator.js. También creará un servidor Web, pero devolveremos una imagen de un código QR. Para ello, realizaremos la importación de un módulo de terceros orientado a la generación de estos códigos. Las primeras líneas del archivo quedarán así:
import { qrcode } from 'https://deno.land/x/qrcode/mod.ts'
import { serve } from 'https://deno.land/std/http/server.ts'
Luego, crearemos el servidor:
const myServer = serve({ port: 8000 });
La siguiente configuración será crear el contenido del código QR. Para ello, utilizaremos este código:
let base64 = await qrcode('https://hcode.com.br', {
size: 300
})
El método qrcode() es la llamada al módulo que importamos al inicio del código. El primer parámetro que espera es la cadena que se incrustará en el QR Code. El segundo parámetro es un objeto de configuraciones, como el tamaño que tendrá el código. Retorna una promesa, por eso usamos await en esta línea también.
Por último, añadiremos el console.log() como mensaje de que el servidor inició sin problemas y también el for of para esperar las solicitudes. Usaremos este código:
console.log('Server running...');
for await (const request of myServer) {
request.respond({
headers: new Headers({
'Content-Type': 'text/html'
}),
body: `
<div style="display: flex; justify-content: center; margin-top: 30px;">
<img src="${base64}" />
</div>
`
});
}
Con este código definimos que el servidor devolverá una imagen, que estará centrada en la página y tendrá como contenido el valor del QR Code generado. Podemos ver algunos puntos interesantes en este código. Por ejemplo: vimos que podemos definir cuál será el tipo de contenido de la página a través de la opción headers. Además, estamos devolviendo el body utilizando el recurso de template string.
Iniciaremos este servidor con el siguiente comando:
deno run --allow-net qrcode-generator.js
Ahora, al acceder a localhost:8000, vemos lo siguiente:
¡Nuestro QR Code fue generado correctamente! Si lo deseas, puedes intentar escanear este código con tu celular ?. Increíble, ¿no? Pero creo que podemos mejorar un poco más este ejemplo. El contenido del QR Code es estático. ¿Y si pudiéramos informar la URL a añadir al código de manera dinámica? Vamos a implementar esta funcionalidad en el código ahora.
Puedes informar este parámetro a Deno a través de la Terminal. Si ya has trabajado con Node, probablemente conozcas la variable process.argv. Podemos hacer lo mismo con Deno, con el siguiente código:
let args = Deno.args;
Bastante simple, ¿no crees? En este concepto también vemos una pequeña diferencia entre Node y Deno. process.argv identifica el comando node y cualquier otro comando necesario como un argumento. Así, generalmente accedemos a la posición 2 o 3 de este array que se devuelve. Por otro lado, Deno puede entender que los comandos deno y run no son argumentos. Por lo tanto, el primer argumento que indiquemos será la posición 0 del array, lo que simplifica nuestro código. Vamos a informar la variable args al método qrcode(), de esta forma:
let base64 = await qrcode(args[0], {
size: 300
})
Ahora podemos especificar la URL que deseamos crear. Por ejemplo, podemos ejecutar el siguiente comando:
deno run --allow-net qrcode-generator.js https://youtube.com/hcodebrasil
Y ahora al acceder a localhost:8000, veremos el siguiente resultado:
Si escaneas este código, serás dirigido al YouTube de Hcode.
Puedes encontrar los códigos desarrollados en este artículo en nuestro GitHub.
Así vemos que podemos hacer muchas cosas interesantes con Deno. Después de ver estos ejemplos, queda una pregunta por responder.
Entonces, ¿Deno va a acabar con Node?
Es común escuchar esta pregunta cuando se lanza una nueva herramienta. A pesar de que Deno ya se muestra como un excelente entorno de desarrollo, sabemos que Node ha estado en el mercado durante mucho más tiempo. Después de todo, Node fue creado en 2009, hace exactamente 11 años. Es una tecnología muy madura y ampliamente utilizada. El propio Ryan Dahl comentó sobre esta diferencia en el tiempo de desarrollo de las dos herramientas en el artículo de lanzamiento de Deno. Además, Node es parte de la OpenJS Foundation.
Podemos decir que la gran pregunta no es si Deno va a acabar con Node, sino cómo este nuevo runtime ayudará al Desarrollo Web. Vemos que Deno nos ha traído varias funcionalidades interesantes, que ayudan en el rendimiento de nuestra aplicación. Al ser un nuevo “competidor”, la tendencia es que Node también se adapte y aporte nuevas características interesantes. La verdad es que quienes se benefician en este asunto somos nosotros, que trabajamos con estas tecnologías.
Aún escucharemos hablar bastante sobre Node y sobre Deno. Lo que nos queda es seguir estudiando estos dos runtimes increíbles y continuar usando sus recursos para crear proyectos modernos para la Web.
Hasta el próximo artículo :)