preloader

Architecture

illustrations illustrations illustrations illustrations illustrations illustrations illustrations
Architecture

Published on 14 Jan 2021 by KaotoIO team

The architecture of Kaoto is designed to follow the Micro Frontends architectural style. The backend does the parsing and understanding of the orchestration while the frontend cares about user experience.

Frontend

The frontend is a micro-frontend architecture. The frontend is agnostic of the underlying orchestration framework. The frontend understands about steps that are ordered and organized on a flow. These steps will have properties that need to be configured.

The core frotend interacts with the backend and is able to visualize and edit a workflow. But sometimes we need specific pieces of code to support editing properties of certain steps in the orchestration. This is when the extensions and view definitions come into play.

Frontend Architecture Overview

Backend will return the list of applicable extensions and to which step they relate to. Frontend will then load the corresponding step extension from the Extension Catalog, delegating on the code of the extension all the needed custom code to configure that step.

Frontend Architecture Overview

Backend

The Backend relies on a series of configuration metadata catalogs to guide the frontend.

Backend Architecture Overview

These catalogs contain:

  • All the information about the available steps
  • When to use each view definition (extensions)

You can find more information on the Backend autogenerated documentation.

Steps

A step is the minimum building block in your flow. It usually contains one action (or meta-action). For example, a step may be a query to a database to extract data, connecting to a remote storage to store data, or sending an email.

Backend Architecture Overview

You can find more information on the Step autogenerated documentation.

View Definitions

Given the list of steps generated with the previous service, Kaoto can decide what view definitions can be used with the orchestration.

The view definitions are the configuration bits to know which views and extensions to load on the frontend.

Backend Architecture Overview

You can find more information about adding Custom Step Extensions to Kaoto on the documentation.

DSL Generators

You can find more information about adding Domain Specific Languages to Kaoto on the documentation.

Interaction between Frontend and Backend

You can find more information on the API documentation.

Deployment

Deploy an Orchestration

Frontend Architecture Overview

Watch logs

Frontend Architecture Overview

Edit an Orchestration

When editing an orchestration, Frontend will send Backend the modified full workflow and the Backend will return all the information needed to refresh the full Frontend interface.

Frontend Architecture Overview

There are two different versions of this flow depending on what action isi done.

If you modify the source code, what will return the visualization:

Frontend Architecture Overview

If you modify the visualization, that will refresh the source code on the frontend:

Frontend Architecture Overview

In both cases, the Backend will return the saame information (visualization, view definitions, and source code), so the frontend will have everything synchronized and aligned at all times. This is important when editing the source code, as invalid parts of the source code will be ignored to be able to generate a valid visualization. This invalid parts of the source code will not be present on the returned response, allowing a constant clean up of the source code.