Вступ до Module Federation

Module Federation — це нова концепція в світі веб-розробки, яка дозволяє об'єднувати кілька незалежних додатків у єдиний додаток. Вона дозволяє створювати архітектуру мікро-фронтендів, де кілька менших додатків складаються разом для створення більшого додатка.

У традиційній монолітній архітектурі всі функції та можливості додатку об'єднуються в одну кодову базу. Це може ускладнювати підтримку та масштабування додатку з його зростанням. Module Federation вирішує цю проблему, дозволяючи кожній функціональності або компоненту розроблятися, тестуватися та розгортатися незалежно.

Що таке Module Federation?

Module Federation — це техніка для створення та розгортання кількох незалежних додатків як єдиного додатку. Вона дозволяє кожному додатку розроблятися, тестуватися та розгортатися незалежно, без впливу на інші додатки.

Module Federation базується на концепції “федеративної” архітектури, де кілька незалежних додатків об'єднуються в єдиний додаток. Кожен додаток відповідає за свою функціональність і не залежить від інших додатків.

Переваги Module Federation

Module Federation має кілька переваг, зокрема:

• Незалежна розробка та розгортання: Кожен додаток може розроблятися, тестуватися та розгортатися незалежно, без впливу на інші додатки.
• Покращена масштабованість: Module Federation дозволяє кожному додатку масштабуватися незалежно, без впливу на інші додатки.
• Легша підтримка: Module Federation полегшує підтримку та оновлення кожного додатку, без впливу на інші.
• Покращена співпраця: Module Federation дозволяє кільком командам працювати над різними додатками незалежно, не впливаючи на роботу один одного.

Module Federation в Angular

Angular надає вбудовану підтримку для Module Federation через модулі @angular/core та @angular/router.
Щоб використовувати Module Federation в Angular, потрібно створити новий Angular додаток і налаштувати його для використання Module Federation.

Ось приклад того, як створити новий Angular додаток і налаштувати його для використання Module Federation:

Крок 1: Створення нового Angular додатку
Створіть новий Angular додаток за допомогою Angular CLI:

ng new my-app

Крок 2: Налаштування Module Federation

У додатку my-app створіть новий файл під назвою module-federation.config.js:

module.exports = {  
 name: 'my-app',  
 remotes: [  
 {  
 name: 'remote-app',  
 url: 'http://localhost:4201/remoteEntry.js',  
 },  
 ],  
};

Цей конфігураційний файл визначає ім'я додатку та URL для віддаленого додатку.

Крок 3: Створення віддаленого додатку

Створіть новий Angular додаток за допомогою Angular CLI:
ng new remote-app

У додатку remote-app створіть новий файл під назвою module-federation.config.js:

module.exports = {  
 name: 'remote-app',  
 exposes: [  
 {  
 name: 'remote-component',  
 component: './remote-component/remote-component.component',  
 },  
 ],  
};

Цей конфігураційний файл визначає ім'я додатку та компонент, який буде виставлений для хост-додатку.

Крок 4: Налаштування хост-додатку

У додатку my-app створіть новий файл під назвою app.module.ts:

import { NgModule } from '@angular/core';  
import { BrowserModule } from '@angular/platform-browser';  
import { RouterModule } from '@angular/router';  
import { ModuleFederationModule } from '@angular/core';  

@NgModule({  
 declarations: [AppComponent],  
 imports: [  
 BrowserModule,  
 RouterModule.forRoot([  
 {  
 path: 'remote',  
 loadChildren: () => import('remote-app/remote-component').then(m => m.RemoteComponentModule),  
 },  
 ]),  
 ModuleFederationModule.forRoot({  
 name: 'my-app',  
 remotes: [  
 {  
 name: 'remote-app',  
 url: 'http://localhost:4201/remoteEntry.js',  
 },  
 ],  
 }),  
 ],  
 providers: [],  
 bootstrap: [AppComponent],  
})  
export class AppModule {}

Цей конфігураційний файл визначає хост-додаток і віддалений додаток.

Висновок

Module Federation — це потужна техніка для створення та розгортання кількох незалежних додатків як єдиного додатку. Вона має кілька переваг, зокрема незалежну розробку та розгортання, покращену масштабованість, легшу підтримку та полегшену співпрацю. Angular надає вбудовану підтримку для Module Federation через модулі @angular/core та @angular/router. Виконуючи кроки, наведенні в цьому прикладі, ви зможете створити новий Angular додаток і налаштувати його для використання Module Federation.

Angular #ModuleFederation #MicroFrontends #ScalableApplications #MaintainableApplications #Collaboration #AngularDevelopment #WebDevelopment #SoftwareEngineering #FrontendDevelopment

Перекладено з: Angular Module Federation: A New Way to Build and Deploy Applications