Які існують методи реалізації архітектури мікрофронтенду, що застосовуються в сучасній практиці? Ось два вирішення цього питання:
1. Реалізація мікрофронтенду, як додатка, поділеного на компоненти. Завдяки цьому можна досягти більшої міри деталізації програми. Але через це ускладнюється побудова належної абстракції та зменшується перевага архітектури мікрофронтенду.
2. Мікрофронтенд у вигляді сторінки. Такий підхід передбачає, що додатку відповідає одна сторінка. Завдяки цьому вдається уникнути жорсткої залежності у напрямі “батьки”-“діти”. До цього способу реалізації архітектури мікрофронтенду, що вивчається на Front End курсах онлайн, вдаються розвинені розробники.
Як організувати повідомлення між програмами
Одним із проблемних моментів в архітектурі мікрофронтенду є обмін даними. Інформація має різні формати – компоненти інтерфейсу або підпрограми-процедури. Мікропрограма не повинна бути побудована на кшталт сховища даних. Інформація повинна зберігатись в окремих шарах програми.
Це можна уявити, як взаємодія frontend – backend, де frontend – це додаток, а backend (шар даних) – загальна бібліотека. Елементи інтерфейсу та утиліти також належать тому ж типу, що й бібліотеки, що багаторазово використовуються. Така структура робить можливим повідомлення між додатками завдяки загальним даним згідно матеріалу курсів з Front End.
Є ще кілька способів комунікації між мікропрограмами, про які слід згадати.
Перше: Використання можливостей сховища браузера. Це localStorage, sessionStorage, cockies для зберігання інформації сесії або метаданих користувача, або якісь складні структури indexedDB.
Друге: організація передачі даних між програмами через параметри пакетів маршрутизатора.
Чому саме Angular?
Angular (фреймворк JavaScript) надає просунуту архітектуру, яка відмінно відповідає принципам монорежиму та фундаментальним принципам фронтенду.
Архітектура високого рівня розділена на три складові:
1. Робоче середовище,
2. Проекти.
3. Бібліотеки.
При ініціалізації робочого середовища Angular створюється несуча конструкція програми. Воно включає до свого складу проекти та бібліотеки. У ролі проекту може виступати мікро-додаток, що має індивідуальну точку входу і гнучку і настроювану структуру.
Бібліотеки обмінюються багаторазовими даними між проектами. Це пакети інформації, елементи інтерфейсу та процедури. Модулі Angular – основні будівельні блоки. Вони інкапсулюють функції, набір компонентів чи сторінку. Це найкращий спосіб організувати фронтенд.