https://github.com/Tinkoff/microzord

Simple and powerful Micro Frontends framework
https://github.com/Tinkoff/microzord

angular microfrontends microservices microzord react routing single-page-applications svelte vue

Last synced: 5 days ago
JSON representation

Simple and powerful Micro Frontends framework

• Host: GitHub
• URL: https://github.com/Tinkoff/microzord
• Owner: Tinkoff
• License: apache-2.0
• Archived: true
• Created: 2021-03-23T14:28:30.000Z (over 3 years ago)
• Default Branch: alpha
• Last Pushed: 2022-02-17T13:12:57.000Z (over 2 years ago)
• Last Synced: 2024-10-22T05:08:54.311Z (13 days ago)
• Topics: angular, microfrontends, microservices, microzord, react, routing, single-page-applications, svelte, vue
• Language: TypeScript
• Homepage:
• Size: 1.37 MB
• Stars: 93
• Watchers: 9
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
#  microzord

## Attention: WIP

It is a pre-alpha version of the library. Please, do not use it until official release.

[![npm version](https://img.shields.io/npm/v/@microzord/core.svg)](https://npmjs.com/package/@microzord/core)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@microzord/core)](https://bundlephobia.com/result?p=@microzord/core)

[![codecov](https://codecov.io/gh/Tinkoff/microzord/branch/alpha/graph/badge.svg?token=MPSKF8YX7H)](https://codecov.io/gh/Tinkoff/microzord)

## What is it?

It is a small tool that allows you to add and render multiple apps on one page. It has simple ideomatic APIs for all modern frameworks and builds bridges between them.

🧙 **Framework agnostic**. You can have an Angular application with a React app header and a Vue app footer. Each app can have endless amount of nested apps inside. There are also wrappers for every modern framework with simple API.

🧩 **Modular**. You can insert another app in your app in any place as an ordinary component. Use the same methods to bind data and to handle its events.

🐝 **Tiny as a bee and works as well**. No new code in the bundle of child application and a bit more than 1 KB library for host application to get all the benefits!

## Installation and usage

An extensive demo is coming soon...

### An example of usage external apps in Angular app

app.module.ts

```ts

@NgModule({

  imports: [

    MicrozordHostModule.register({

      apps: [

        {

          name: 'react-menu',

          assetMap: '/react-menu/microzord.json',

        },

        {

          name: 'vue-footer-app',

          assetMap: '/vue-footer-app/microzord.json',

        },

      ],

    }),

  ],

})

export class AppModule {}

```

Usage in application:

```html

Any content


```

## Core team

    

       

            
Igor Katsuba

            


                

                

                

            

        

        

            
Roman Sedov

            


                

                

                

            

        

    


## License

🆓 Feel free to use our library in your commercial and private applications

All microzord packages are covered by [Apache 2.0](/LICENSE)

Read more about this license [here](https://choosealicense.com/licenses/apache-2.0/)