Isotope Mail Client: Introduction and features

Introduction

Isotope mail client is a free open source webmail application built with a microservice architecture vision in mind.

As of now, the application is just an MVP offering the basic functionalities of any standard webmail client.

The main purpose of this application is to personally expose, explore and learn new technologies, and development and design patterns.

However, the application should be fully functional and solve many of the problems that other mail clients face.

Features

• No database required
• Quick and easy deployment (docker images and deployment examples available)
• Rich text message editing
• Support for embedded images (paste into editor)
• Recipient addresses autocomplete
• Drag & drop messages
• Drag & drop file attachments
• Drag & drop folders
• Folder create, delete and rename
• Multi language support (English, Spanish & Deutsch)
• Browser notifications

Architecture

Currently, Isotope consists of only two components, a front-end React application with the user interface and a back-end Spring application that servers as an API to the IMAP and SMTP protocols.

In order to deploy the application, a reverse-proxy / load balancer is required to enable communication between front-end and back-end. This component will also be required to orchestrate the requests and provide the means to elastically scale any of the other components.

Following is a list of some of the technologies and patterns used throughout the application. There will be future dedicated posts about the integration of these technologies with Isotope mail client.

Front-end

The FE is based in ReactJS and is built using Babel 7 and Webpack 4 (Following the technique described in the this post).

One of the main features of Isotope mail is that along with the state of the application, the user’s mailbox is partially cached and stored (encrypted) in the browser’s IndexedDB.

These are some of the technologies in use:

• Redux: The Redux pattern is used throughout the application to manage the application state. On top of this, the state of the application is persisted/recovered in/from the browser’s IndexedDB.
• i18next: The i18next framework is used for internationalization. Translation are loaded from static JSON application resources.
• Web workers: web workers are used to perform resource consuming background tasks. Currently there is a web worker for encryption and decryption. Worker-loader module is used to integrate the web worker in the Babel+Webpack build.
• Drag and drop: Html5 drag and drop is used natively.
• whatwg-fetch: GitHub’s fetch polyfill is used. Most back-end requests are performed using fetch.
• SJCL (Stanford Javascript Crypto Library): This library is used for hashing and encrypting user’s sensitive information before persisting it in the browser’s IndexedDB.
• IndexedDB + IDB: The browser’s IndexedDB is intensively used to cache folder’s messages, application state, etc. The access to the DB is performed using the idb library which replaces some of the native IndexedDB objects with promises.
• TinyMCE: Version 4 of this rich text editor is used and integrated as a ReactJS component and Redux.
• DOMpurify: This library is used to sanitize HTML e-mail content before rendering it in a ReacJS component (dangerouslySetInnerHTML)
• Jest + Enzyme: FE unit tests are written with Jest and the help of Enzyme.
• Notifications: Html5 notifications are used natively to notify the user about new mail.

Back-end

The BE is a Spring application built with Gradle.

It simply acts as a web API to expose IMAP and SMTP capabilities to the FE. The application has no state neither database support.

These are some of the technologies in use:

• Spring Boot: for application bootstrapping.
• Spring HATEOAS: for resource link building.
• Spring Webflux (Project Reactor): to create reactive endpoints. Currently folder messages resource is using a Flux endpoint to stream Server-sent events to the browser in order to stream batches of messages as soon as they are retrieved from the IMAP server.
• JavaMail API: for SMTP and IMAP protocol access.
• JUnit 4 + Mockito 2 + Powermock: BE unit tests are implemented with JUnit and Mockito 2. Powermock is used to mock static methods and final classes from the JavaMail API.

Reverse-proxy / load balancer

For development purposes, Webpack-dev-server is used to proxy requests from the front-end to the API back-end. This same procedure could be used for some specific deployments although it’s not the recommended approach.

There is an example docker-compose deployment showing how easy it is to deploy the application using Traefik and the official Isotope docker images.

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

Running the previous commands will deploy the application in your localhost.

Continuous Integration

Travis-ci is used as the CI service.

As of now, it listens for changes in GitHub’s master branch, tests and compiles back-end and front-end, builds and deploys the official docker images and runs the Sonar scanner for static code analysis.

There will be future posts about Isotope’s CI pipeline and how to publish docker images with Travis-ci.

Isotope demo

You can check out the latest snapshot version in action at: isotope.marcnuri.com (Password: demo).