Introduction

The Orchy Project consists in a bunch of utilities and templates that can help you to easily implement the Micro Frontends pattern in a performant way.

All of this is possible thanks to an open source Web Component which aims to orchestrate multiple multi-tenant frontend applications leveraging on the following technologies:

• Micro Frontends pattern;
• Web Components;
• JavaScript modules;
• Server Driven UI.

Each UI and each Micro Frontend is managed using the Client Side Composition variant of the Micro Frontend pattern.

Thanks to the out of the box support to Server Driven UI, orchy also supports both horizontal and vertical split of the view.

Project details

All the repositories of the Orchy Project are open sourced under the MIT license and they are available in the orchy-mfe GitHub organization.

The orchy-core repository is the main one, and is a monorepo which includes the following packages:

• @orchy-mfe/back-end: a Fastify backend that can be used to serve orchy's configuration files;
• @orchy-mfe/models: includes the TypeScript models for the orchy's configurations and the Micro Frontends properties;
• @orchy-mfe/page-builder: the library which enables the Server Driven UI;
• @orchy-mfe/spa-adapter: the Web Component class that can be extended to wrap your Single Page Applications;
• @orchy-mfe/web-component: the Web Component which embeds the orchestration logics.

Same as Web Components are technology-agnostic by definition, so is orchy: it means that it integrates with low effort with your current Single Page Application, being it React, Preact, Vue, Svelte, Solid or anything else you like...even Vanilla JavaScript!

The only thing that you need is to understand how to configure it. We are going deep in the configuration structure in the next section.

info

Are you going to create a new Micro Frontend? Take a look to the templates section.