Docker ha evolucionado a tal punto de ser una herramienta indispensable no solo para el despliegue de aplicaciones sino también, como veremos en este caso, como una herramienta que facilite el desarrollo.

El problema

En muchas ocasiones como desarrolladores tenemos que trabajar en múltiples proyectos y en diferentes lenguajes y frameworks, a esto se suma una gran cantidad de herramientas y librerías que tenemos que instalar en nuestro sistema ya sea para aprender cosas nuevas o por requerimiento del proyecto. Esto es necesario, y una vez que el proyecto esta funcionado de manera adecuada todo es grandioso, pero que tal si por alguna razón tenemos que cambiar de computador o migrar a otro sistema operativo, el proceso que tenemos que hacer para poner nuevamente nuestro entorno de desarrollo en marcha puede consumir mucho tiempo y esfuerzo.

¿Por qué utilizar Docker con Docker Compose?

Docker y Docker Compose nos brindan algunos beneficios:

• No necesitamos instalar ni mantener software adicional en nuestro equipo
• Podemos tener todo nuestro entorno de desarrollo en un único repositorio, por ejemplo, tenemos el backend, el frontend y las configuraciones de la base de datos en un mismo repositorio lo que facilita a los desarrolladores el poder colaborar de mejor manera en el proyecto.
• Levantar todo el entorno de desarrollo se limita a un solo comando docker-compose up

Pero no todo es color de rosa, también tenemos una desventaja que está enfocada al rendimiento, ya que a pesar de que los contenedores están enfocados a ser eficientes, siguen consumiendo recursos de la maquina anfitrión tales como procesador y memoria por lo que si la cantidad de contenedores que están corriendo al mismo tiempo es grande o si los contenedores son pesados al momento de crearse y levantarse, podrían llevar a cuelgues del sistema y cosas similares.

Instalación

Docker Compose depende del motor de Docker (Docker Engine) por lo que antes de empezar a utilizar Docker Compose debemos ya tener instalado Docker en el Sistema.

En Windows o en Mac: Docker Compose ya viene incluido dentro del paquete de instalación de Docker Desktop.

En Linux primero debemos instalar el motor de Docker y luego seguir unos sencillos pasos descritos en la documentación oficial: https://docs.docker.com/engine/install/

Ejemplo práctico

El código de este ejemplo se encuentra disponible en github: https://github.com/JhymerMartinez/tutorial-docker-compose

Vamos a construir una aplicación para gestionar listas de tareas, tanto el backend como el frontend están en carpetas distintas e independientes. Los componentes que conforman este ejemplo son:

• Backend: Api Rest construida en Express JS encargada de la creación, recuperación y eliminación de tareas.
• Base de Datos: MongoDB será la base de datos no relacional donde se almacenarán los datos.
• Frontend: Construido en React JS y es el encargado de presentar de manera visual las tareas mediante el uso de componentes.

Paso 1. Agregar los Dockerfile

El Dockerfile es un archivo en texto plano en el cual se especifica una serie de instrucciones a manera de receta para crear una imagen. A una imagen la podemos considerar como una plantilla base para crear el contenedor que contendrá el código de nuestra aplicación.

En el Backend:

# Imagen base de node con una distribución ligera 
# de Linux llamada Alpine
FROM node:12.16.0-alpine

# Directorio que se crea en el contenedor y 
# en donde se ejecutarán otras instrucciones como CMD, 
# COPY o RUN
WORKDIR /app

# Copiar archivo con las dependencias del backend
COPY package.json ./

# Instalar dependencias
RUN npm install

# Copiar todos los demás archivos excepto los 
# ignorados en el archivo .dockerignore
COPY . .

# Puerto que se expone hacia el sistema anfitrión 
EXPOSE 8000

# Valores por defecto para el contenedor 
# en este caso se incluye un ejecutable
CMD ["npm", "start"]

En el Frontend:

# Imagen base de node con una distribución ligera 
# de Linux llamada Alpine
FROM node:12.16.0-alpine

# Directorio que se crea en el contenedor y 
# en donde se ejecutarán otras instrucciones como CMD, 
# COPY o RUN
WORKDIR /app

# Copiar archivo con las dependencias del frontend
COPY package.json ./

# Instalar dependencias
RUN yarn install

# Copiar todos los demas archivos excepto los 
# ignorados en el archivo .dockerignore
COPY . .

# Puerto que se expone hacia el sistema anfitrión 
EXPOSE 3000

# Valores por defecto para el contenedor 
# en este caso se incluye un ejecutable
CMD ["yarn", "start"]

Paso 2. Agregar las variables de entorno

Docker Compose nos facilita el poder utilizar un archivo independiente con las variables de entorno necesarias para el funcionamiento del proyecto.

En el backend crearemos un archivo  .env.development en /todo-backend con la siguiente estructura:

NODE_ENV=development
MONGODB_URL=mongodb://mdb:27017/todo-app-db
PORT=8000

Lo que podemos notar en este archivo es que para realizar la conexión con el contenedor de MongoDB desde el contenedor del Backend utilizamos el nombre del servicio que vamos a especificar en el archivo docker-compose.yml, en este caso es mdb. Esta es la manera en la que se puede realizar la comunicación entre contenedores que han sido especificados como servicios en Docker Compose.

Ahora en el frontend crearemos un archivo  .env.development en /todo-frontend, aquí simplemente tenemos la ruta en la que estará el API:

REACT_APP_API_URL=http://localhost:8000

Paso 3. Agregar el archivo docker-compose.yml

version: '3'
services:
  # Nombre del servicio
  backend:
    # Nombre de la imagen que será generada
    image: todo-backend-image
    # Ruta en donde se encuentra el archivo Dockerfile
    build: ./todo-backend
    # Nombre del contenedor resultante
    container_name: todo-backend
    # Reiniciar el contenedor en caso de ocurrir algún error
    restart: always
    # Ruta al archivo con las variables de entorno
    env_file:
      - ./todo-backend/.env.development
    # Puerto que se expone hacia el sistema anfitrión 
    # desde el contenedor 
    ports:
      - "8000:8000"
    # Directorios del sistema anfitrión que se enlazan 
    # con los del contenedor. El primero es para el
    # código del backend y el segundo para las dependencias
    volumes:
      - ./todo-backend:/app
      - ./todo-backend/node_modules:/app/node_modules
    # Otros servicios de los cuales depende este contenedor 
    depends_on:
      - mdb
    # Red de contenedores a la que se agrega el 
    # contenedor del backend
    networks:
      - todo-network
    # Similar a los especificados en el Dockerfile
    command: sh -c "npm install && npm start"

  frontend:
    image: todo-frontend-image
    build: ./todo-frontend
    container_name: todo-frontend
    restart: always
    # Mantiene la conexión con el terminal del contenedor
    # en modo interactivo
    stdin_open: true
    env_file:
      - ./todo-frontend/.env.development
    ports:
      - "3000:3000"
    volumes:
      - ./todo-frontend:/app
      - ./todo-frontend/node_modules:/app/node_modules
    networks:
      - todo-network
    command: sh -c "yarn install && yarn start"

  mdb:
    image: mongo:3.4
    container_name: todo-mongodb
    restart: always
    volumes:
      - ./mongodb/data:/data/db
    ports:
      - "27017:27017"
    networks:
      - todo-network

networks:
  todo-network:

Paso 4. Levantar el proyecto

Una vez lista la configuración solo nos resta ejecutar docker-compose up en la raíz del repositorio. Este comando se encargara de construir, iniciar y enlazar los contenedores como servicios. Este proceso puede tomar un poco de tiempo si es la primera vez debido a que tienen que descargarse y construirse las imágenes (si no han sido descargadas previamente) y también descargarse las dependencias del backend y del frontend. Una vez terminado este proceso podemos ir al navegador  y ver el siguiente resultado:

Conclusión

La opción que te he presentado aquí es solo una manera en que podemos utilizar Docker y Docker Compose para facilitarnos el desarrollo, podemos probar con distintos entornos y con diferentes lenguajes, la idea es conseguir optimizar al máximo nuestro entorno de desarrollo y enfocarnos en el principal objetivo que es escribir código de calidad.

Un callback (llamada de vuelta) en términos comunes es una función que recibe otra función como argumento y la ejecuta en un determinado momento. Para entenderlo mejor usaremos un ejemplo sencillo.

Nota: Puedes utilizar de la Consola de Desarrollador de Chrome (en MAC: Cmd + Option + J o en Windows: Ctrl + Shift + J) e ir poniendo a prueba estos ejemplos.

Primero vamos a escribir una función que hará una suma de dos valores y el resultado lo pasará a una función callback que lo presentará en forma de un mensaje de texto en consola:

function add(value1, value2, callback) {
    const result = value1 + value2;
    callback(result);
}

function myCallback(result) { 
    console.log(`Result: ${result}`);
}

Ahora ejecutamos la función add:

add(2, 5, myCallback);

Nos presenta:

Result: 7

Pero que a ocurrido exactamente. Una de las ventajas que nos brinda JavaScript es la facilidad de poder utilizar funciones en todo momento y como mejor se adapten a nuestras necesidades. En este ejemplo estamos declarando 2 funciones, la primera es add la misma que recibe 3 parámetros un value1 que sería el primer número de nuestra suma, un value2 que sería el segundo y un callback que a diferencia de los parámetros anteriores no seria un numero sino una función y que a su vez se ejecutará cuando la suma esté completa.

La segunda función de este ejemplo es myCallback la cual simplemente recibe un valor y lo presenta a manera de mensaje en consola. Lo interesante aquí es que en lugar de llamar a myCallback de manera independiente, la vamos a pasar como un argumento al momento de ejecutar la función suma de la siguiente manera:

add(3, 6, myCallback)

En este ejemplo estamos almacenando el valor de la función callback en una variable llamada myCallback pero también podemos pasarla como una función anónima (sin nombre) directamente a la función add al momento de ejecutarla de la siguiente manera:

add(4, 4, function (unResultado) { 
    console.log(`Result: ${unResultado}`);
});

Obtendremos como resultado:

Result: 8

¿Para qué sirven los callbacks en JavaScript?

Los callbacks son muy útiles para manejar la un comportamiento asíncrono en nuestro código. En javascript a diferencia de otros lenguajes, el código no se ejecuta de manera secuencial es decir que el intérprete de javascript no necesariamente tiene que esperar a que finalice una tarea asíncrona (por ejemplo una llamada a una base de datos) antes de avanzar a la siguiente línea de código, es aquí que el uso de callbacks tiene una gran utilidad ya que son funciones que pueden ser ejecutados en cualquier momento.

Para entender de mejor manera vamos a utilizar un ejemplo valiéndonos de la función setTimeout para simular una ejecución asíncrona:

function runAsyncTask() {
    console.log(1);
    setTimeout(function() {
  	console.log(2);
    }, 1000);
    console.log(3);
}

Ahora la ejecutamos:

runAsyncTask();

Obtenemos el siguiente resultado:

1
3
2

En este ejemplo setTimeout recibe un callback que se ejecutará después de un segundo por esta razón el 2 aparece después del 3.

Ahora vamos a nombrar a nuestra función callback de la siguiente manera:

function myCallback() {
    console.log('This is a callback')
}

function runAsyncTask(callback) {
  console.log(1)
  setTimeout(callback, 1000);
  console.log(3)
}

Ahora ejecutamos la función runAsyncTask

runAsyncTask(myCallback);

Y obtenemos el siguiente resultado:

1
3
This is a callback

Otro uso bastante común de los callbacks es en el manejo de eventos, por ejemplo al momento de hacer clic en un botón deberíamos tener una lógica parecida a la siguiente:

document.getElementById("button1").addEventListener("click", function() {
  // do something
});

En este caso addEventListener recibe 2 parámetros, el primero es el nombre del evento y el segundo es un callback que se ejecutará al momento de que el usuario haga clic sobre el botón con el id  button1.

Entender cómo funcionan los callback en JavaScript es fundamental a la hora de programar en este lenguaje, además de ser la base para otros conceptos como las promesas y el async/await que posee actualmente JavaScript y que analizaremos más a fondo en un próximo artículo.

En muchas ocasiones es necesario trabajar remotamente por lo que surge la necesidad de lograr una comunicación efectiva con el equipo y a la vez gestionar adecuadamente nuestros proyectos, para lograr este objetivo podemos recurrir al uso de herramientas digitales que nos faciliten esta tarea.

A continuación, vamos a analizar 6 de estas herramientas que considero pueden sernos de utilidad si nuestra meta es una gestión efectiva

Slack

Es una herramienta de mensajería en tiempo real que facilita la comunicación del equipo de trabajo. Permite la creación de grupos, conversaciones privadas, canales públicos y privados, compartir archivos y muchas otras opciones, a mas de esto posee una gran cantidad de configuraciones adicionales que van desde cambiar como y cuando se presentan las notificaciones hasta cambios en los colores del tema.

Posee una versión web, versión móvil para ios y Android, y una versión de escritorio para Windows, Linux y Mac Os

Otro fuerte de Slack es la cantidad de integraciones con las que cuenta, entre las que destacan Google Drive, Google Hangouts, Dropbox, Skype y muchos otros más.

Posee varios planes de pago, pero también una versión gratuita que resulta más que suficiente para pequeñas empresas o autónomos.

Pagina web de Slack: https://slack.com

Google Hangouts

Es un sistema especializado en comunicación ya sea mediante audio, video o ambos. Es desarrollado por Google y esta enfocado en la realización de videoconferencias de una manera sencilla y eficaz.

Esta disponible desde un ordenador o desde una aplicación móvil ya sea en Android o ios tanto en celulares como en tablets.

Página web de Google Hangouts: https://hangouts.google.com

Zoom

Es una herramienta enfocada en videoconferencias, posee planes gratuitos y de pago y permite hacer conferencias con una gran cantidad de personas conectadas al mismo tiempo con audio y video en directo. Zoom da la posibilidad de crear diferentes salas y subsalas virtuales para facilitar el trabajo en equipo.

Página web de Zoom: https://zoom.us

Google Calendar

Es un servicio de calendario gratuito de google, permite organizar eventos y compartirlos entre tus contactos de google. Otras características son el uso compartido del calendario, búsqueda avanzada de eventos ya sea en tu calendario o en calendarios públicos, soporte móvil tanto para Android como ios y notificaciones para que no pierdas ningún evento que hayas planificado con anterioridad.

Página web de Google Calendar: https://www.google.com/calendar

Microsoft todo

Esta herramienta permite la gestión y sincronización de listas de tareas entre distintos dispositivos. Al pertenecer a Microsoft posee integración con Office 360 y correo Outlook.

Esta disponible gratis para Windows, Mac OS, iOS, Android y en versión online para el navegador web.

Página web de To Do: https://todo.microsoft.com

Trello

Esta fabulosa herramienta permite la organización de tareas de una manera sencilla. Esta enfocada en la coordinación de equipos de trabajo remoto y se basa en la metodología Kanban la cual busca gestionar de manera generalizada cómo se van completando las tareas.

Página web de Trello: https://trello.com/

Este artículo esta basado en https://blog.usejournal.com/testing-with-jest-and-enzyme-in-react-part-1-162ce7466128

ReactJS es una librería Javascript diseñada para la creación de Interfaces web, es mantenida por Facebook y ampliamente utilizada en la actualidad.

Jest

Jest es un framework creado para realizar Pruebas Unitarias (Unit Testing) enfocado en la simplicidad y la velocidad. Algunas de sus características principales son:

• Permite la ejecución de pruebas en paralelo para maximizar el rendimiento.
• Es una librería de aserciones (assertion library).
• Permite la construcción de mocks de manera similar a Sinon JS.
• Ofrece la posibilidad de crear informes de cobertura.
• Fácil de configurar.

Enzyme

Enzyme es una utilidad diseñada para React JS con el fin de facilitar la creación de pruebas para los Componentes hechos en React

Comenzando con Jest

1. Crear una aplicación utilizando create-react-app

Antes de empezar con a integrar Jest en nuestro proyecto primero debemos crearlo, para esto usaremos la herramienta create-react-app

npx create-react-app react-jest-app
cd react-jest-app
npm start 

Nota: npx es una utilidad creada para ejecutar paquetes localmente o en este caso ejecutar paquetes sin necesidad de instalarlos globalmente.

La estructura del proyecto debe lucir como se muestra a continuación:

2. Ejecutando una prueba de demostración con Jest

• Primero debemos borrar el archivo App.test.js que viene por defecto.
• Instalamos Jest como dependencia de desarrollo.

npm install --save-dev jest

• Modificamos en nuestro package.json el script test con el valor jest.

{
  "name": "react-jest-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
  "devDependencies": {
    "jest": "^25.1.0"
  }
}

• Creamos una carpeta test en la raíz del proyecto.
• Dentro de /test agregamos un nuevo archivo demo.test.js con el siguiente contenido:

it("suma correctamente", () => {
  expect(1+1).toEqual(2);
});

• Nuestro proyecto debe lucir de la siguiente manera:

• Abrimos un terminal y ejecutamos el siguiente comando

npm test

• Deberíamos ver el siguiente resultado

Explicación

• Cuando ejecutamos el comando npm test automáticamente se ejecuta Jest con las configuraciones por defecto.
• Por defecto Jest busca todos los archivos que con extensión .test.js y los identifica como archivos con pruebas unitarias.
• En la prueba estamos esperando que las suma de 1 + 1 sea igual a 2.

3. Instalando Enzyme

• Instalamos la librería Enzyme y el adaptador acorde a nuestra versión de React, en mi caso estamos usando react 16.13 por lo que necesitamos enzyme-adapter-react-16

npm install --save-dev enzyme enzyme-adapter-react-16

4. Instalando babel-preset-env

• babel-preset-env permite utilizar las nuevas características de ES6 en nuestras pruebas.

Ahora nuestro package.json se ve así:

{
  "name": "react-jest-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "jest": "^25.1.0"
  }
}

5. Configuración de Babel

Vamos a crear un archivo .babelrc en la raíz del proyecto con el siguiente contenido:

{
  "presets": [
    "@babel/preset-env",
    "react-app"
  ]
}

Nota: Los presets react-app ya vienen incluidos al momento de crear el proyecto con create-react-app por lo que no es necesario instalarlos de nuevo (https://www.npmjs.com/package/babel-preset-react-app#usage-in-create-react-app-projects)

6. Configuración para Jest

• Dentro de la carpeta /test vamos a crear un archivo setupTests.js con el siguiente contenido:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';;

// React 16 Enzyme adapter
Enzyme.configure({ adapter: new Adapter() });

• Agregamos una configuración adicional en nuestro package.json apuntando al archivo de configuración

...
  "jest": {
    "setupFilesAfterEnv": [
      "./test/setupTests.js"
    ]
  }
...

• Ahora nuestro package.json se ve así

{
  "name": "react-jest-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "jest": "^25.1.0"
  },
  "jest": {
    "setupFilesAfterEnv": [
      "./test/setupTests.js"
    ]
  }
}

7. Crear un componente de prueba

• Dentro de la carpeta /src vamos a crear una nueva carpeta llamada components.
• Dentro de /src/components crearemos una carpeta Title y dentro de esta un index.js con el siguiente contenido:

import React from 'react';

const Title = ({ children }) => (
  <h1>{children}</h1>
);

export default Title;

8. Escribir una prueba con Jest y Enzyme

• Dentro de la carpeta /test vamos a crear un nuevo archivo Title.test.js con el siguiente contenido:

import React from 'react';
import { shallow } from 'enzyme';
import Title from '../src/components/Title';
const title = 'Test Title';
let wrapped = shallow(
  <Title>{title}</Title>
);
describe('Title', () => {
  it('renders the Titles children', () => {
    expect(wrapped.find('h1').text()).toEqual(title);
  });
});

• En esta prueba estamos validando que el texto que se presenta dentro de la etiqueta <h1> del componente Test coincida con el contenido que esta siendo agregado como hijo al momento de utilizar el componente.

Ahora la estructura de nuestro proyecto luce así:

• En un terminal solo nos queda ejecutar npm test

Código en Github: https://github.com/JhymerMartinez/react-jest-app