Isotope Mail Client: Introducción y funcionalidades

Introducción

Isotope mail client es una aplicación webmail de código libre y gratuita construida siguiendo una arquitectura basada en microservicios.

En el estado actual, la aplicación es sólo un MVP que ofrece las funcionalidades básicas de cualquier cliente de correo electrónico.

A modo personal, el propósito principal de la aplicación es para exponer, explorar y aprender nuevas tecnologías y patrones de diseño y desarrollo de aplicaciones.

No obstante, la aplicación debería de ser completamente funcional y resolver muchos de los problemas a los que se enfrentan otros clientes de correo electrónico.

Funcionalidades

• No requiere base de datos
• Despliegue sencillo y rápido (imágenes de Docker y ejemplos de despliegues disponibles)
• Edición de mensajes con editor de texto enriquecido
• Soporte para imágenes embebidas (pegar directamente las imágenes en el editor)
• Autocompletado de direcciones de destinatarios
• Drag & drop en mensajes
• Drag & drop para archivos adjuntos
• Drag & drop de carpetas
• Creación, borrado y renombrado de carpetas
• Traducciones (Español, Inglés y Alemán)
• Notificaciones del navegador

Arquitectura

Actualmente, Isotope consiste de dos componentes, una aplicación front-end desarrollada con React para la interfaz de usuario y una aplicación Spring como back-end para exponer un API que sirve de pasarela con los protocolos IMAP y SMTP.

Para poder desplegar la aplicación es necesario un balanceador / proxy inverso para permitir la comunicación entre el front-end y el back-end. Este componente también es necesario para orquestar las peticiones y proveer los medios para escalar elásticamente el resto de componentes de la solución.

A continuación se muestra una lista de las tecnologías y patrones empleados en la aplicación. Se harán publicaciones dedicadas para detallar la integración de estas tecnologías con Isotope Mail Client.

Front-end

El FE es una aplicación ReactJS construida con Babel 7 y Webpack 4 (Siguiendo las técnicas descritas en este artículo).

Una de las principales características de Isotope Mail es que además del estado de la aplicación, la cuenta de correo del usuario se almacena (encriptada) y cachea en el navegador empleando IndexedDB.

A continuación se enumeran algunas de las tecnologías empleadas:

• Redux: El patrón Redux se emplea a lo largo de la aplicación para gestionar su estado. Además, el estado completo de la aplicación se persiste/recupera en/desde el navegador (IndexedDB).
• i18next: El framework i18next se emplea para la internacionalización de la aplicación. Las traducciones se cargan desde recursos estáticos JSON de la aplicación.
• Web workers: se emplean web workers para realizar tareas con un uso intensivo de recursos en segundo plano. Actualmente hay un web worker para realizar las tareas de encriptado y desencriptado. El módulo Worker-loader se emplea para integrar el web worker en la construcción de la aplicación mediante Babel y Webpack.
• Drag and drop: Html5 drag and drop se emplea de forma nativa.
• whatwg-fetch: Se emplea el polyfill fetch de GitHub. La mayoría de las peticiones al back-end se realizan mediante fetch.
• SJCL (Stanford Javascript Crypto Library): Esta librería se emplea para las funciones de hash y encriptado de la información sensible del usuario antes de persistirla en el navegador mediante IndexedDB.
• IndexedDB + IDB: IndexedDB en el navegador se emplea de forma intensiva para cachear los mensajes de las carpetas de la cuenta de correo del usuario así como el estado de la aplicación. El acceso a la base de datos se realiza empleando la librería idb que reemplaza alguno de los objetos nativos de IndexedDB con promesas.
• TinyMCE: Se emplea la versión 4 de este editor de texto enriquecido y se integra en la aplicación mediante Redux en forma de un componente ReactJS.
• DOMpurify: Esta librería se emplea para sanear el código HTML del contenido de los e-mails antes de renderizarlo mediante un componente ReactJS (dangerouslySetInnerHTML).
• Jest + Enzyme: Lost tests unitarios para el FE están desarrollados mediante Jest con la ayuda de Enzyme.
• Notifications: Se emplean notificaciones nativas de Html5 para notificar al usuario sobre nuevo correo.

Back-end

El BE es una aplicación de Spring construida mediante Gradle.

La aplicación actúa simplemente como un API web para exponer las capacidades IMAP y SMTP al FE. La aplicación no tiene estado y no requiere persistencia en base de datos.

Estas son algunas de las tecnologías empleadas:

• Spring Boot: para el arranque de la aplicación.
• Spring HATEOAS: para la construcción de enlaces a recursos.
• Spring Webflux (Project Reactor): para crear endpoints reactivos. Actualmente el recurso correspondiente a los mensajes de una determinada carpeta es un endpoint Flux para transmitir “Server-sent events” al navegador y así poder publicar lotes de mensajes tan pronto se reciben desde el servidor IMAP.
• JavaMail API: para el acceso a los protocolos SMTP e IMAP.
• JUnit 4 + Mockito 2 + Powermock: Los tests unitarios de BE se han implementado con JUnit y Mockito 2. Powermock se emplea para simular métodos estáticos y clases finales de JavaMail API.

Reverse-proxy / load balancer

En el entorno de desarrollo se emplea Webpack-dev-server para proxificar las peticiones desde el front-end hacia el API expuesto en el back-end. El mismo procedimiento podría emplearse para algunos despliegues muy específicos, aunque no es la técnica más recomendable.

Hay un despliegue de ejemplo empleando docker-compose donde se muestra lo sencillo que es desplegar la aplicación empleando Traefik y las imágenes de docker oficiales de Isotope.

1git clone https://github.com/manusa/isotope-mail.git
2cd isotope-mail/deployment-examples
3docker-compose pull && docker-compose up --force-recreate

La ejecución de los comandos anteriores desplegará la aplicación en localhost.

Integración Continua

Travis-ci se emplea como servicio de integración continua CI.

En el estado actual, Travis está a la espera de cambios en la rama master de GitHub, prueba y compila tanto el back-end como el front-end, construye y despliega las imágenes de docker oficiales y ejecuta el escáner de Sonar para el análisis de código estático.

Habrá publicaciones futuras acerca del CI pipeline de Isotope y de cómo publicar imágenes en docker hub mediante Travis-ci.

Isotope demo

La última versión snapshot de isotope puede verse en acción en: isotope.marcnuri.com (Password: demo).