Micro-frontend Architecture. Part 3. Layered Architecture

Hello everyone! Welcome to the third part of our journey into micro-frontend architecture. After delving into architectural decisions and the technical stack, it’s time to explore layered architecture in practice, using our CRM application as an example.

What is Layered Architecture?

Layered architecture is a development approach that suggests dividing an application into multiple layers. These layers are usually organized by responsibility and interaction with other layers, facilitating a clear separation of duties and simplifying code maintenance. Typically, layers have dependency constraints to prevent tangled code dependencies.

For instance, Nx offers layered architecture through different types of libraries within a single monorepo: feature, UI, data-access library, and utils. However, the official documentation does not specify any restrictions or rules for these layers. Therefore, we were inspired by another example of layered architecture — FSD. We adopted only the concept of layers and their interrelations, while FSD offers a deeper separation, which you can read about in its documentation.

Layers

Let’s take a look at the layers we identified in our CRM:

• Core layer — a set of “dumb”…