Розкриття потенціалу Microfrontends з використанням автономних компонентів Angular та Native Federation.

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

Що таке мікрофронтенди?

Мікрофронтенди розширюють концепцію мікросервісів на фронтенд, дозволяючи створювати менші, самостійно функціонуючі модулі, які можуть бути розроблені, протестовані та розгорнуті незалежно. Такий підхід сприяє кращій співпраці, прискорює розробку і забезпечує безшовну інтеграцію різних частин додатка.

Потужність Angular:

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

Зустрічайте Native Federation:

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

Різниця між Module Federation та Native Federation:

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

Тоді як Module Federation керує інтеграцією під час виконання через механізми Webpack, Native Federation використовує нативні можливості Angular, що забезпечує більш безшовний і цілісний досвід для додатків на Angular. Native Federation оптимізовано саме для Angular, що може призвести до кращої продуктивності та швидших збірок у порівнянні з додатковими витратами, які вводить Webpack у Module Federation.

Крім того, Module Federation є незалежним від фреймворка, що надає гнучкість для інтеграції з іншими фреймворками або кастомними налаштуваннями. Native Federation, однак, призначена виключно для Angular, що робить її ідеальним вибором для розробників, які працюють з екосистемою Angular. Хоча Module Federation має міцну спільноту та екосистему плагінів, Native Federation — це новий підхід, що швидко здобуває підтримку в середовищі Angular.

Наша подорож до мікрофронтендів:

У цьому блозі ми здійснимо практичне дослідження мікрофронтендів за допомогою Angular та Native Federation. Ми проведемо вас через створення двох додатків Angular — віддаленого додатку (microfrontend_remote) і хост-додатку (microfrontend_host). З допомогою покрокових інструкцій та фрагментів коду ви побачите процес розділення додатка на мікрофронтенди та їх динамічне об'єднання для створення повноцінного єдиного додатку.

Ключові теми, які ми розглянемо:

1. Розуміння концепцій віддалених і хостових додатків.
2. Налаштування Native Federation у додатках Angular.
3. Динамічне завантаження та інтеграція віддалених модулів у хостовий додаток.
4. Використання спільних залежностей для забезпечення цілісного користувацького досвіду.

Приєднуйтесь до нас на цій подорожі, щоб розкрити весь потенціал мікрофронтендів з Angular та Native Federation.

Незалежно від того, чи є ви досвідченим розробником Angular, чи тільки цікавитесь сучасними архітектурами фронтенду, цей блог обіцяє надати корисні поради, практичні рекомендації та можливість отримати практичний досвід, що дозволить підвищити ваші навички веб-розробки. Давайте зануримось!

Якщо ви хочете вивчити основи мікрофронтендів, перегляньте цей ресурс.

[

Розуміння Мікрофронтендів

Розуміння Мікрофронтендів

Understanding Microfrontendsblog.stackademic.com

](https://blog.stackademic.com/understanding-microfrontends-72ba9fdb0d67?source=post_page-----c7a40ec7a43c--------------------------------)

Якщо ви хочете реалізувати Module Federation, перегляньте цей ресурс.

https://blog.stackademic.com/unleashing-the-power-of-microfrontends-with-angular-standalone-components-module-federation-897ae213c787

1. Розуміння концепцій віддалених і хостових додатків.

Природа:
- Віддалений додаток (`microfrontendremote): Незалежно розгортаний додаток на Angular.
- Хостовий додаток (microfrontendhost`): Додаток на Angular, відповідальний за оркестрацію мікрофронтендів.

Експортування модулів:
- Віддалений додаток: Експортує конкретні модулі Angular для використання іншими додатками.
- Хостовий додаток: Динамічно завантажує та компонує віддалені модулі в інтерфейсі.

Динамічне завантаження:
- Віддалений додаток: Модулі завантажуються динамічно під час виконання.
- Хостовий додаток: Виявляє та завантажує віддалені модулі динамічно під час виконання.

Конфігурація:
- Віддалений додаток: Налаштований на експорт конкретних модулів (наприклад, MicrofrontendRemoteModule).
- Хостовий додаток: Налаштований на знання про існування віддалених додатків.

Управління залежностями:
- Віддалений додаток: Може мати спільні залежності, але працює незалежно.
- Хостовий додаток: Керує залежностями і забезпечує сумісність з віддаленими модулями.

Канал комунікації:
- Віддалений додаток: Експонує функціональності через чітко визначені API та інтерфейси.
- Хостовий додаток: Використовує API, надані віддаленими модулями, для інтеграції функціональності.

Ізоляція:
- Віддалений додаток: Працює в своєму контексті, ізольовано від інших віддалених додатків.
- Хостовий додаток: Забезпечує ізоляцію між віддаленими додатками для незалежної розробки.

2.

Налаштування Native Federation в додатках Angular

Давайте слідувати наведеним крокам, щоб створити два додатки: ‘microfrontendremote’ та ‘microfrontendhost’, а також налаштувати їх.

ng new microfrontend_remote

ng new microfrontend_host

Тепер додаємо підтримку native federation

ng add @angular-architects/native-federation

Я буду хостити ‘microfrontendremote’ на порту 4300, а ‘microfrontendhost’ — на порту 4200.

Я створив базовий компонент входу в мій проект ‘microfrontend_remote’, який буду експонувати для хоста.

login.component.html

Login
Username:        
Password:        
Login        

login.component.ts
```
import { Component } from '@angular/core';

@Component({
selector: 'app-login',
standalone: true,
imports: [],
templateUrl: './login.component.html',
styleUrl: './login.component.css'
})
export class LoginComponent { }
```

Тепер давайте детальніше розглянемо файли federation.config.js, які потрібно налаштувати.

federation.config.js для ‘microfrontend_remote’
Зверніть увагу на частину exposes. Я визначив експортований модуль/компонент саме тут.

const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({
  name: 'microfrontend_remote',
  exposes: {
    './Component': './src/app/login/login.component.ts',
  },
  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
  skip: [
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket',
    // Додайте інші пакети, які вам не потрібні під час виконання
  ]
});

main.ts для ‘microfrontend_host’
Зверніть увагу на частину initFederation. Саме тут відбувається магія, і тут налаштовуються віддалені додатки для використання.

import { initFederation } from '@angular-architects/native-federation';

initFederation({
  "microfrontend_remote": "http://localhost:4300/remoteEntry.json",
})
  .catch(err => console.error(err))
  .then(_ => import('./bootstrap'))
  .catch(err => console.error(err));

Отже, це все, що стосується налаштування native federation та компонентів Angular. Тепер давайте перейдемо до того, як викликати віддалений компонент, і ми будемо готові до роботи.

3.

Динамічне завантаження та інтеграція віддалених модулів у хост-додаток

Давайте подивимося, як споживати спільні віддалені компоненти в app.routes.ts додатка ‘microfrontend_host’.

app.routes.ts

import { loadRemoteModule } from '@angular-architects/native-federation';  
import { Routes } from '@angular/router';  

export const routes: Routes = [  
 {  
 path: '',  
 loadComponent: () =>  
 loadRemoteModule('microfrontend_remote', './Component').then((m) => m.LoginComponent),  
 }  
];

Ось і все, з цими налаштуваннями ви готові почати працювати з native federation в Angular.

4. Використання потужності спільних залежностей для забезпечення єдиного досвіду користувача

Спільні залежності в Microfrontends:

Спільні залежності — це загальні бібліотеки, модулі чи компоненти, які використовуються як віддаленими, так і хост-додатками в архітектурі microfrontend.

Ці залежності відіграють важливу роль у забезпеченні узгодженості та уникненні дублювання в різних частинах microfrontends.

Типові випадки використання:

Основні модулі Angular: Спільні модулі Angular, такі як FormsModule або HttpClientModule, забезпечують однакову поведінку в усіх microfrontends.

Користувацькі UI компоненти: Компоненти, такі як кнопки, елементи форм або панелі навігації, можуть бути спільно використовувані для надання єдиного вигляду та відчуття.

Утиліти: Спільні утиліти чи сервіси можна використовувати для досягнення однакової функціональності.

Важливість спільних залежностей:

Узгодженість:

Спільні залежності забезпечують єдиний досвід користувача, гарантуючи, що спільні функціональності та елементи UI залишаються однаковими в усіх частинах microfrontends.

Користувачі, взаємодіючі з різними частинами додатка, повинні зустрічати єдиний дизайн і поведінку.

Уникнення дублювання:

Замість того щоб дублювати код в різних частинах microfrontends, спільні залежності запобігають цьому. Зміни або оновлення спільних компонентів відображаються в усіх частинах додатка однаково.

Ефективна розробка:

Розробники можуть зосередитися на створенні унікальних функцій для кожного microfrontend без необхідності переробляти загальні функціональності. Це дозволяє скоротити цикли розробки.

Підтримуваність:

Централізування спільних функціональностей у спільних залежностях підвищує підтримуваність. Оновлення чи виправлення можна застосовувати централізовано, знижуючи ризик несумісностей.

Висновок:

У динамічному світі microfrontends з Angular і Module Federation ми розкрили парадигму, де модульність поєднується зі масштабованістю. Переглянувши microfrontend_remote та microfrontend_host, ми використовували потужність динамічного завантаження, налаштовуючи безперешкодну інтеграцію.

Спільні залежності стали непомітними героями, які забезпечили узгодженість через всю мікрофронтенд-систему. Від кнопок до складних UI елементів, централізація цих елементів спростила розробку та покращила досвід користувача.

На завершення, пам'ятайте: Microfrontends — це не просто структура коду; це гнучка стратегія для майбутнього. Озброєні цією знанням, рушайте вперед, створюйте модульні дива, і нехай ваш код відлунює в коридорах інновацій. Щасливої розробки, новаторе!

Перекладено з: Unleashing the Power of Microfrontends with Angular standalone components & Native Federation.