MVC con Deno 🦕 y Alosaur 🦖

Fecha de publicación: junio 12, 2020

Compártelo


Deno es una poderosa herramienta con la que podemos hacer grandes cosas. En esta entrada vamos a ver cómo desarrollar un pequeño sistema MVC con Deno y Alosaur, algo sencillo pero que nos ofrezca una idea de lo que Alosaur nos ofrece.

Para llevar a cabo este sistema MVC con Deno vamos a utilizar MySQL para tener acceso a una base de datos y Handlebars para el sistema de vistas, algo sencillo que cubrirá todas las necesidades para tener la base de un proyecto MVC.

No te pierdas el curso gratuito de Deno
Aprende a desarrollar una sencilla API REST con Deno

La estructura de nuestro sistema ¿¡SVC!?

La siguiente será la estructura que utilizaremos para nuestro proyecto, tendremos areas, controladores, servicios, vistas, variables de entorno y el archivo de configuración de denon.

Conectar Deno y MySQL

Para poder conectar con una base de datos MySQL desde Deno primero debemos crear nuestro archivo .env para almacenar variables de entorno.

Ahora simplemente debemos crear un archivo Database.ts que nos permita configurar la conexión con MySQL y un método query.

Inyección de dependencias con Deno: UserService

Ahora vamos a crear un servicio llamado UserService haciendo uso de DI para utilizar nuestra clase Database.

El decorador @Injectable nos permitirá que más adelante podamos utilizar el UserService en el constructor de nuestro Controller y que esta dependencia quede resuelta automáticamente.

Controladores en Alosaur con decoradores: HomeController

Ahora crea el controlador HomeController y añade el siguiente código.

Utilizando el decorador @Controller le decimos a nuestra clase que se convierta en un controlador de Alosaur, inyectamos el servicio UserService en el constructor.

En el método index obtenemos utilizamos el decorador @Get(‘/’) para decirle a este método que atienda una petición GET a la raíz, obtenemos los usuarios de base de datos y los pasamos a una vista index que todavía no tenemos.

Áreas en Alosaur, ¿módulos de Angular?

Alosaur está muy enfocado al diseño de aplicaciones que utiliza Angular, controladores, módulos, servicios etcétera, lo verás a continuación. Para ello crea el archivo HomeArea y añade el siguiente código.

Y ya tenemos aquí una aplicación Angular, no bien bien, ¡pero sí se parece mucho!

El motor de vistas Handlebars con Deno y Alosaur

Para que todo funcione necesitamos definir las templates de Handlebar, para ello empecemos por el layout, así que crea el archivo main.hbs y añade el siguiente código.

La idea es utilizar 2 archivos parciales, el head y el foot, y dentro añadir el contenido dinámico, así que crea los archivos foot.hbs y head.hbs respectivamente.

Finalmente crea la vista index.hbs la cual nos permitirá mostrar los usuarios que hemos obtenido de base de datos.

Configurar TypeScript para utilizar decoradores

Para poder utilizar decoradores en Deno simplemente crea en la raíz de tu proyecto un archivo tsconfig.json con el siguiente contenido.

Denon, Nodemon para Deno

Ahora vamos a crear un archivo denon.json que nos ayudará mucho mientras estamos desarrollando aplicaciones en Deno, gracias a Denon todos los cambios que hagamos en nuestro código serán reflejados en el navegador sin necesidad de volver a reiniciar nuestro servidor local.

Lo único que hacemos aquí es definir un script llamado start que al ejecutarlo ejecutará lo que hay dentro de la clave cmd utilizando el archivo de configuración tsconfig.json.

Configurar el punto de entrada de Deno

Para finalizar este pequeño proyecto sólo nos queda definir el archivo app.ts y añadir el siguiente código.

¡Voilà! Ya lo tenemos todo listo. En este archivo simplemente utilizamos el módulo Home, configuramos el sistema de vistas para utilizar Handlebars, le decimos a nuestra APP que los archivos estáticos estarán en el directorio statics y lanzamos el proyecto en el puerto 5000.

Para ver todo lo que hemos estado haciendo en el navegador simplemente ejecuta el siguiente comando en tu proyecto.

Espero que te haya gustado esta entrada y, sobretodo, que hayas aprendido a desarrollar un pequeño sistema MVC con Deno y Alosaur, si es así, te invito a que te registres en la plataforma para que puedas acceder a los cursos gratuitos que tenemos disponibles y estar atento a todo el material que estaremos publicando, entre ellos los nuevos cursos de Deno.

¿Quieres acceder a más de 100 cursos de PHP y JavaScript?

Vuejs, Laravel, NodeJS, WordPress, Serverless, React Native, Amazon Web Services y mucho más

Quiero hacerme Premium
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login