Technical Stack Details

Toucan Toco is built with awesome open source blocks that have proven their reliability and efficiency.

Frontend

The frontend is only a collection of static files (js, css…).

Those files are generated mainly with the following JS libraries:

  • Vue.js as the application framework
  • AngularJS as the former application framework, now deprecated in favor of Vue.js.
  • D3.js for rendering some charts

It’s built using this set of languages and tools:

We also use Nginx as the webserver for all frontend files and SSL reverse proxy.

All of Toucan Toco’s frontend assets are provided by a dedicated Docker image.

All open source libraries used in the frontend are available with their licence notes in the third-party-notice.txt file.

Backend

The back-end is a Python 3.6 HTTP REST API mainly powered by:

  • Flask as application framework
  • Pandas for data processing
  • Celery as a distributed task queue
  • Dask as parallel computing library

Many other python libraries are used for database connections, access rights, etc.

All of Toco backend’s is provided by a dedicated Docker image.

MongoDB is our database of choice for storing our app’s data, aggregate data, results and configuration. MongoDB is also used as a kind of cache to avoid pulling your data for each request.

Redis is used as a message broker between Celery processes and also as a cache for MongoDB.

Nginx is usually used as a SSL reverse proxy.

Detailed Workflow

Big Picture

With the details given above, the full workflow is as follows:

Toucan Toco - Full Stack

Toucan Toco - Full Stack

  • all connections are in HTTPS. The connection between Nginx and the Toucan Toco stack is over HTTP but it’s through a local socket or through a private, dedicated and isolated network.
  • only the HTTPS port is exposed
  • if the Toucan Toco backend is installed in a private network, an outside client will not be able to reach it and access the data. The client should be inside the private network or use a VPN connection.
  • the Toucan Toco frontend is made up only of static assets (js, css, html…). There is no data or specific information on the frontend side.

Typical Workflow Sequence

To complete the previous schema, please find the typical workflow sequence between the Toucan Toco frontend, a client and the Toucan Toco backend.

Toucan Toco - Sequence Workflow

Toucan Toco - Sequence Workflow

  • The client (browser) downloads static assets (js, css, html…) from the Toucan Toco frontend by HTTPS.
  • Then the client only talks with the Toucan Toco backend by HTTPS. The only data stream is between the client (browser) and the Toucan Toco backend.
  • There is no data stream/flow between the Toucan Toco frontend and the backend.

Open Source

We also contribute by publishing some of our work in the open source community.

Feel free to look at our public repositories on GitHub.