Skip to content

Internals

Jump to bottom
Miguel Pérez Colom edited this page Jan 11, 2025 · 12 revisions

Mateu simply infers the UI views from the java objects at runtime. Every time you ask for an url Mateu looks for the corresponding java object, inspects it using java reflection, and creates the view. The reason for using java reflection instead of meta programming with annotation processing is because it allows us not to access at compile time to all of the entities and classes we are going to navigate through. By using java reflection we can create the uis on the fly, while the performance keeps all right.

Mateu uses annotation processors only for the @MateuUI annotation, in order to generate the controller and associate it to a path.

The architecture of Mateu

Mateu decouples the frontend and the backend side by using a simple API. Therefore we can seamlessly use different frontend and backend implementations together. E.g. we can use the frontend component against a UI defined with Mateu or against a Camunda workflow engine. We can even create a .Net implementation of that API in order to define our UIS using C#.

In the end we are just building a kind of higher level Vaadin which, also, does not need to keep anything in session. So, instead of working with labels, inputs, or buttons as we do with Vaadin we will work, when using Mateu, with forms, cruds and actions using plain java objects and methods. Also, the state of the UI only lives in the frontend so we do not need to manage sticky sessions for redirecting our user requests always to the same server, neither restarts are gonna take our users out as no session needs to be maintained. In the end, we are just using simple micro services.

Micro frontends

Mateu is tightly related to micro services and micro frontends. We can both easily embed our UIs in any existing website (no matter how it is built) and in existing UIs defined using Mateu.

Embedding in frontend

Mateu frontend reference implementation uses web components, so you only need to add the script and use the web component in your page. Something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>This is a demo</title>
    <script type="module" src="https://unpkg.com/mateu-ui/dist/assets/mateu.js"></script>
</head>
<body>
    <mateu-ui baseUrl="https://explorer.mateu.io">
    </mateu-ui>
</body>
</html>

That would embed the whole UI (including menus) in any website. If you want to embed only a form or crud you can do it with the following snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>This is a demo</title>
    <script type="module" src="https://unpkg.com/mateu-ui/dist/assets/mateu.js"></script>
</head>
<body>
    <mateu-ux journeytypeid="forms_returnsResult"
                     baseurl="https://explorer.mateu.io">
        
    </mateu-ux>
</body>
</html>

In the end they are just web components, so you can place them wherever you want.

Performance considerations

Please notice that the bundle weights something like 400KB which, at my home, takes 168ms to download but it can take more time when using a slow connection so you will perhaps want to preload it from a login page or similar in order to avoid blank page times. You can also add a spinner in the html and it would disappear when the javascript is loaded.

Client-side composition defined from backend

While you can obviously put something in from of Mateu's API in order to handle composition, mixing and routing to any micro services you have behind, you can also easily do it using a special interface provided by Mateu.

That interface is MicroFrontend. You can use them as follows:

    @MenuOption
    new MicroFrontend(
         "https://article2.mateu.io/financial/bookingreport",
         Map.of("bookingId", id))
    );

The journey paradigm

In Mateu everything is a journey. So, when the user selects a menu option he is indeed starting a journey and every view he sees in the browser is one step of that journey. At every step he can take different actions which, in the end, will bring her/him to another step of the journey.

This simplification of the user experience (UX) makes it possible to define a very simple API and, therefore, you only need to develop a pretty simple frontend component or a very simple backend micro service. I have written an implementation of that API for Camunda and another for UIs defined using plain Java, but it would be pretty easy to write a port for C# or a database driven UI (CMS like).

Clone this wiki locally