Usage

Micro-Frontends

({
  type: 'Application',
  typeweb: 'SPA',
  os: 'Linux',
  toolsbuild: 'Webpack5',
  protocol: 'REST',
  name: 'host',
  port: '9001',
  framework: 'react',
  language: 'javascript',
  css: 'css',
})

💃 Motivation

A quick recap about the concept of Micro Frontends:

Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends

📦 Structura

1. Module Federation Webpack 5 (MFW)
   1. SPA
      1. React 18 (js/ts)
      2. VUE 3 (js/ts)
      3. Angular (ts)
      4. Svelte (js/ts)
   2. SSR
      1. Next 13 (js)
2. Vite
   1. SPA
      1. React 18 (ts)
      2. VUE 3 (js)
   2. SSR
      1. Nuxt 3 (js)
3. Single-Spa + MFW
   1. React 18 (js)
4. StoryBook (storybook-module-federation)
   1. React 18 (js/ts)
   2. Vue 3 (js)
5. Packages (wsrun)
6. Protocol
   1. WebSocket
   2. REST
7. Futter build (Webpack) - experimental

Styles

1. SCSS architecture
2. Tailwind
3. Bootstrap

Сomponent example

• Example VUE btn => REACT
• Example REACT btn => VUE
• Single-Spa + Module Federation (host/remote)

✨ Features

• ⚡ Remix js (react)
• ⚡ Protocol
• ⚡ FSD