Medusa UI

A framework for micro-frontends in Java built on Reactive Spring and Thymeleaf

Medusa is an open-source bidirectional micro-frontend framework built in Java, on top of Spring Reactive and Thymeleaf. Blazingly fast, with a modern feel and simple to write.

Getting started

Start your exploration with the component showcase, a site which is set up to demonstrate and document every feature the framework provides.

Once you're ready to get started, read up on the install instructions, and you'll be coding in no time.

If you are interested in digging into the internals of the stack, we have our source openly available in our Github project repository as well as thorough documentation on how the internals of the framework operate.

What is the Medusa Stack?

Diagram of the medusa/hydra architecture. From left to right, a browser call goes through Hydra first. Hydra is marked as a combination API gateway, IDP and discovery service. It is public and would have DNS associated with it. It optionally connects to a user database and redis for discovery scaling. The graph then continues to the right, with different user flows connecting to seperate medusa instances. Each medusa instance provisions a part of the UI. Medusa services are deployed internally.

The stack consists out of two major components:

Medusa, a UI framework that will allow you to extend Thymeleaf into a bidirectional setup with tight integration between view and controller. In other words, you'll write individual micro-frontends in Medusa.

Hydra, a gateway with service discovery, load balancing, and JWT security. It is your public endpoint through which all traffic flows, taking the complexity out of combining front-ends together.

Individual micro-frontends are deployed modularly - and thus get developed and deployed over time, go offline, or need A/B testing to try out new features. Hydra routes the user to the correct places, loads in fragments from other services, keeps track of the security session, handles resource conflicts and so much more; making the experience seamless for users.

What is bi-directionality?

In a standard application, data only flows from the client to the server. With Medusa, you can also communicate at any point from the server to the client.

You may use this yourself for common patterns such as notifications, chat or live data. Internally, Hydra uses it to enhance the micro-frontend experience.

For example: A menu. The menu leads to different parts of your app, each handled by a different micro-frontend. If you deploy new functionality, the menu can be live updated. If a server goes down, the menu options disappear.

Taking it a step further is A/B testing: Hydra can route a % of users to an experimental micro-frontend, but keep most of the users on the proven and steady version. You can adjust at any time.

Why micro-frontends?

Microservice architectures are the norm on the back-end. Teams can fully own their own services, update them independently, and features can be rolled out with no downtime. But once you get to the front-end, you're often stuck with monolithic javascript fat clients or you need a complex setup to get micro-frontends working. We aim to fix this by providing a backend inspired stack to this problem, making the difference between front-end and back-end applications minimal and the experience for the user cohesive and seamless.