Composition

To meet Masiv's needs, Oasis has a particular behavior that relies on the base micro frontend theory but ahead with some modifications.

In that sense, based on the Self-Contained Systems (formerly named Frontend Integration in Vertical Systems) we can start by getting the following:

Micro frontend base system

The micro frontend base system proposes the following structure based on the micro frontend development by functionalities.

base micro frontend.png

Image retrieved from https://micro-frontends-es.org

Ex. Suppose there’s an online store app that is based on the micro frontend base system.

In that case, we’ll find that there's a team in charge of the buy functionality, another team of the search, and another one of the suggestions functionality.

However, we suggest the Oasis micro frontend-based model for each Masiv product.

Oasis micro frontend-based model

The following is Oasis micro frontend-based model which we propose to use in Masiv.

masiv structure.png

As Masiv doesn’t have a unique functionality (like a shopping cart in the shopping app example) it’s considered as various applications or products suite that share the same visual ecosystem.

That’s why the proposed model gets added the following features:

In short, this model allows each product to have its own development environment, meaning that each isolated frontend is capable of having its own infrastructure, repositories, and servers.

It also ensures ease of maintenance and deployment.

Orchestrator

orchestrator layers.png