Lista de tareas en Vue con backend Node+Knex. (I) Introducción y bootstraping

{{[{[[{{}}({})]]}]}} — Hello World en Javascript.

He conseguido sacar algo en claro del “Frontend framework hell” en el que Javascript nos ha metido a todos los entusiastas de las nuevas tecnologías en los últimos años.

He desarrollado una nueva SPA, con React y React DOM para describir el DOM con JSX ES2016+ compilado en Babel y empaquetado con webpack. Para el backend utilizo Node+Express con Mongoose sobre Mongodb como ORM y Passport para sistema de autenticación. Todo esto securizado con Helmet. Utilizo un sistema de condensación de Fluzo con Jandeporer. Vale, esto último es falso.

Javascript ha evolucionado mucho en los últimos años, y seguir el ritmo a la cantidad de frameworks y nuevas tecnologías que aparecen es ya un trabajo a jornada completa. Lejos quedan los tiempos del HTML+CSS, y hoy quien no utiliza SASS o LESS es poco menos que un paria. Así que he decidido sacar un poco de tiempo y meterme en esta sopa de letras para sacar algo en claro, y de paso, escribir un poco sobre mis conclusiones y el grupo de tecnologías que he elegido para la web. “Choose your poison”.

Para dejarme a mi mismo un Know-How y de paso poder ayudar a alguien que esté en mi misma situación, voy a crear una Lista de Tareas en Javascript a modo de tutorial. Estoy seguro de que para cuando este tutorial termine, ya habrán salido 5 o 6 nuevos frameworks de moda, y esto ya estará desactualizado, pero vamos a intentarlo.

Listado de tecnologías

Empecemos por el Frontend:

  • Vue.js, un estupendo framework de Frontend basado en el ViewModel.
  • Axios, una librería para realizar peticiones REST.
  • Bootstrap, para formatear nuestro Frontend y hacerlo reactivo.
  • SCSS , una mejora importante sobre CSS.

Y el Backend:

  • Node.js+Express como servidor REST.
  • Passport para la autentificación.
  • Knex actuando como abstracción ante la base de datos.
  • PostgreSQL como base de datos.

Creando el proyecto

Empezaremos creando el backend.

Necesitaremos node y npm, los cuales instalaremos con el gestor de paquetes que más nos guste( En mi caso pacman)

pacman -S node npm

Una vez termine, debemos instalar las utilidades para crear el proyecto.

sudo npm install knex express-generator -g

El flag -g instalará estos paquetes de forma global en el sistema.

Una vez instalado express generator, vamos a crear nuestro boilerplate:

express backend && cd backend && npm install

el comando express generará un boilerplate operativo, cuyas dependencias deberemos instalar con npm install

Si ahora ejecutamos npm start y visitamos localhost:3000 tendremos una sencilla página de prueba para comprobar que node+express funcionan correctamente.

Vamos a instalar ahora el driver de la base de datos y el ORM.

npm install pg knex --save

El flag --save guardará estos paquetes en el listado de dependencias.

Para no tener que instalar PostgreSQL en la máquina de desarrollo, utilizaremos un servicio gratuito: ElephantSQL , donde crearemos una cuenta y nuestra base de datos. El límite para cuentas gratuitas es de 20MB, de sobra para este proyecto.

En la siguiente parte empezaremos a crear nuestra base de datos y a enlazarla con Node a través de Knex.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.