Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/6646| Назва: | Проєктування мікрофронтенд- архітектури для побудови розподілених вебсистем |
| Автори: | Нечипоренко, Ольга Петров, Костянтин |
| Дата публікації: | 2025 |
| Короткий огляд (реферат): | Сучасні вебсистеми стають дедалі складнішими, а вимоги до їхньої масштабованості, гнучкості та швидкості оновлення постійно зростають. Традиційні монолітні підходи до розробки фронтенду ускладнюють підтримку великих вебпорталів, особливо коли різні модулі створюються окремими командами. У зв’язку з цим актуальним є застосування мікрофронтенд- архітектури, яка дозволяє розділити інтерфейс на автономні модулі, що можуть незалежно розроблятися, оновлюватися та масштабуватися. Це забезпечує гнучкість у використанні різних технологій, спрощує процес підтримки системи та прискорює впровадження змін. Метою є проєктування та реалізація мікрофронтенд-архітектури для багатофункціональної CMS-платформи з підтримкою незалежної розробки модулів і використання різних технологій. Наукова новизна – це новий підхід до організації мікрофронтендів, що забезпечує незалежну розробку модулів різними командами, технологічну гнучкість та інтеграцію компонентів у єдину систему. Практична цінність результатів полягає в тому, що мікрофронтенд- архітектура дозволяє створювати масштабовані та гнучкі вебсистеми, спрощує оновлення модулів і інтеграцію різних технологій; реалізація прототипу CMS демонструє її застосовність у реальних проектах. Висновки включають в себе основні результати роботи. У додатках наведено специфікацію, текст програми та інструкцію користувача. Загальний обсяг роботи становить 88 сторінок. У кваліфікаційній роботі магістра 14 рисунків та 3 додатки. Для виконання роботи використано 25 літературних джерел. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/6646 |
| Розташовується у зібраннях: | 123 Комп’ютерна інженерія (Системне програмування) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| 1_ТИТУЛКА_Петров-merged.pdf Restricted Access | 2.29 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНОЇ БЕЗПЕКИ ТА КОМП’ЮТЕРНОЇ
ІНЖЕНЕРІЇ
Пояснювальна записка
до кваліфікаційної роботи магістра
на тему: «Проєктування мікрофронтенд-
архітектури для побудови розподілених вебсистем»
ЧДТУ.252403.005 ПЗ
Виконав: студент 2 курсу, групи МСП-2406
спеціальності 123 – Комп’ютерна інженерія
за освітньою програмою – Системне
програмування
Костянтин ПЕТРОВ
Керівник
к.т.н., доцент Ольга НЕЧИПОРЕНКО
Н. контроль
Світлана ГРЕСЬКО
Рецензент
«ЗАХИСТ ДОЗВОЛЯЮ»
Завідувач кафедри ІБ та КІ
к.т.н., доцент ______ Артем ЛАВДАНСЬКИЙ
Черкаси 2025 року
Форма № Н-9.01
Черкаський державний технологічний університет
Факультет інформаційних технологій і систем
Кафедра інформаційної безпеки та комп‘ютерної інженерії
Освітньо-кваліфікаційний рівень магістр
Спеціальність 123 – Комп’ютерна інженерія
Освітня програма Системне програмування
«ЗАТВЕРДЖУЮ»
Завідувач кафедри _____ Артем ЛАВДАНСЬКИЙ
«08» жовтня 2025 року
ЗАВДАННЯ
на кваліфікаційну роботу магістра студенту
Петрову Костянтину Валерійовичу
(прізвище, ім‘я, по батькові)
1. Тема роботи Проєктування мікрофронтенд-архітектури для побудови
розподілених вебсистем
Керівник роботи: Нечипоренко Ольга Володимирівна, к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «07» жовтня 2025р. № 307/03-03
2. Строк подання студентом роботи
3. Вихідні дані до роботи:
Мікрофронтенди, CMS, розподілені вебсистеми, фронтенд-архітектура, модульні вебдодатки,
Angular, Vue.js, Node.js, Webpack, Micro Frontends, SPA, REST API, GraphQL, Docker, Kubernetes,
масштабовані вебсистеми, багатокомандна розробка, JavaScript, React, CI/CD.
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
Розділ 1 Аналіз предметної області та постановка задачі дослідження
Розділ 2 Вибір технології та інструментальних засобів розробки системи
Розділ 3 Розробка мікрофронтенд-архітектури для побудови розподілених вебсистем
Розділ 4 Захист мікрофронтенд-архітектури для побудови розподілених вебсистем
Висновки
Перелік скорочень та умовних позначень
Список використаних джерел
Додатки
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів):
Додаток А Специфікація
Додаток Б Текст програм
Додаток В Інструкція користувача
6. Консультанти розділів роботи
Підпис, дата
Розділ Прізвище, ініціали та
посада завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 08 жовтня 2025 року
КАЛЕНДАРНИЙ ПЛАН
№ з/п Назва етапів кваліфікаційної роботи магістра Строк виконання
етапів роботи Примітка
1 Збір матеріалу 07.10 – 20.10 виконано
2 Обробка матеріалу 21.10 – 06.11 виконано
3 Обґрунтування актуальності виконання виконано
досліджень 07.11 – 10.11
4 Оцінка стану проблеми, виокремлення виконано
дослідницьких задач, постановка задачі 11.11 – 15.11
дослідження
5 Викладення сутності і результатів дослідження 16.11– 27.11 виконано
6 Практичне застосування результатів
дослідження 28.11 – 30.11 виконано
7 Оформлення результатів в пояснювальну записку 01.12 – 03.12 виконано
8 Подання роботи на відгук та рецензування 04.12.25 виконано
Студент-магістрант ____________________________ Костянтин ПЕТРОВ
(підпис)
Керівник роботи _____________________________ Ольга НЕЧИПОРЕНКО
(підпис)
АНОТАЦІЯ
Сучасні вебсистеми стають дедалі складнішими, а вимоги до їхньої
масштабованості, гнучкості та швидкості оновлення постійно зростають.
Традиційні монолітні підходи до розробки фронтенду ускладнюють підтримку
великих вебпорталів, особливо коли різні модулі створюються окремими
командами. У зв’язку з цим актуальним є застосування мікрофронтенд-
архітектури, яка дозволяє розділити інтерфейс на автономні модулі, що
можуть незалежно розроблятися, оновлюватися та масштабуватися. Це
забезпечує гнучкість у використанні різних технологій, спрощує процес
підтримки системи та прискорює впровадження змін.
Метою є проєктування та реалізація мікрофронтенд-архітектури для
багатофункціональної CMS-платформи з підтримкою незалежної розробки
модулів і використання різних технологій.
Наукова новизна – це новий підхід до організації мікрофронтендів, що
забезпечує незалежну розробку модулів різними командами, технологічну
гнучкість та інтеграцію компонентів у єдину систему.
Практична цінність результатів полягає в тому, що мікрофронтенд-
архітектура дозволяє створювати масштабовані та гнучкі вебсистеми, спрощує
оновлення модулів і інтеграцію різних технологій; реалізація прототипу CMS
демонструє її застосовність у реальних проектах.
Висновки включають в себе основні результати роботи. У додатках
наведено специфікацію, текст програми та інструкцію користувача. Загальний
обсяг роботи становить 88 сторінок. У кваліфікаційній роботі магістра
14 рисунків та 3 додатки. Для виконання роботи використано 25 літературних
джерел.
Ключові слова: ВЕБСИСТЕМИ, МІКРОФРОНТЕНД-АРХІТЕКТУРА,
CMS-ПЛАТФОРМИ, БАГАТОФУНКЦІОНАЛЬНІСТЬ, АВТОНОМНІ
МОДУЛІ, ГНУЧКІСТЬ, МАСШТАБОВАНІСТЬ
ANNOTATION
Modern web systems are becoming increasingly complex, and the
requirements for their scalability, flexibility, and speed of update are constantly
increasing. Traditional monolithic approaches to frontend development make it
difficult to support large web portals, especially when different modules are created
by separate teams. In this regard, the use of microfrontend architecture is relevant,
which allows dividing the interface into autonomous modules that can be
independently developed, updated, and scaled. This provides flexibility in using
different technologies, simplifies the system support process, and accelerates the
implementation of changes.
The goal is to design and implement a microfrontend architecture for a
multifunctional CMS platform with support for independent module development
and the use of different technologies.
Scientific novelty is approach to the organization of microfrontends is
proposed, which provides independent development of modules by different teams,
technological flexibility and integration of components into a single system.
The practical value of the results is that the microfrontend architecture allows
you to create scalable and flexible web systems, simplifies module updates and
integration of various technologies; the implementation of the CMS prototype
demonstrates its applicability in real projects.
The conclusions include the main results of the work. The appendices contain
the specification, program text and user manual. The total volume of the work is
88 pages. The master's qualification work includes 14 figures and 3 appendices.
25 literary sources were used to perform the work.
Key words: WEB SYSTEMS, MICROFRONTEND ARCHITECTURE,
CMS PLATFORMS, MULTIFUNCTIONALITY, AUTONOMOUS MODULES,
FLEXIBILITY, SCALABILITY
2
ЗМІСТ
ВСТУП…………………………………………………………………………. 4
РОЗДІЛ 1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА
ЗАДАЧІ ДОСЛІДЖЕННЯ…………………………………………………..... 8
1.1 Аналіз предметної області……………………………………...….. 8
1.2 Вибір напряму дослідження……………………………………….. 13
1.3 Постановка задачі…………………………………………………... 19
1.4 Висновки до розділу 1……………………………………………… 23
РОЗДІЛ 2 ВИБІР ТЕХНОЛОГІЇ ТА ІНСТРУМЕНТАЛЬНИХ ЗАСОБІВ
РОЗРОБКИ СИСТЕМИ………………………………………………………. 25
2.1 Огляд існуючих технологій………………………………………... 25
2.2 Вибір технологій …………………………………………………... 41
2.3 Висновки до розділу 2……………………………………………… 47
РОЗДІЛ 3 РОЗРОБКА МІКРОФРОНТЕНД-АРХІТЕКТУРИ ДЛЯ
ПОБУДОВИ РОЗПОДІЛЕНИХ ВЕБСИСТЕМ……………………………... 49
3.1 Структура системи…………………………………………………. 49
3.2 Опис функцій системи……………………………………………... 57
3.3 Технічні вимоги для роботи з системою………………………....... 67
3.4 Оцінка ефективності …………......................................................... 69
3.5 Висновки до розділу 3……………………………………………… 72
РОЗДІЛ 4 ЗАХИСТ МІКРОФРОНТЕНД-АРХІТЕКТУРИ ДЛЯ
ПОБУДОВИ РОЗПОДІЛЕНИХ ВЕБСИСТЕМ……………………………... 73
4.1Огляд існуючих рішень ……………………………………………. 73
4.2 Реалізація захисту даних у мікрофронтенд-архітектурі.………… 80
4.3 Висновки до розділу 4……………………………………………… 83
ВИСНОВКИ…………………………………………………………………… 84
ПЕРЕЛІК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ…………………..... 86
3
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ…………………………………… 87
ДОДАТКИ:
А – 482.ЧДТУ.52403-01 Проєктування мікрофронтенд-архітектури
для побудови розподілених вебсистем
Б – 482.ЧДТУ.52403-01 12 01 Проєктування мікрофронтенд-
архітектури для побудови розподілених вебсистем. Текст
програми
В – 482.ЧДТУ.52403-01 34 01 Проєктування мікрофронтенд-
архітектури для побудови розподілених вебсистем. Інструкція
користувача
4
ВСТУП
Актуальність теми дослідження. У сучасних умовах стрімкого
розвитку цифрових технологій вебсистеми стають дедалі масштабнішими та
функціонально складнішими. Зростаючі вимоги до продуктивності, надійності
та безперервної доступності таких систем обумовлюють необхідність
використання архітектурних підходів, які забезпечують високу гнучкість і
можливість швидкої адаптації до нових потреб бізнесу та користувачів.
Традиційні монолітні моделі фронтенд-розробки вже не відповідають цим
вимогам, оскільки ускладнюють підтримку, масштабування та оновлення
великомасштабних вебпорталів.
Особливо гостро ці проблеми проявляються у розподілених
вебсистемах, де різні підсистеми та модулі розробляються окремими
командами. За таких умов монолітна структура інтерфейсу призводить до
високої залежності між компонентами, збільшення часу розробки та
підвищення ризиків, пов’язаних з оновленням або розширенням функціоналу.
Відсутність ізоляції між частинами системи створює значні технічні
обмеження та ускладнює впровадження інноваційних рішень.
Мікрофронтенд-архітектура виступає перспективним підходом, що
дозволяє усунути зазначені недоліки. Поділ інтерфейсу на автономні модулі
надає можливість незалежного розвитку окремих компонентів, зменшує
взаємозалежності між командами та забезпечує високу гнучкість щодо вибору
технологій. Такий підхід дозволяє прискорити процес розробки, підвищити
стабільність системи та зменшити ризики, пов’язані з розгортанням оновлень.
У контексті розробки багатофункціональних корпоративних систем,
включаючи платформи типу CMS, застосування мікрофронтенд-архітектури
є особливо актуальним. Це дає змогу створювати розподілені вебсистеми, які
легко масштабуються, підтримують багатокомандну розробку та
5
характеризуються високою стійкістю до змін. Таким чином, дослідження
принципів проєктування мікрофронтенд-архітектур і їх практичного
впровадження має вагоме наукове та прикладне значення.
Метою кваліфікаційної роботи є проєктування та розроблення
мікрофронтенд-архітектури для побудови розподіленої вебсистеми на
прикладі багатофункціональної CMS-платформи, яка забезпечує незалежний
розвиток окремих модулів, підтримує багатокомандну розробку та допускає
використання різних технологій у межах одного програмного комплексу.
Основні завдання та цілі роботи включають:
1. Проаналізувати сучасні підходи до побудови вебсистем.
2. Дослідити проблеми розподіленої розробки великих порталів.
3. Розробити концепцію мікрофронтенд-архітектури.
4. Створити прототип CMS із мікрофронтендами.
5. Забезпечити технологічну гнучкість модулів.
6. Провести оцінку її ефективності.
У книзі «The Art of Micro Frontends» Флоріана Раппла дає глибоке
розуміння, коли і чому доцільно використовувати мікрофронтенди, а не інші
підходи. Вона аналізує переваги та виклики мікрофронтенд-архітектури,
розглядає різні патерни інтеграції (client-side, server-side, edge-side, SPA,
«site-less UIs»), і дає інструменти для прийняття архітектурних рішень.
Окрім технічних аспектів, автор розглядає організаційні питання: як
повинні бути структуровані команди, як організувати робочий процес, деплой,
тестування, ‒ тобто охоплює як архітектуру, так і практичне застосування
мікрофронтендів у реальних проєктах.
Об'єкт дослідження ‒ є розподілені вебсистеми та їх
фронтенд-архітектура, зокрема підходи до організації мікрофронтендів для
забезпечення незалежної розробки, масштабованості та гнучкості модулів.
Предмет дослідження ‒ методи, принципи та технології проєктування
мікрофронтенд-архітектури, що дозволяють реалізувати багатомодульні
6
вебсистеми з незалежним розвитком компонентів та інтеграцією різних
технологій.
Наукова новизна полягає в новому підході до проєктування
мікрофронтенд-архітектури, який забезпечує незалежну розробку та
оновлення модулів різними командами, використання різних технологій для
окремих компонентів та інтеграцію їх у єдину вебсистему. Реалізація
прототипу CMS підтверджує ефективність запропонованого підходу.
Практична цінність полягає в тому, що запропонована мікрофронтенд-
архітектура дозволяє створювати масштабовані та гнучкі вебсистеми, які
підтримують багатокомандну розробку, спрощують оновлення модулів та
інтеграцію різних технологій. Реалізація прототипу CMS демонструє її
застосовність у реальних корпоративних проектах.
Апробація результатів роботи. Результати кваліфікаційної роботи
доповідалися і обговорювалися на ІХ Міжнародній науковій конференції
«Традиційні та інноваційні підходи до наукових досліджень» (4 липня 2025р.,
м. Ужгород).
Публікації. Результати досліджень опубліковані в:
1. Планування експериментальних досліджень у науковій
діяльності: методологічні основи та практичні основи / К. В. Петров //
Традиційні та інноваційні підходи до наукових досліджень: збірник наукових
праць IX Міжнародної наукової конференції, м. Ужгород, 4 липня 2025р.
Міжнародний центр наукових досліджень. Вінниця: ТОВ «УКРЛОГОС Груп,
2025. С. 138-139.
Кваліфікаційна робота складається з 4-х розділів, в яких подається
інформація про:
1. У першому розділі розглядається аналіз предметної області та
постановка задачі.
2. У другому розділі оцінюються доступні технології та обираються
підходи для розробки.
7
3. У третьому розділі розробляється система та оцінюється її ефективність.
4. У четвертому розділі розглядається захист розробленої системи.
Використана література, під час написання кваліфікаційної роботи,
досить добре розкриває тему та відображає потреби для аналізу.
8
РОЗДІЛ 1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА
ЗАДАЧІ ДОСЛІДЖЕННЯ
1.1 Аналіз предметної області
У сучасних умовах цифрової економіки вебсайт компанії виступає
ключовим інструментом комунікації з клієнтами, партнерами та ринком
загалом. Наявність власного сайту дозволяє організації представити себе у
глобальному інформаційному просторі, забезпечити доступ до актуальної
інформації про товари, послуги, новини та події компанії. Вебсайт слугує
платформою для формування іміджу бренду та підвищення впізнаваності на
ринку.
Крім того, вебсайт забезпечує оперативний доступ користувачів до
сервісів компанії, включно з онлайн-консультаціями, електронною комерцією,
реєстраціями на події чи інтерактивними сервісами. Це дозволяє зменшити
навантаження на фізичні офіси та підвищити ефективність бізнес-процесів.
Наявність власного сайту також забезпечує контроль над інформаційним
простором. Компанія може самостійно формувати контент, оновлювати його
без затримок та адаптувати до потреб різних аудиторій. Це особливо важливо
в умовах швидких змін на ринку та підвищеної конкуренції, коли своєчасне
донесення інформації до клієнта може стати конкурентною перевагою.
Вебсайт виступає платформою для збору та аналізу даних користувачів,
що дозволяє підвищувати ефективність маркетингових стратегій,
персоналізувати пропозиції та оптимізувати комунікаційні процеси. Аналітика
відвідуваності, поведінки користувачів та конверсій дозволяє компанії
приймати обґрунтовані рішення та підвищувати рентабельність діяльності.
Наявність власного вебсайту є необхідною умовою сучасного ведення
бізнесу, що забезпечує компанії стратегічні переваги, гнучкість у взаємодії з
клієнтами та ефективність внутрішніх і зовнішніх процесів.
9
У 2025 році вимоги до вебдодатків значно зросли через збільшення
кількості користувачів мобільних та десктопних пристроїв, а також через
потребу забезпечити високу продуктивність, інтерактивність і персоналізацію
сервісів. Традиційні багатосторінкові вебсайти (MPA) часто не здатні
забезпечити миттєву взаємодію з користувачем, оскільки кожна дія вимагає
повного перезавантаження сторінки. SPA (Single Page Application) дозволяють
завантажити основну структуру додатку один раз, після чого всі взаємодії
обробляються на клієнтській стороні, що забезпечує швидке оновлення
контенту без перезавантаження сторінки, зменшує навантаження на сервер та
покращує користувацький досвід.
SPA-технології добре інтегруються з сучасними фронтенд-
фреймворками, такими як React, Angular та Vue.js, що в 2025 році є стандартом
для масштабованих і складних вебдодатків. Використання цих технологій
дозволяє організувати компонентну структуру додатку, повторно
використовувати код, впроваджувати сучасні практики DevOps та CI/CD, а
також спрощує розгортання оновлень і масштабування фронтенду [1].
Використання SPA також забезпечує гнучку інтеграцію з бекенд-
сервісами через REST API або GraphQL, що дозволяє відокремити фронтенд
від серверної логіки. Такий підхід підвищує технологічну гнучкість, дозволяє
командам розробників використовувати різні технології для різних модулів та
ефективно впроваджувати мікрофронтенд-архітектуру у багатокомандних
проектах.
SPA-технології активно підтримують Progressive Web Apps (PWA), що
забезпечує мобільну адаптивність, офлайн-режими, пуш-повідомлення та
швидке завантаження контенту. Це критично важливо у 2025 році, коли
мобільний трафік домінує, а користувачі очікують швидких, інтерактивних та
зручних додатків, порівнянних із нативними мобільними програмами.
Незважаючи на переваги, SPA мають свої виклики, такі як початковий
час завантаження, SEO-оптимізація та управління станом додатку. У 2025 році
10
ці проблеми вирішуються за допомогою серверного рендерингу (SSR),
пререндерингу, сучасних фреймворків (Next.js, Nuxt.js, Angular Universal) та
бібліотек управління станом (Redux, Vuex, Recoil) [2]. Це дозволяє отримати
швидкі, масштабовані, інтерактивні та SEO-оптимізовані вебдодатки.
SPA-технології забезпечують збір і аналіз даних користувачів, що
дозволяє оцінювати ефективність інтерфейсу, оптимізувати функціонал і
персоналізувати пропозиції. Інтеграція з аналітичними та хмарними сервісами
(AWS, Azure, Firebase) дозволяє реалізовувати масштабовані корпоративні
рішення та ефективно керувати бізнес-процесами через вебдодаток.
SPA є оптимальним підходом для розробки вебдодатків, оскільки вони
забезпечують високу продуктивність, інтерактивність, масштабованість,
гнучкість архітектури, покращений користувацький досвід та можливості для
аналітики і автоматизації бізнес-процесів, що робить їх актуальними для
корпоративних і комерційних вебсистем.
Розробка великих корпоративних порталів з використанням SPA-
технологій пов’язана з низкою викликів, що виникають через високу
складність архітектури та значний обсяг клієнтського коду. Одна з ключових
проблем ‒ надмірний початковий розмір JavaScript-бандлів, які потрібно
завантажувати перед першим рендером сторінки. У масштабних системах, що
містять десятки модулів і складні інтерфейси, розмір бандлу може
перевищувати сотні кілобайт або навіть мегабайти. Це призводить до
збільшення часу ініціалізації додатку, погіршення метрик продуктивності
(First Contentful Paint, Time to Interactive) та негативно впливає на
користувацький досвід, особливо при доступі з мобільних пристроїв або
повільних мереж.
Ще однією важливою проблемою є складність управління станом
великого SPA-додатку. У масштабних порталах існує багато взаємопов’язаних
компонентів, які обмінюються даними у реальному часі. Централізовані
сховища стану (Redux, Vuex тощо) із зростанням проєкту стають складними
11
для підтримки, вимагають ретельного контролю потоків даних та збільшують
ризик помилок, пов’язаних із некоректним оновленням або передачею стану.
Для великих команд розробників це створює додаткове навантаження на
процеси узгодження і синхронізації змін.
Великі SPA-портали також стикаються з проблемами SEO-оптимізації,
оскільки вміст здебільшого формується на клієнтській стороні. Хоча сучасні
пошукові системи здатні індексувати динамічний контент, у проєктах
великого масштабу це може бути нестабільним, що ускладнює просування
порталу в результатах пошуку. Для вирішення цієї проблеми застосовуються
технології серверного рендерингу (SSR) та статичної генерації (SSG), але вони
збільшують складність інфраструктури й вимагають додаткового технічного
досвіду.
Складність розробки також посилюється необхідністю забезпечення
високої продуктивності та оптимізації рендерингу UI. У великих порталах
існує велика кількість інтерактивних компонентів, які потребують ретельної
оптимізації, щоб уникнути надмірних перерендерів, втрати FPS у складних
інтерфейсах або затримок у виконанні бізнес-логіки. Неефективне
використання механізмів мемоізації, неконтрольований ререндер або погано
структурована компонентна ієрархія можуть суттєво знижувати
продуктивність.
Ще одна проблема ‒ складність командної розробки та масштабування
проєкту. У монолітному SPA різні команди працюють над однією кодовою
базою, що потребує узгоджених стандартів, суворої дисципліни у змінах, а
також збільшує ризик конфліктів у репозиторії. Це уповільнює швидкість
розробки й ускладнює підтримку модульності. Саме тому у великих компаніях
популярним рішенням стає перехід на мікрофронтенд-архітектуру, яка
дозволяє розподілити SPA на незалежні модулі.
SPA також підвищують вимоги до безпеки клієнтського коду, оскільки
значна частина логіки виконується у браузері. Це створює ризики, пов’язані з
12
XSS-атакми, маніпуляціями DOM, компрометацією токенів авторизації та
некоректним кешуванням. Забезпечення безпечної роботи великого SPA
потребує складних механізмів захисту та регулярного моніторингу
вразливостей.
Не менш важливою є проблема сумісності і підтримки довготривалих
проєктів, оскільки технології SPA швидко змінюються. Великі портали,
розроблені кілька років тому, можуть використовувати застарілі фреймворки
або бібліотеки, що ускладнює перехід на сучасні рішення через великий обсяг
коду та ризик порушення роботи бізнес-функцій.
У сучасних цифрових екосистемах компанії та організації працюють в
умовах швидких змін інформаційних потреб. Статичні вебсайти, хоча й прості
у реалізації, не здатні забезпечити необхідний рівень гнучкості, оновлюваності
та інтерактивності [3]. Саме тому створення вебресурсів на основі систем
керування контентом (CMS) стає критично важливим підходом для бізнесу,
державних установ і великих порталів, де оперативність та масштабованість
мають вирішальне значення.
Однією з ключових переваг CMS є можливість регулярного оновлення
даних без залучення програмістів. Контент-менеджери, редактори або інші
уповноважені особи можуть вносити зміни через зручну адміністративну
панель, що значно скорочує час публікації, зменшує витрати на підтримку та
підвищує ефективність управління інформацією. Це особливо важливо для
новинних порталів, маркетингових сайтів, електронної комерції та платформ,
де контент постійно змінюється.
Також динамічні вебсайти забезпечують вищий рівень персоналізації та
інтерактивності. На відміну від статичних сторінок, CMS дозволяє будувати
функції авторизації, кабінети користувачів, інтеграції з базами даних,
створення форм зворотного зв’язку, опитувань, кошиків покупок,
рекомендаційних систем. Це робить платформу більш корисною для кінцевого
користувача та розширює можливості бізнесу щодо взаємодії з аудиторією.
13
З технічного погляду CMS забезпечує масштабованість та
розширюваність архітектури. Сучасні CMS–платформи, такі як WordPress,
Strapi, Drupal або Headless CMS-рішення, дозволяють швидко інтегрувати
додаткові модулі, API та зовнішні сервіси - від платіжних систем до аналітики.
Це дає змогу нарощувати функціонал у відповідь на зростання бізнесових
потреб без повної переробки сайту.
Важливим аспектом є й оптимізація процесів SEO та маркетингових
інструментів. Динамічні платформи мають вбудовані механізми керування
метаданими, генерації sitemap.xml, оптимізації швидкості, структурованих
даних та інтеграції з аналітичними системами. Статичні сайти вимагають
ручного налаштування кожного елементу, що значно ускладнює просування
у пошукових системах.
Крім того, CMS забезпечує довгострокову підтримку та безпеку, адже
системи регулярно оновлюються, отримують патчі, нові функції та
інструменти захисту. Статичні сайти, навпаки, потребують окремого
контролю за кожним компонентом, що збільшує ризики вразливостей та
інцидентів безпеки.
Створення вебсайту у вигляді CMS, а не статичного ресурсу, є
стратегічно обґрунтованим рішенням у 2025 році. Це дозволяє компаніям
забезпечити швидкість оновлень, інтерактивність, масштабованість,
підвищену безпеку та гнучкість у керуванні цифровим контентом. Динамічні
системи створюють технологічний фундамент для побудови сучасних
платформ, які здатні адаптуватися до мінливих потреб ринку та забезпечувати
високий рівень взаємодії з користувачами.
1.2 Вибір напряму дослідження
Розподілена (дистрибутивна) розробка вебдодатків являє собою
організаційно-технологічний підхід, за якого створення програмного продукту
здійснюється кількома незалежними командами, що можуть бути географічно,
14
структурно або функціонально розмежовані. У контексті сучасних вебсистем
такий підхід передбачає декомпозицію цілісного продукту на окремі модулі -
фронтенд-підсистеми, бекенд-сервіси, інфраструктурні компоненти,
аналітичні модулі тощо. Це забезпечує можливість паралельної розробки,
ефективного масштабування людських ресурсів та залучення команд із різною
експертизою.
Ключовою умовою дистрибутивної розробки є архітектурна
модульність. Продукт поділяється на автономні компоненти з чітко
визначеними інтерфейсами взаємодії (рис.1.1).
Рисунок 1.1 ‒ Архітектурна модульність
У вебдодатках це проявляється у використанні мікросервісної
архітектури на стороні сервера та мікрофронтенд-архітектури на клієнтській
стороні. Кожен модуль має власний життєвий цикл, репозиторій, процес
тестування та стратегій розгортання, що дозволяє суттєво зменшити
міжкомандні залежності та мінімізувати ризики блокування розробки.
Одним з фундаментальних аспектів розподіленої розробки є
формалізація міжмодульних контрактів. До таких контрактів належать API-
15
специфікації, структури даних, подієві моделі та механізми передачі
повідомлень. Їхня версифікація, документування (з використанням
OpenAPI/Swagger, GraphQL-схем, AsyncAPI) та забезпечення зворотної
сумісності становлять критично важливий елемент надійної інтеграції.
Автоматичне генерування клієнтських SDK, валідаційних схем та mock-
сервісів сприяє прискоренню інтеграційних процесів між незалежними
командами [4].
Суттєву роль відіграє інструментальна підтримка розподіленого
процесу, яка охоплює системи контролю версій (Git), стандартизовані моделі
гілкування (GitFlow, Trunk-Based Development), а також платформи CI/CD.
Автоматизовані конвеєри збірки, тестування, статичного аналізу, виявлення
вразливостей і розгортання забезпечують можливість частих, безпечних і
передбачуваних релізів. Стандартизація CI/CD-процесів формує єдиний
технічний простір для всіх команд, одночасно дозволяючи враховувати
специфіку окремих модулів.
Організаційні аспекти, такі як планування, комунікація та управління
ризиками, є визначальними для успіху розподіленої розробки. Використання
підходів Scrum, Kanban, SAFe або їхніх адаптованих версій дозволяє
впорядкувати взаємодію між командами та визначити прозорі механізми
координації. Регулярні інтеграційні зустрічі, узгоджені SLA для міжкомандної
взаємодії, а також централізоване управління архітектурними рішеннями
забезпечують цілісність системи та зменшують імовірність виникнення
суперечливих змін у різних частинах проєкту.
Технічні виклики розподіленої розробки включають забезпечення
сумісності версій залежностей, узгодження середовищ виконання, управління
кешуванням та консистентністю даних. На фронтенді виникають додаткові
складнощі, пов’язані з підтримкою єдиного користувацького досвіду при
використанні різних фреймворків. Для їх розв’язання використовуються
16
дизайн-системи, спільні UI-бібліотеки, web components, а також механізми
композиції, такі як Webpack Module Federation.
Система тестування у розподілених архітектурах вимагає багаторівневої
структури, що охоплює юніт-тести, контрактні тести, інтеграційні сценарії та
end-to-end тестування у середовищах, наближених до продуктивних.
Застосування контейнеризації та принципу ephemeral environments забезпечує
можливість незалежної перевірки змін для кожної команди та модулю без
впливу на інші частини системи.
У питаннях безпеки розподілена розробка висуває розширені вимоги:
централізована автентифікація та авторизація (OAuth 2.0, OpenID Connect),
управління секретами (Vault, KMS), шифрування даних та аудит безпекових
подій. Впровадження принципів least privilege, мережевої сегментації та
політики secure-by-design мінімізує ризики поширення інцидентів між
модулями.
Сучасні розподілені системи потребують автоматизованої
інфраструктури, створеної за принципами інфраструктури як коду (IaC).
Принцип роботи IaC зображено на рисунку 1.2.
Рисунок 1.2 – Структура IaC
17
Використання Terraform, CloudFormation, Kubernetes, Helm та стратегій
розгортання Blue/Green або Canary дозволяє забезпечити високу доступність і
керованість складних вебсистем.
Моніторинг та Observability стали необхідними елементами підтримки
розподілених архітектур. Централізоване логування, збирання метрик
(Prometheus, Grafana), трасування запитів (Jaeger, Zipkin) та системи алертингу
дозволяють швидко локалізувати аномалії та здійснювати аналітику
продуктивності на рівні всієї системи.
Загалом розподілена розробка вебдодатків забезпечує високу
масштабованість, гнучкість та стійкість продуктів, однак потребує зрілих
інструментів, чітких процесів, формалізованих контрактів та продуманої
архітектури. У великих організаціях вона є фактично єдиним ефективним
способом створення складних, багатофункціональних вебплатформ.
Модульність ‒ це фундаментальний принцип програмної інженерії,
який передбачає поділ програмного забезпечення на окремі, логічно завершені
компоненти або модулі. Кожен модуль відповідає за виконання конкретного
набору функцій і може розроблятися, тестуватися та підтримуватися
незалежно від інших частин системи. У веб-додатках модульність реалізується
шляхом виділення фронтенд-модулів (наприклад, UI-компоненти, форми
введення, відображення даних), бекенд-модулів (обробка запитів, бізнес-
логіка, робота з базою даних) та інтеграційних модулів (API, взаємодія з
зовнішніми сервісами, мікросервіси).
Однією з ключових переваг модульного підходу є підвищення
підтримуваності та масштабованості системи. Кожен модуль ізольований від
інших, що дозволяє вносити зміни або покращення без ризику пошкодження
інших частин програми. Це особливо важливо для великих веб-додатків, де
одночасно працює багато розробників і додавання нового функціоналу
відбувається постійно. Модульна архітектура дозволяє швидко інтегрувати
18
нові сервіси або розширювати існуючі компоненти без необхідності
переписувати весь код.
Значущою перевагою є можливість паралельної розробки. Коли веб-
додаток розділений на модулі, декілька команд можуть одночасно працювати
над різними його частинами. Наприклад, одна команда займається модулем
обробки платежів, інша - інтерфейсом користувача, третя - системою
повідомлень. Такий підхід дозволяє значно скоротити час розробки,
ефективно використовувати ресурси та уникати «вузьких місць», коли всі
чекали завершення роботи однієї великої частини коду.
Модульність також сприяє повторному використанню коду. Незалежні
модулі можна легко інтегрувати у різні веб-додатки або проєкти без суттєвих
змін. Наприклад, модуль авторизації або обробки платежів може бути
розроблений один раз і застосовуватися у кількох проєктах. Це не лише
економить час і ресурси, але й підвищує узгодженість та надійність систем,
оскільки одна перевірена і відлагоджена логіка використовується
багаторазово.
Модульний підхід також значно спрощує тестування та відлагодження
системи. Оскільки кожен модуль можна перевіряти окремо, тестування стає
більш контрольованим і точним. Модульні тести дозволяють швидко виявляти
помилки у конкретній частині коду, без потреби запускати весь веб-додаток.
Крім того, ізоляція модулів підвищує стабільність системи, адже помилки в
одному модулі не поширюються на інші частини додатку.
Модульна архітектура забезпечує гнучкість та адаптивність системи.
Вона дозволяє легко замінювати або оновлювати окремі модулі, інтегрувати
нові технології чи сервіси, а також адаптувати веб-додаток до змін у бізнес-
процесах чи вимогах користувачів [5]. Це робить систему стійкішою до змін
та полегшує її розвиток у довгостроковій перспективі.
Загалом, модульна розробка веб-додатків підвищує ефективність
процесу розробки, сприяє оптимальному використанню ресурсів, підвищує
19
надійність та підтримуваність системи і забезпечує можливість її
масштабування та повторного використання компонентів. Такий підхід
сьогодні вважається стандартом для побудови сучасних, складних і
динамічних веб-додатків.
1.3 Постановка задачі
У сучасній веброзробці суттєву роль відіграє підхід створення
односторінкових застосунків (Single Page Application, SPA). На відміну від
традиційних багатосторінкових рішень, де кожен перехід між сторінками
супроводжується повним перезавантаженням HTML-документа з сервера,
SPA забезпечує динамічне оновлення контенту без переривання взаємодії
користувача з інтерфейсом. Завдяки цьому користувацький досвід стає значно
плавнішим і швидшим, що є критично важливим для корпоративних порталів,
систем керування контентом та e-commerce-рішень.
Ключовою характеристикою SPA є перенесення значної частини логіки
рендерингу з сервера на клієнт. Технології, такі як React, Angular, Vue.js та
інші фреймворки, дають можливість реалізовувати інтерактивні компоненти,
які оновлюються в реальному часі залежно від дій користувача або даних із
сервера. Це дозволяє створювати гнучкі інтерфейси, що реагують на зміни
стану системи без необхідності повного перезавантаження сторінки.
SPA-архітектура значно покращує ефективність роботи з API.
Використання сучасних протоколів обміну даними, таких як REST або
GraphQL, забезпечує швидке отримання лише необхідних даних, що зменшує
мережеві затримки та підвищує продуктивність. У контексті розподілених
вебсистем це є особливо важливим, оскільки дозволяє кожному модулю або
сервісу незалежно управляти власними даними та логікою, мінімізуючи
залежності між командами розробників.
Важливою перевагою SPA підходу є можливість масштабування як на
технічному, так і на організаційному рівні. Оскільки інтерфейс складається з
20
автономних компонентів, команди можуть розробляти різні частини системи
паралельно, використовуючи різні технологічні стеки та інструменти [6]. Це
значно пришвидшує розробку, спрощує супровід та дозволяє впроваджувати
оновлення локально, без ризику впливу на інші складові порталу.
Методологія SPA виступає основою для створення сучасних динамічних
корпоративних вебпорталів, зокрема систем управління контентом і
розподілених інтерфейсів, що взаємодіють із різними мікросервісами. У
поєднанні з мікрофронтенд-архітектурою SPA відкриває можливість
формувати масштабовані та високодоступні вебсистеми, які є стійкими до
змін і дозволяють незалежний розвиток функціональних модулів.
Мікрофронтенд-архітектура передбачає розподіл інтерфейсу великої
вебсистеми на окремі, автономні частини — мікрофронтенди, кожен з яких
відповідає за свій функціональний розділ порталу. У контексті
корпоративного вебсайту це можуть бути модулі новин, сторінки інформації
про компанію, інтернет-магазин, панель адміністратора тощо. Кожен з цих
модулів є незалежним вебзастосунком, що має власний життєвий цикл,
команду розробки, технологічний стек і може розгортатися окремо від інших
частин. Об’єднання таких застосунків у єдину систему дозволяє будувати
масштабовані портали, які складаються з технологічно різнорідних модулів.
Мікрофронтенди дають змогу уникнути монолітної структури
інтерфейсу, коли будь-які зміни потребують оновлення та повторного
розгортання всієї системи. Завдяки поділу на незалежні частини кожен модуль
може змінюватися, оптимізуватися або модернізуватися із мінімальним
впливом на інші модулі. Це особливо важливо при розробці великих
продуктів, де одночасно працюють кілька команд. Команда, яка займається
модулем продажу товарів, може обирати React чи Vue.js, тоді як інша, що
відповідає за CMS-функціональність, може використовувати Angular або інші
інструменти. Такий підхід знімає технологічні обмеження та дозволяє кожній
команді працювати з найкращим для їх задач набором фреймворків і бібліотек.
21
Окремою перевагою мікрофронтендів є спрощене розгортання змін.
Якщо в межах монолітного SPA будь-яке оновлення вимагає збирання всієї
програми та перенесення її на сервер, то при мікрофронтенд-архітектурі
відбувається лише деплой модулю, який зазнав змін. Це суттєво скорочує час
виходу нових версій у продуктивне середовище, підвищує гнучкість системи
та дозволяє швидко реагувати на бізнес-потреби, наприклад, додати новий
розділ, оновити дизайн конкретної сторінки або впровадити нові сервісні
можливості.
Крім того, мікрофронтенди спрощують масштабування як компонентів,
так і команд. Розробники можуть працювати паралельно, не блокуючи один
одного й не потребуючи повного розуміння архітектури інших модулів. Це
підвищує продуктивність, прискорює процес створення нового функціоналу
та дозволяє легко оновлювати систему частинами. Водночас полегшується
підтримка та усунення помилок, адже локальні зміни впливають лише на
відповідний модуль і не створюють глобальних ризиків.
Додатковою перевагою мікрофронтендів є підвищена стійкість системи
до відмов та проблем продуктивності. Оскільки кожен модуль працює
незалежно, помилки в одному розділі порталу не призводять до повного
виходу з ладу всієї системи. Це особливо важливо для великих корпоративних
порталів, де доступність контенту та швидкість реакції користувача мають
критичне значення. Крім того, розподілена архітектура дозволяє ефективно
впроваджувати різні стратегії кешування, балансування навантаження та
автономне масштабування окремих модулів без впливу на решту системи.
Використання мікрофронтендів дозволяє об’єднувати декілька
автономних вебзастосунків в один цілісний портал, зберігаючи їхню
незалежність і забезпечуючи високу масштабованість. Це робить процес
розробки та розгортання значно простішим і ефективнішим, особливо у
випадку великих розподілених команд і систем, що активно розвиваються. У
результаті створюється архітектура, яка є гнучкою, стійкою до змін,
22
технологічно різнорідною та готовою до довготривалої еволюції, що
відповідає сучасним вимогам корпоративних і комерційних вебсистем.
Для практичної реалізації теми кваліфікаційної роботи «Проєктування
мікрофронтенд-архітектури для побудови розподілених вебсистем»
передбачено створення системи управління контентом (CMS), яка
виступатиме прикладом повноцінного корпоративного вебпорталу. Розробка
CMS дозволяє демонструвати переваги мікрофронтенд-архітектури у
реальному середовищі та оцінити ефективність підходу для розподілених
команд і незалежних модулів.
CMS, що буде створена, забезпечуватиме комплексний функціонал:
публікацію новин компанії, управління сторінками інформації про
організацію, а також можливість інтеграції інтернет-магазину для реалізації
товарів та послуг. Такий набір функціональних блоків відображає типову
структуру сучасного корпоративного вебпорталу, що дозволяє проаналізувати
взаємодію різних модулів і оцінити ефективність їхнього розгортання у
вигляді окремих мікрофронтендів.
Наукова цінність реалізації полягає у можливості моделювання різних
сценаріїв взаємодії команд та технологій. Кожен модуль CMS ‒ окремий
вебдодаток із власним стеком технологій та автономним життєвим циклом.
Це дозволяє оцінити переваги та недоліки використання різнорідних
фреймворків у єдиній системі, а також дослідити підходи до інтеграції таких
модулів у єдиний користувацький інтерфейс без втрати продуктивності та
узгодженості даних.
Розробка CMS у межах кваліфікаційної роботи дозволяє дослідити
питання безперервного розгортання та масштабування системи. Завдяки
мікрофронтенд-підходу кожен модуль може оновлюватися незалежно, що
спрощує процес внесення змін, підвищує гнучкість та зменшує ризики впливу
локальних помилок на всю систему. Цей аспект є особливо важливим для
23
великих компаній, де одночасно за роботу порталу відповідають різні
команди.
CMS виступає не лише практичним завданням, а й науково
обґрунтованим експериментом, що дозволяє перевірити ефективність
мікрофронтенд-архітектури, оцінити її переваги у масштабованості, гнучкості
та незалежності модулів, а також сформувати рекомендації щодо організації
процесу розробки розподілених вебсистем.
1.4 Висновки до розділу 1
У результаті проведеного аналізу сучасних підходів до веброзробки
визначено, що наявність власного вебсайту є критично важливою для
організацій у цифровій економіці, оскільки він забезпечує оперативну
комунікацію з клієнтами, партнерами та ринком, підвищує ефективність
бізнес-процесів і дозволяє формувати позитивний імідж бренду. У 2025 році
значущим є застосування односторінкових застосунків (SPA) та
мікрофронтенд-архітектури, які забезпечують інтерактивність, високу
продуктивність, масштабованість та гнучкість розподілених систем. SPA
дозволяють швидко оновлювати контент без перезавантаження сторінки, а
мікрофронтенди забезпечують автономність модулів, спрощене розгортання
та незалежну роботу команд розробників.
У межах кваліфікаційної роботи передбачено створення системи
управління контентом (CMS), що реалізує принципи мікрофронтенд-
архітектури та виступає прикладом корпоративного вебпорталу. CMS
дозволить моделювати взаємодію незалежних модулів і команд, оцінити
ефективність використання різнорідних технологій, забезпечити автономне
оновлення компонентів та підвищити гнучкість системи. Наукова цінність
роботи полягає у можливості дослідження масштабованості, повторного
24
використання модулів, організації розподіленої розробки та впровадження
сучасних практик DevOps і CI/CD у корпоративних вебсистемах.
Реалізація завдань кваліфікаційної роботи дозволяє підтвердити
ефективність мікрофронтенд-архітектури для побудови сучасних динамічних
вебсистем, підвищення продуктивності команд, гнучкості та надійності
корпоративних порталів, а також створює науково обґрунтовану базу для
подальших досліджень у сфері розподілених вебдодатків.
25
РОЗДІЛ 2 ВИБІР ТЕХНОЛОГІЇ ТА ІНСТРУМЕНТАЛЬНИХ ЗАСОБІВ
РОЗРОБКИ СИСТЕМИ
2.1 Огляд існуючих технологій
Розробка сучасних розподілених вебсистем потребує ретельного
підбору технологій, які забезпечують високу продуктивність,
масштабованість, безпеку та сумісність компонентів у межах єдиної
архітектури. У даному проєкті використовується підхід мікрофронтенд-
архітектури, що передбачає незалежну розробку окремих модулів різними
командами та їх інтеграцію в єдине програмне середовище. Тому вибір
інструментальних засобів здійснюється з урахуванням вимог до автономності,
підтримки стандартизованих протоколів взаємодії, адаптивності інтерфейсу
та можливості гнучкої еволюції кожного модуля. У цьому розділі
обґрунтовується доцільність використання обраних вебтехнологій, що лежать
в основі фронтенд-рівня системи, а також визначають технічні параметри її
розвитку та експлуатації.
HTML (HyperText Markup Language) є стандартною мовою розмітки,
яка використовується для структурування та організації контенту веб-
документів. Вона належить до класу декларативних мов, оскільки описує
семантичну структуру інформації, а не алгоритмічні дії. Основною метою
HTML є надання браузеру інформації про логічну організацію документа,
включаючи текстові блоки, заголовки, списки, зображення, медіа та
інтерактивні елементи, що дозволяє користувачеві коректно сприймати зміст
веб-сторінки.
HTML-документ має ієрархічну структуру, де всі елементи організовані
у вигляді деревоподібної моделі, приклад коду зображено на рисунку 2.1.
26
Рисунок 2.1 – Приклад коду HTML
Кореневий елемент містить метаінформацію та видимий контент.
Метаінформація включає налаштування кодування, визначення мови
документа, назву, посилання на стилі та скрипти, а також метатеги для
пошукової оптимізації та інтеграції з зовнішніми сервісами [7]. Видимий
контент представлений елементами, що відображаються безпосередньо
користувачу, такими як текстові блоки, зображення, відео, аудіо,
гіперпосилання та форми для введення даних.
Елементи HTML класифікуються за їхнім семантичним призначенням.
Семантичні теги, такі як заголовки, параграфи, списки та структурні блоки,
визначають логічну організацію інформації і підвищують доступність
документа для користувачів із особливими потребами, а також для систем
індексації пошукових систем. Для вставки мультимедійного контенту
використовуються відповідні медіа-елементи, а інтерактивні компоненти
реалізуються через форми та елементи управління.
Атрибути HTML надають додаткові властивості елементів і дозволяють
задавати унікальні ідентифікатори, групувати елементи для стилізації та
програмного маніпулювання, визначати джерела медіа, альтернативний текст,
27
підказки, мову або тип вмісту. Використання атрибутів забезпечує підвищену
структурованість, гнучкість та адаптивність веб-документів.
HTML є фундаментальним компонентом веб-розробки, оскільки формує
скелет будь-якої веб-сторінки або веб-додатку. Він інтегрується із каскадними
таблицями стилів (CSS), що відповідають за візуальне оформлення, та
сценаріями JavaScript, які забезпечують динамічну поведінку та взаємодію з
користувачем. Без застосування HTML неможливе створення структурованих,
доступних та функціональних веб-документів.
Еволюція HTML проходила через кілька версій, від HTML 4.01 до
сучасного HTML5, порівняння зображено на рисунку 2.2.
Рисунок 2.2 – Порівняння HTML 4
Нові стандарти забезпечують розширену семантику, підтримку
мультимедійного контенту без сторонніх плагінів, інтеграцію з веб-API,
покращену роботу з формами та підвищену доступність. HTML5 дозволяє
створювати більш структуровані, функціональні та адаптивні веб-документи,
що відповідають сучасним вимогам користувачів і стандартам веб-розробки.
28
JavaScript (JS) є високорівневою, інтерпретованою мовою
програмування, яка широко використовується для створення динамічного та
інтерактивного контенту на веб-сторінках. На відміну від HTML, який
визначає структуру документа, та CSS, який відповідає за візуальне
оформлення, JavaScript забезпечує поведінку та логіку веб-додатків. [8] Мова
має мультипарадигмальний характер, підтримуючи об’єктно-орієнтоване,
функціональне та імперативне програмування.
JavaScript виконується безпосередньо у браузері клієнта або на сервері
(за допомогою таких платформ, як Node.js). Його основна функція полягає у
маніпулюванні об’єктною моделлю документа (DOM), що дозволяє динамічно
змінювати структуру, стиль та контент веб-сторінки без необхідності
перезавантаження. Це включає додавання або видалення елементів, зміну
тексту, атрибутів, обробку подій користувача та анімації.
JS підтримує роботу з подіями, що є ключовим аспектом
інтерактивності, приклад коду зображено на рисунку 2.3.
Рисунок 2.3 – Приклад коду JavaScript
29
Події можуть бути ініційовані користувачем (клацання, введення даних,
наведення миші) або системою (завантаження сторінки, зміна стану мережі).
Обробка подій здійснюється за допомогою функцій, які реєструються на
елементах DOM. Це забезпечує асинхронну взаємодію користувача зі
сторінкою та дозволяє реалізовувати складні інтерфейси.
Однією з важливих характеристик JavaScript є асинхронність. Мова
надає можливості для обробки асинхронних операцій через проміси, колбеки
та сучасний синтаксис async/await. Це дозволяє виконувати запити до серверів,
взаємодіяти з базами даних або API без блокування основного потоку
виконання, що підвищує продуктивність веб-додатків.
JavaScript тісно інтегрований з HTML і CSS, формуючи разом так званий
«триплет фронтенд-розробки». HTML забезпечує структуру, CSS відповідає
за оформлення, а JS визначає динаміку та логіку взаємодії. Використання JS
також розширює можливості браузера через API, наприклад, роботу з
геолокацією, локальним сховищем, Canvas, WebSockets та іншими сучасними
технологіями [9].
Мова постійно розвивається: сучасний стандарт ECMAScript (ES6 та
новіші версії) включає класи, модулі, стрілочні функції, шаблонні рядки та
інші конструкції, що спрощують розробку масштабованих та структурованих
додатків, приклад коду зображено на рисунку 2.4.
30
Рисунок 2.4 – Приклад коду ECMAScript
JavaScript є незамінним інструментом для фронтенд-розробки та набуває
широкого застосування на серверній стороні, у розробці мобільних додатків,
ігрових двигунів та IoT-платформ.
CSS (Cascading Style Sheets, каскадні таблиці стилів) є мовою стилізації,
яка використовується для визначення візуального оформлення веб-
документів. Вона доповнює HTML, що відповідає за структуру контенту, і
дозволяє розділяти представлення та зміст документа. Основна мета CSS
полягає у забезпеченні контролю над зовнішнім виглядом елементів,
включаючи колір, розмір, шрифт, розташування та анімації, без необхідності
змінювати сам HTML-код, приклад коду зображено на рисунку 2.5.
31
Рисунок 2.5 – Приклад коду CSS
CSS використовує правила стилізації, що складаються з селекторів і
наборів властивостей. Селектори дозволяють вибирати конкретні елементи
HTML або групи елементів за тегом, класом, ідентифікатором або іншими
атрибутами. Властивості визначають конкретні стилістичні характеристики,
наприклад, кольори, відступи, межі, шрифти та параметри відображення.
Каскадна природа CSS означає, що стилі можуть успадковуватися та
переважати одне над одним залежно від специфічності та порядку визначення.
CSS підтримує різні моделі розташування елементів. До них належать
стандартна потокова модель, флексбокс (Flexbox) та CSS Grid, які
забезпечують сучасні підходи до адаптивного та респонсивного дизайну.
Використання цих моделей дозволяє створювати складні макети веб-сторінок
з гнучким розподілом простору та вирівнюванням елементів без використання
додаткових скриптів.
32
Також забезпечує підтримку медіа-запитів, що дозволяє адаптувати
стиль документу під різні розміри екранів та пристрої. Це є ключовим
аспектом сучасної веб-розробки, оскільки забезпечує користувачам коректне
відображення контенту на настільних комп’ютерах, планшетах і мобільних
телефонах. Крім того, CSS дозволяє реалізовувати анімації, переходи та
трансформації, що підвищує інтерактивність та естетичну привабливість веб-
додатків.
CSS тісно інтегрований з HTML і JavaScript. HTML формує структуру
документа, CSS забезпечує його візуальне представлення, а JavaScript
відповідає за динамічну поведінку. Взаємодія цих трьох технологій створює
комплексний підхід до фронтенд-розробки, де зміст, стиль і логіка взаємодії
розділені, але працюють узгоджено [10].
Сучасний CSS постійно розвивається і включає нові стандарти, такі як
CSS Variables (змінні стилів), CSS Custom Properties, сучасні селектори, модулі
для адаптивного дизайну та інтеграції з веб-шрифтами. Це дозволяє
розробникам створювати масштабовані, структуровані та легко підтримувані
стилі, які відповідають сучасним вимогам користувачів та стандартам веб-
розробки.
React є бібліотекою JavaScript з відкритим кодом, призначеною для
побудови користувацьких інтерфейсів (UI). Вона була розроблена компанією
Facebook і широко застосовується у фронтенд-розробці для створення
динамічних та інтерактивних веб-додатків. Основна ідея React полягає у
компонентному підході, коли інтерфейс розбивається на незалежні, повторно
використовувані модулі, кожен з яких відповідає за певну частину
відображення або поведінки.
Компоненти React можуть бути функціональними або класовими.
Функціональні компоненти ‒ це прості JavaScript-функції, які приймають
вхідні дані у вигляді пропсів і повертають елементи React, що описують, як
повинна виглядати частина інтерфейсу. Класові компоненти надають
33
додаткові можливості, такі як управління станом (state) та життєвими циклами
компонента, проте сучасна розробка віддає перевагу функціональним
компонентам із використанням хуків (hooks) для керування станом та
побічними ефектами.
React використовує декларативний підхід до опису інтерфейсів. Це
означає, що розробник описує, як UI повинен виглядати у певному стані, а
React автоматично оновлює DOM відповідно до змін стану компонентів. Для
оптимізації продуктивності React застосовує віртуальний DOM (Virtual DOM),
який дозволяє мінімізувати фактичні зміни у реальному DOM і забезпечує
швидку та ефективну реакцію на взаємодію користувача [11].
React підтримує концепцію односпрямованого потоку даних. Дані
передаються від батьківських компонентів до дочірніх через пропси, що
забезпечує передбачувану поведінку додатків та полегшує їх масштабування.
Для керування глобальним станом додатків часто застосовують зовнішні
бібліотеки, такі як Redux або Context API, які інтегруються з React і
забезпечують централізоване управління даними.
React також забезпечує інтеграцію з сучасними веб-технологіями,
такими як JSX (JavaScript XML), що дозволяє писати компоненти, комбінуючи
HTML-подібний синтаксис із JavaScript-логікою. Це спрощує процес розробки
та підвищує читабельність коду. Використання React у поєднанні з HTML,
CSS та JavaScript дозволяє створювати масштабовані, динамічні та
підтримувані веб-додатки з високою продуктивністю та інтерактивністю.
Сучасний розвиток React включає підтримку серверного рендерингу
(Server-Side Rendering), статичної генерації сторінок (Static Site Generation) та
функціональності для побудови прогресивних веб-додатків (PWA). Це робить
React одним із ключових інструментів для розробки сучасних веб-додатків,
що відповідають високим стандартам користувацького досвіду та вимогам
сучасного веб-розвитку.
34
Angular є платформою та фреймворком для розробки веб-додатків,
розробленим компанією Google. Він дозволяє створювати масштабовані,
динамічні та підтримувані односторінкові додатки (Single Page Applications,
SPA) з використанням TypeScript ‒ строго типізованого надмножини
JavaScript. Основною ідеєю Angular є модульний підхід та декларативне
описання інтерфейсу з використанням компонентів, що підвищує повторне
використання коду та забезпечує логічну структуру додатку, приклад коду
зображено на рисунку 2.6.
Рисунок 2.6 ‒Приклад коду Angular
Angular використовує компонентну архітектуру, де кожен компонент
складається з шаблону (HTML), логіки (TypeScript) та стилів (CSS або SCSS).
Компоненти організовані у модулі, які об’єднують функціонально пов’язані
компоненти та сервіси, що забезпечує масштабованість та легкість управління
великими проектами. Модульна структура дозволяє ізолювати логіку та
повторно використовувати компоненти в різних частинах додатку[12].
Однією з ключових особливостей Angular є двостороння прив’язка
даних (two-way data binding), яка забезпечує автоматичну синхронізацію між
моделлю даних і представленням у користувацькому інтерфейсі. Це дозволяє
35
розробникам зменшити обсяг коду для оновлення UI та підвищити
інтерактивність додатків. Крім того, Angular підтримує односпрямований
потік даних, який використовується для управління складними структурами
стану та підвищує передбачуваність поведінки додатка.
Angular інтегрує ряд інструментів для управління станом, маршрутизації
та взаємодії з сервером через HTTP-запити. Сервіси та інжекція залежностей
(Dependency Injection) дозволяють організовувати бізнес-логіку окремо від
компонентів, що підвищує тестованість та підтримуваність коду. Фреймворк
також надає механізми для валідації форм, обробки подій та управління
асинхронними процесами через RxJS та Observables.
Декларативний підхід Angular реалізується через шаблони, директиви
та пайпи, які дозволяють ефективно трансформувати та відображати дані.
Директиви розширюють функціональність HTML, додаючи умовне
відображення, цикли, обробку подій та маніпуляції з DOM. Пайпи
забезпечують форматування та трансформацію даних без зміни логіки
компонентів, що робить код більш структурованим і читабельним.
Сучасний Angular підтримує серверне рендеринг (Angular Universal),
статичну генерацію сторінок, модульні бібліотеки та прогресивні веб-додатки
(PWA). Це робить його ефективним інструментом для створення великих,
складних та продуктивних веб-додатків, які відповідають сучасним вимогам
користувацького досвіду, доступності та підтримки високого навантаження.
Vue.js є прогресивним фреймворком JavaScript, призначеним для
створення користувацьких інтерфейсів і односторінкових веб-додатків (SPA).
Він був розроблений Еваном Ю та поєднує у собі простоту бібліотеки з
потужністю повноцінного фреймворка [13]. Головною концепцією Vue є
адаптивність і поступова інтеграція: фреймворк дозволяє використовувати
лише базові можливості для невеликих проєктів або повноцінний стек функцій
для складних додатків.
36
Vue.js базується на компонентній архітектурі, де кожен компонент
включає шаблон (HTML-подібний синтаксис), логіку (JavaScript або
TypeScript) та стилі (CSS або SCSS). Компоненти є ізольованими, повторно
використовуваними та композиційно об’єднуються для побудови більш
складних інтерфейсів. Vue надає можливості для об’єднання компонентів у
модулі та забезпечує чітку структуру додатка, що полегшує його підтримку та
масштабування.
Однією з ключових особливостей Vue є реактивність (reactivity system),
яка дозволяє автоматично оновлювати інтерфейс при зміні стану даних. Це
забезпечує високу інтерактивність та динамічність додатків без необхідності
ручного маніпулювання DOM. Для роботи зі станом компонентів Vue надає
прості механізми локального стану та глобальні бібліотеки управління станом,
такі як Vuex або Pinia, що дозволяє ефективно керувати даними у великих
додатках.
Vue підтримує односпрямований потік даних і двосторонню прив’язку
(two-way data binding), що спрощує синхронізацію між моделлю та
представленням у користувацькому інтерфейсі. Події користувача
обробляються декларативно через директиви та спеціальні синтаксичні
конструкції, що забезпечує чітку та передбачувану поведінку додатка.
Фреймворк включає розширені можливості для роботи з шаблонами,
директивами та фільтрами (filters), які дозволяють ефективно трансформувати
і відображати дані. Директиви розширюють HTML-розмітку, забезпечуючи
умовне відображення, циклічне повторення, обробку подій та інтерактивність,
а фільтри дозволяють форматувати дані без зміни логіки компонентів.
Інтегрується з сучасними веб-технологіями, включаючи серверне
рендеринг (Nuxt.js), статичну генерацію сторінок та створення прогресивних
веб-додатків (PWA) [14]. Завдяки легкій навчальній кривій, модульності та
високій продуктивності, Vue.js є ефективним інструментом для створення як
37
малих, так і великих веб-додатків, які відповідають сучасним вимогам
користувацького досвіду, доступності та масштабованості.
Мікрофронтенди (Micro-Frontends) представляють собою
архітектурний підхід у веб-розробці, який застосовується для побудови
великих фронтенд-додатків шляхом їх розбиття на автономні, самостійні
модулі. Концепція виникла як логічне продовження ідей мікросервісів, що
застосовуються на бекенді, і передбачає, що кожен модуль фронтенду може
розроблятися, тестуватися та розгортатися незалежно від інших. Це дозволяє
підвищити гнучкість, масштабованість та швидкість розробки складних
систем.
У рамках архітектури мікрофронтендів кожен модуль або піддодаток
відповідає за певну функціональність веб-додатка, має власну структуру
компонентів, логіку, стилі та залежності. Модулі можуть реалізовуватися
різними командами розробників і використовувати різні технології та
фреймворки, такі як React, Angular або Vue.js, що дозволяє вибирати
оптимальний стек для конкретної частини додатка. Архітектура зображена на
рисунку 2.7.
Кожен модуль зазвичай має чітко визначений інтерфейс взаємодії через
стандартизовані API, що забезпечує коректну інтеграцію та мінімізує
конфлікти між компонентами.
Інтеграція мікрофронтендів у єдиний користувацький інтерфейс може
здійснюватися різними способами. До поширених стратегій належать
клієнтський рендеринг, серверний рендеринг та композиційний підхід через
«shell»-додаток або контейнер, який координує завантаження та відображення
окремих модулів. Такі методи дозволяють створити єдиний UX для
користувача, одночасно зберігаючи автономність окремих піддодатків.
Мікрофронтенди надають низку суттєвих переваг. Вони дозволяють
паралельну роботу декількох команд розробників, зменшують ризики регресій
при внесенні змін, прискорюють розгортання окремих частин додатка та
38
забезпечують можливість поступового оновлення технологічного стеку
великих фронтенд-проектів. Завдяки цьому організації можуть ефективно
підтримувати масштабні додатки, уникаючи необхідності переписувати весь
код при внесенні змін у конкретну функціональну область.
Рисунок 2.7 – Архітектура мікрофронтендів
Водночас підхід мікрофронтендів має власні виклики. До них належить
забезпечення єдиного стилю та дизайну додатка, узгодження глобального
стану між різними модулями, оптимізація продуктивності при одночасному
завантаженні декількох піддодатків та організація ефективної взаємодії між
модулями через стандартизовані API або шини подій. Для вирішення цих
проблем часто застосовують спільні бібліотеки компонентів, дизайн-системи,
централізовані системи управління станом та механізми маршрутизації.
Мікрофронтенди особливо ефективні у великих та довгострокових
проектах, де одночасно працюють кілька команд і планується поступове
розширення функціоналу. Вони дозволяють поєднувати автономність
модулів, гнучкість у виборі технологій та масштабованість системи,
39
одночасно забезпечуючи цілісність користувацького інтерфейсу та високий
рівень взаємодії користувача з додатком. Цей підхід стає особливо актуальним
у сучасних корпоративних та комерційних веб-додатках, де швидкість
розробки, підтримка великого обсягу коду та можливість паралельної роботи
команд є критично важливими.
Мікрофронтенди як архітектурний підхід набули широкого поширення
у сучасній веб-розробці, і разом із ними з’явилися численні фреймворки та
бібліотеки, які полегшують реалізацію цього підходу. Основна мета таких
фреймворків полягає у забезпеченні автономності модулів, стандартизації
інтеграції, керування станом та спрощення розгортання великих фронтенд-
додатків.
Одним із найбільш відомих підходів є Single SPA. Це фреймворк, який
дозволяє поєднувати різні фронтенд-фреймворки (React, Angular, Vue.js та
інші) у єдиному додатку. Single SPA забезпечує завантаження та розгортання
окремих мікрофронтендів на основі маршрутизації, дозволяє ізолювати модулі
та управляти їхнім життєвим циклом. Ключова особливість Single SPA полягає
у підтримці одночасного використання різних технологій у рамках одного
додатка без конфліктів залежностей [15].
Module Federation від Webpack є сучасним рішенням для організації
мікрофронтендів через федерацію модулів. Вона дозволяє динамічно
імпортувати та завантажувати частини коду з інших додатків, що
розгортаються окремо. Module Federation забезпечує обмін компонентами та
логікою між різними додатками без необхідності спільного складання всього
проекту, що значно спрощує масштабування та оновлення великих систем.
Цей підхід особливо ефективний для монорепозиторіїв та корпоративних SPA.
Qiankun - фреймворк на основі Single SPA, розроблений в Китаї, який
активно використовується для побудови мікрофронтендів у великих
корпоративних додатках. Він надає механізми ізоляції стилів, управління
життєвим циклом мікрофронтендів, а також підтримує завантаження
40
незалежних додатків без конфліктів глобальних змінних. Qiankun дозволяє
легко інтегрувати різні фреймворки та версії бібліотек у єдине середовище.
FrintJS ‒ менш відомий, але потужний фреймворк для створення
модульних фронтенд-додатків, приклад роботи зображено на рисунку 2.8.
Рисунок 2.8 – Приклад роботи FrintJS
FrintJS підтримує компонентну архітектуру, управління станом через
сервісну шину та інтеграцію з різними технологіями, забезпечуючи
незалежність модулів та масштабованість системи. Він підходить для
створення складних SPA із паралельною розробкою окремих піддодатків.
Piral ‒ це фреймворк для побудови microfrontends на основі концепції
«пакетів» (pilets), де кожен пілет є автономним модулем, який інтегрується у
центральний shell-додаток, приклад роботи зображено на рисунку 2.9.
Рисунок 2.9 – Приклад роботи Piral
41
Piral забезпечує стандартизовану взаємодію між модулями, підтримку
маршрутизації, спільного стану та плагінів, що робить його ефективним для
корпоративних SPA та платформ, що розвиваються.
Tailor і підхід Node.js Layout Service застосовуються для серверної
інтеграції мікрофронтендів. Tailor дозволяє збирати різні піддодатки на
сервері і віддавати користувачу готову HTML-сторінку, що підвищує
продуктивність завантаження та SEO [16]. Такі рішення використовуються у
великих новинних порталах та e-commerce, де швидкість і оптимізація
критично важливі.
Окрім зазначених фреймворків, існують також підходи на базі iframe,
де кожен мікрофронтенд ізольований у власному фреймі. Це забезпечує повну
ізоляцію стилів і скриптів, але може ускладнювати комунікацію між модулями
та знижувати продуктивність при великій кількості iframe. Сучасні
фреймворки намагаються мінімізувати використання iframe, замінюючи їх на
JavaScript- та Web Components-базовані інтеграції.
Вибір конкретного фреймворка залежить від вимог проекту, масштабу
команди, стеку технологій та необхідності інтеграції з існуючими додатками.
Важливими критеріями є ізоляція модулів, управління станом, маршрутизація,
продуктивність, підтримка різних технологій та легкість розгортання.
Комбінація цих підходів дозволяє організаціям створювати великі,
масштабовані та підтримувані фронтенд-додатки з незалежними командами
розробників.
2.2 Вибір технологій
Для реалізації цієї кваліфікаційної роботи важливо заздалегідь
визначитися з технологіями, оскільки від цього залежить цілісність
архітектури, спосіб інтеграції окремих модулів та загальна якість майбутньої
системи. Коли обираються інструменти, потрібно зважати не лише на їхню
42
популярність, а й на те, наскільки гармонійно вони поєднуються між собою та
чи дозволяють підтримувати обрану модель мікрофронтендів без надмірної
складності. Правильний вибір технологій допомагає побудувати зрозумілий
процес транспортування даних між частинами застосунку, забезпечує
сумісність модулів та дає можливість легко масштабувати окремі компоненти
без необхідності перебудовувати всю систему.
Визначення стеку також дає змогу заздалегідь продумати, яким буде
життєвий цикл кожного підмодуля, як саме він завантажуватиметься та
взаємодіятиме з іншими частинами інтерфейсу. Це суттєво впливає на
архітектурні рішення, на підхід до організації репозиторіїв та на структуру
розподіленого розгортання, що особливо важливо для мікрофронтендів, які
покликані розв’язувати проблему надмірної централізації коду. Обрана
технологічна база формує основу всієї роботи, тому її потрібно узгодити на
початковому етапі, щоб уникнути суперечностей під час реалізації та
забезпечити логічну послідовність усіх наступних технічних кроків.
У межах цієї кваліфікаційної роботи планується створити повноцінну
CMS систему, яка стане центральним елементом для керування цифровим
контентом компанії та взаємодії з її клієнтами. Основна ідея полягає в тому,
щоб надати бізнесу інструмент, який дозволяє швидко реагувати на зміни
ринку, комунікувати з аудиторією та ефективно організовувати продаж
товарів у межах єдиної платформи. Такий підхід робить систему не просто
внутрішнім технічним рішенням, а частиною загальної бізнес-стратегії,
орієнтованої на розвиток онлайн присутності.
У сучасних умовах розвитку вебтехнологій типові CMS системи значно
еволюціонували і перестали бути простими інструментами для публікації
текстових матеріалів. Вони поєднують у собі широкий спектр
функціональності, що охоплює керування контентом, роботу з медіафайлами,
підтримку ролей користувачів, інтеграцію з платіжними сервісами,
організацію онлайн продажів, аналітику та багато інших компонентів. Такий
43
рівень складності створює додаткове навантаження на команду розробників,
оскільки кожен модуль має власну логіку, залежності та окремий життєвий
цикл. Коли вся система розвивається єдиною групою спеціалістів, виникають
труднощі із синхронізацією роботи, уповільнюється темп оновлень, а внесення
змін у будь яку частину може створювати ризики для стабільності всього
застосунку.
У випадку великих CMS систем стає доцільним розподіляти роботу між
різними командами, кожна з яких зосереджується на певному
функціональному напрямі. Окрема команда може відповідати за модуль
новин, інша за електронну комерцію, ще одна за аналітичні панелі або
керування користувачами. Такий підхід спрощує координацію процесів, адже
кожен підрозділ працює в межах своєї спеціалізації, глибше розуміє
архітектуру свого компонента і може швидше впроваджувати нові функції або
усувати недоліки. Однак класична монолітна фронтенд архітектура створює
обмеження, оскільки всі команди змушені працювати в одному спільному
кодовому просторі, що призводить до конфліктів, складності тестування та
зростання часу розгортання.
Саме в таких умовах мікрофронтенди стають оптимальним рішенням.
Використання цього підходу дозволяє кожній команді працювати над своїм
окремим фронтенд модулем, який не залежить безпосередньо від структури
інших частин системи. Команди можуть використовувати власний стек
технологій, самостійно керувати оновленнями, впроваджувати функціональні
зміни та розгортати їх незалежно від усієї платформи. Це зменшує кількість
взаємних блокувань, пришвидшує цикл розробки та робить процес підтримки
більш передбачуваним.
Крім того, мікрофронтендна архітектура сприяє підвищенню надійності
системи. Оскільки кожен модуль є ізольованим, потенційна помилка в одній
частині не призводить до відмови всієї CMS. Це особливо важливо для
бізнесів, які працюють з великим потоком користувачів і не можуть дозволити
44
собі тривалі простої або повні перезапуски застосунку заради впровадження
навіть незначних змін. Мікрофронтенди також забезпечують можливість
поступового масштабування, оскільки окремі модулі можна оптимізувати або
переміщувати на більш продуктивну інфраструктуру без втручання в
архітектуру інших частин.
Завдяки такому підходу CMS стає не просто набором функцій у межах
одного коду, а гнучкою та керованою екосистемою з окремими самостійними
компонентами. Це створює передумови для стабільного розвитку системи,
зменшує ризики та підвищує ефективність взаємодії між командами, що
працюють над її окремими елементами.
У процесі проєктування мікрофронтенд архітектури важливо
заздалегідь визначитися з фреймворком або підходом, який забезпечуватиме
основу для взаємодії окремих модулів системи. Мікрофронтендна архітектура
передбачає поділ інтерфейсу на ізольовані частини, що розробляються та
оновлюються різними командами, тому вибір технології впливає на спосіб
інтеграції модулів, на механізм їхнього завантаження та на рівень технічної
незалежності між ними. Без чітко визначеного фреймворку або платформи
підтримка такої архітектури стає складнішою, оскільки кожний модуль
потребує методів ізоляції, контролю залежностей і можливості розгортатися
окремо від усього застосунку.
У сфері мікрофронтендів існує кілька підходів, але практика показує,
що найбільш збалансованим рішенням для побудови сучасних розподілених
вебсистем є фреймворк single spa [17]. Він забезпечує той рівень модульності,
який необхідний для великих систем, і дозволяє поєднувати різні технології в
межах одного інтерфейсу без втрати керованості. Single spa працює як
оркестратор, що відповідає за підключення, ініціалізацію та зупинку окремих
мікрофронтенд модулів, завдяки чому кожна команда може створювати свій
підмодуль у зручному для себе стеку.
45
Головною перевагою single spa є його здатність поєднувати різні підходи
та надавати гнучкість у виборі технологій. Команди можуть використовувати
React, Vue або інші бібліотеки, але сам механізм інтеграції модулів
контролюється саме цим фреймворком. Він визначає правила завантаження та
переключення між модулями, що дозволяє уникнути хаосу під час інтеграції.
Крім того, single spa пропонує інструменти для побудови root застосунку, який
об’єднує всі підмодулі в єдину систему, зберігаючи при цьому їхню
автономність. Це вирішує проблему, з якою стикаються великі CMS системи,
коли кожен окремий функціональний блок потребує незалежного розвитку,
але водночас має бути частиною загальної платформи.
Важливо також те, що фреймворк має широку підтримку спільноти та
велику кількість напрацьованих практик, що робить його придатним для
розробки складних комерційних систем. Для реалізації завдань
кваліфікаційної роботи single spa дає змогу продемонструвати як класичні
принципи модульності, так і сучасні підходи до управління залежностями та
розподіленого розгортання.
З огляду на всі ці фактори найкращим вибором фреймворку для
побудови мікрофронтенд архітектури в межах цієї кваліфікаційної роботи є
саме single spa. Він забезпечує рівновагу між автономністю модулів, гнучкістю
інтеграції та стабільністю всієї системи, що робить його найбільш відповідним
інструментом для реалізації масштабованої розподіленої CMS платформи.
У межах цієї кваліфікаційної роботи важливо не тільки описати
теоретичні принципи мікрофронтенд архітектури, а й продемонструвати її
практичну цінність. Саме тому під час експериментальної частини розробка
буде виконана з використанням двох різних технологій, а саме React і Vue.js.
Такий підхід дозволяє показати, що мікрофронтенд архітектура здатна
поєднувати різноманітні інструменти в межах однієї системи, не створюючи
при цьому конфліктів між модулями. Використання двох різних бібліотек
підкреслює головну ідею мікрофронтендів, яка полягає в незалежності
46
окремих частин застосунку та можливості їхнього паралельного розвитку
різними командами.
Застосування React у певній частині системи дасть змогу
продемонструвати роботу модулів, побудованих у більш гнучкому та
компонентно орієнтованому середовищі, яке часто використовується у
великих комерційних продуктах. Водночас використання Vue.js покаже, як у
тій самій системі може співіснувати інший підхід до побудови інтерфейсу, що
відрізняється простотою синтаксису та іншим стилем організації компонентів.
Обидва модулі функціонуватимуть автономно, але при цьому
інтегруватимуться у загальну структуру CMS, що стане підтвердженням
можливості створення єдиної платформи, побудованої на різнорідних
технологіях.
Такий експеримент дозволяє на практиці продемонструвати головну
перевагу мікрофронтендів ‒ здатність легко поєднувати різні рішення, не
обмежуючи вибір розробників одним стеком. Це особливо важливо для
великих систем, де кожна команда може мати власні пріоритети та технічні
вподобання. Вибір React і Vue.js як двох різних підходів у рамках однієї CMS
показує, як гнучко можна масштабувати систему, додаючи нові технології без
ризику порушення вже існуючих компонентів. Такий досвід підкреслює
практичну цінність мікрофронтенд архітектури та демонструє, що вона є не
лише теоретично привабливою, а й технічно ефективною у реальних умовах
розробки.
У рамках цієї кваліфікаційної роботи буде реалізовано не лише
клієнтську частину системи, а й повноцінний серверний компонент, який
забезпечить стабільну роботу всієї платформи. Для створення backend частини
буде використано середовище виконання node.js, що надає можливість
ефективно опрацьовувати запити, працювати з даними та забезпечувати
взаємодію між окремими модулями мікрофронтенд архітектури. Node.js є
оптимальним варіантом для цього проєкту, оскільки він дозволяє створювати
47
легкий, швидкий та масштабований сервер, який легко інтегрується з
вебтехнологіями і добре підходить для побудови сучасних розподілених
систем.
Серверна частина відповідатиме за зберігання даних, з якими
працюватиме CMS. Це стосується новин, товарів, описів, зображень та всієї
іншої інформації, що відображатиметься на мікрофронтендах. Backend
забезпечить обробку CRUD операцій, надасть API для фронтенд модулів і
стане центральною точкою доступу до даних у межах всієї архітектури.
Завдяки цьому кожен мікрофронтенд зможе отримувати необхідну
інформацію незалежно та працювати зі своєю частиною системи, не
порушуючи логіку інших модулів.
Створення backend на node.js також дозволяє використовувати єдиний
підхід до організації коду на стороні сервера і клієнта, що підвищує
узгодженість проєкту та спрощує розробку. Така реалізація допоможе
продемонструвати, як фронтенд і backend модулі можуть працювати разом у
межах мікрофронтенд архітектури, забезпечуючи коректну взаємодію,
стабільне зберігання інформації та можливість подальшого розширення
системи.
2.3 Висновки до розділу 2
У результаті проведеного аналізу сучасних технологій та
інструментальних засобів для розробки розподілених вебсистем можна
зробити кілька ключових висновків. Для забезпечення високої
продуктивності, масштабованості та гнучкості системи необхідно
використовувати стек технологій, який дозволяє розділяти фронтенд на
незалежні модулі. HTML, CSS та JavaScript залишаються фундаментальними
складовими фронтенд-розробки, забезпечуючи відповідно структуру, стиль та
динамічну поведінку веб-додатків. Використання сучасних стандартів
48
(HTML5, CSS3, ECMAScript 6+) забезпечує доступність, адаптивність та
інтерактивність інтерфейсів.
Серед сучасних фронтенд-фреймворків (React, Angular, Vue.js) обрано
ті, що підтримують компонентну архітектуру, декларативний підхід до
побудови інтерфейсів та ефективне управління станом, що є критично
важливим для великих CMS-систем із численними функціональними
модулями.
Впровадження мікрофронтенд-архітектури дозволяє розподілити
роботу між різними командами розробників, підвищити автономність модулів,
зменшити ризики регресій та оптимізувати процес розгортання окремих
частин системи. Використання фреймворків для мікрофронтендів (Single SPA,
Module Federation, Qiankun) забезпечує стандартизовану інтеграцію модулів,
ізоляцію залежностей та можливість поєднання різних технологій у межах
одного додатку.
Обрана технологічна база та підхід до розробки мікрофронтендів
створюють гнучку, масштабовану та керовану архітектуру CMS-системи.
Вона дозволяє ефективно реалізовувати бізнес-функціонал, забезпечує
надійність та безперервність роботи, спрощує підтримку та подальший
розвиток системи, відповідаючи сучасним вимогам веб-розробки та потребам
користувачів.
49
РОЗДІЛ 3 РОЗРОБКА МІКРОФРОНТЕНД-АРХІТЕКТУРИ ДЛЯ
ПОБУДОВИ РОЗПОДІЛЕНИХ ВЕБСИСТЕМ
3.1 Структура системи
У рамках даної кваліфікаційної роботи було розроблено CMS систему,
призначену для підтримки бізнесу та оптимізації його цифрової присутності.
Система забезпечує можливість публікації новин компанії, що дозволяє
своєчасно інформувати клієнтів про важливі події, акції або оновлення
продукції, а також створює ефективний канал комунікації з аудиторією. Крім
того, CMS реалізує функціонал продажу товарів, що дає змогу організувати
електронну комерцію безпосередньо всередині платформи, включаючи
керування каталогом продукції, обробку замовлень і роботу з клієнтами.
Важливою складовою системи є інтеграція з платіжними сервісами, що
забезпечує безпечне та зручне проведення фінансових операцій, а також
можливість масштабування і додавання нових каналів оплати в майбутньому.
Розробка цієї CMS була виконана з використанням підходу
мікрофронтендів, що дозволило розділити систему на незалежні модулі, кожен
з яких відповідає за окремий функціональний блок. Така архітектура дає змогу
різним командам працювати паралельно над своїми компонентами, не
впливаючи на роботу інших частин системи, а також спрощує підтримку та
оновлення окремих модулів без ризику порушення цілісності всього
застосунку. Використання мікрофронтендів дозволило досягти високої
гнучкості та масштабованості платформи, забезпечивши одночасно
стабільність роботи та можливість розвитку системи відповідно до потреб
бізнесу.
Розроблену CMS систему можна умовно поділити на три основні
функціональні модулі, кожен із яких виконує свою специфічну роль і
забезпечує окремий набір можливостей для користувачів та бізнесу. Першим
50
є модуль новин, який відповідає за створення, редагування та публікацію
інформаційних матеріалів. Він дозволяє бізнесу своєчасно інформувати
аудиторію про важливі події, оновлення продукції, акції та інші значущі
новини, підтримуючи постійний контакт із клієнтами та формуючи
позитивний імідж компанії в цифровому просторі [18].
Другим ключовим компонентом є модуль продажу товарів. Цей модуль
забезпечує повноцінну роботу функціоналу електронної комерції, включаючи
керування каталогом продукції, обробку замовлень, взаємодію з клієнтами та
інтеграцію з платіжними системами. Завдяки автономності цього модуля його
можна масштабувати та оновлювати незалежно від інших частин системи, що
є важливою перевагою в умовах активного розвитку бізнесу та розширення
асортименту товарів.
Третім є модуль статичної інформації, який використовується для
розміщення довідкових матеріалів, описів компанії, контактних даних та
іншого контенту, що не потребує частого оновлення. Він забезпечує
користувачам доступ до важливої інформації в структурованому вигляді та
підтримує загальну цілісність платформи, формуючи зручний і зрозумілий
інтерфейс. Такий розподіл на три основні модулі дозволяє ефективно
організувати роботу системи, забезпечити ізоляцію функціональних блоків і
полегшити процес розвитку та підтримки CMS у рамках підходу
мікрофронтендів.
Всі три основні модулі CMS системи розроблені як окремі JavaScript
додатки, що дозволяє забезпечити їхню автономність та незалежне
розгортання. Модуль новин був реалізований з використанням React, що
надало можливість побудувати компонентно орієнтований інтерфейс із
гнучкою організацією стану та зручним управлінням взаємодією користувача
з контентом. React у цьому модулі забезпечує швидке оновлення даних,
динамічну роботу з елементами сторінки та легке масштабування компонентів
у міру зростання функціональності [19].
51
Інші два модулі ‒ модуль продажу товарів та модуль статичної
інформації ‒ були розроблені за допомогою Vue.js. Використання Vue
дозволило створити легкі та продуктивні додатки з простим синтаксисом і
високим рівнем інтеграції з іншими компонентами системи. Vue добре
підходить для модулів із меншим обсягом складної логіки, де важлива
швидкість розробки та зрозумілість коду, при цьому зберігається можливість
інтегруватися з іншими модулями в межах мікрофронтенд архітектури,
структура розробленого WEB-додатку зображена на рисунку 3.1.
Рисунок 3.1 – Структура розробленого WEB-додатку
52
Такий підхід демонструє практичну перевагу мікрофронтендів:
незалежні модулі можуть бути реалізовані з використанням різних технологій
і при цьому без проблем інтегруватися у єдину систему. Кожен модуль
розвивається автономно, команди можуть обирати стек, який найкраще
відповідає їхнім потребам, а вся CMS працює як узгоджена платформа, де різні
технології співіснують без конфліктів і забезпечують стабільну роботу
користувацького інтерфейсу.
Всі три модулі CMS системи, розроблені як окремі JavaScript додатки,
інтегровані між собою за допомогою фреймворку single spa. Використання
single spa дозволяє організувати роботу системи так, щоб кожен модуль
залишався автономним, зберігаючи власний стек технологій та незалежний
життєвий цикл, водночас ефективно взаємодіючи з іншими компонентами
платформи. Це забезпечує можливість динамічного підключення і
відключення модулів, контрольованого завантаження ресурсів та управління
маршрутизацією в межах загального інтерфейсу.
Single spa виступає як оркестратор, який координує взаємодію між
модулем новин на React та модулями продажу товарів і статичної інформації
на Vue.js. Завдяки цьому кожен модуль може працювати у власному
середовищі, не впливаючи на функціонування інших частин системи, але при
цьому виглядає для користувача як єдиний цілісний застосунок. Така
організація дозволяє командам розробників паралельно впроваджувати нові
функції, тестувати оновлення та масштабувати систему без ризику виникнення
конфліктів між модулями.
Використання single spa також підвищує гнучкість та масштабованість
CMS. У майбутньому можна додавати нові модулі або замінювати існуючі на
інші технології без необхідності перебудови всієї платформи. Це демонструє
практичну цінність підходу мікрофронтендів, де поєднання незалежності
модулів та інтегрованості в єдину систему забезпечує стабільну роботу,
53
простоту підтримки та можливість поступового розвитку системи відповідно
до потреб бізнесу [20].
Використання трьох окремих мікрофронтендів у межах розробленої
CMS системи створює суттєві переваги для організації робочого процесу та
управління командою розробників. Кожен модуль ‒ модуль новин, модуль
продажу товарів та модуль статичної інформації ‒ розробляється як
автономний додаток із власним кодом, незалежним стеком технологій та
окремим життєвим циклом. Це дає можливість розподілити роботу між
кількома командами, де кожна зосереджується виключно на своєму модулі.
Такий підхід значно підвищує продуктивність, оскільки команди можуть
працювати паралельно, не очікуючи завершення розробки інших частин
системи, і швидше впроваджувати нові функції.
Крім того, автономність модулів дозволяє організувати окремі процеси
деплою для кожного мікрофронтенду. Це означає, що оновлення одного
модуля можна впроваджувати без ризику порушення роботи інших
компонентів платформи. Наприклад, команда, яка відповідає за модуль новин
на React, може випустити нову версію з додатковим функціоналом або
виправленням помилок, не впливаючи на модулі, реалізовані на Vue.js.
Аналогічно, деплой модулів електронної комерції або статичної інформації
також відбувається незалежно. Така практика підвищує стабільність системи,
зменшує ймовірність простоїв і помилок під час оновлень, а також спрощує
планування та управління релізами.
Таким чином, використання трьох окремих мікрофронтендів забезпечує
одночасно ефективну організацію командної роботи, підвищує швидкість
розробки та дозволяє підтримувати високу гнучкість платформи. Це наочно
демонструє переваги мікрофронтенд архітектури: кожен модуль розвивається
автономно, команди працюють паралельно, а процеси тестування, інтеграції
та деплою стають більш контрольованими та безпечними.
54
На даний момент усі три мікрофронтенди, що складають CMS систему
‒ модуль новин, модуль продажу товарів та модуль статичної інформації ‒
працюють з одним спільним backend API [21]. Це рішення забезпечує
централізоване зберігання даних, уніфіковану логіку обробки запитів і єдину
точку доступу до всієї інформації системи. Завдяки цьому кожен модуль
отримує необхідні дані через стандартизовані запити, не потребуючи прямого
доступу до бази даних чи внутрішніх сервісів сервера. Така організація
дозволяє підтримувати цілісність даних, забезпечує узгодженість інформації
між різними частинами системи та спрощує процес відлагодження та
тестування. Для команд розробників це також створює більш передбачуване
середовище, оскільки вони можуть бути впевнені, що зміни у серверній логіці
не порушать роботу інших модулів.
Разом з тим, архітектура мікрофронтендів залишає відкритими широкі
можливості для подальшого масштабування та розвитку системи. Однією з
переваг мікрофронтенд підходу є те, що кожен модуль може з часом стати
автономним і отримувати дані від окремого сервісу, або ж навіть від окремої
мікросервісної інфраструктури. Наприклад, модуль продажу товарів у
майбутньому може мати власний backend-сервіс для обробки замовлень та
інтеграції з платіжними системами, забезпечуючи більш гнучку і ефективну
роботу саме комерційної частини платформи. Модуль новин може
підключатися до окремого контентного API, оптимізованого для роботи з
текстовими та медійними матеріалами, а модуль статичної інформації може
працювати з ще одним сервісом, який відповідає за довідкові дані компанії та
довготривалі ресурси.
Такий підхід дозволяє досягти високого рівня ізоляції між
компонентами системи, зменшити ризики виникнення конфліктів, підвищити
продуктивність і надійність кожного модуля. Крім того, він відкриває
можливість для паралельного розвитку і деплою окремих компонентів, що є
особливо важливим у випадку, коли різні команди займаються своїми
55
модулями. Таким чином, наявність спільного backend API сьогодні забезпечує
стабільність та контроль над системою, тоді як структура мікрофронтендів
закладає фундамент для майбутньої еволюції, дозволяючи поступово
переходити до незалежних сервісів та підвищувати масштабованість
платформи відповідно до зростання потреб бізнесу.
Продуктивність розроблених модулів у межах цієї CMS системи є
однією з ключових характеристик, на яку зверталася особлива увага під час
проєктування та реалізації. Використання підходу мікрофронтендів дозволяє
забезпечити високий рівень продуктивності, оскільки кожен модуль є
автономним і завантажується незалежно від інших частин системи. Це
означає, що користувач не змушений чекати на повне завантаження всієї
платформи ‒ підвантажуються лише ті компоненти, які потрібні для поточної
взаємодії, що значно зменшує час рендерингу і покращує швидкодію
інтерфейсу.
Модуль новин, реалізований на React, демонструє високу динамічність
і швидку реакцію на дії користувача завдяки компонентному підходу та
оптимізованій роботі зі станом. React дозволяє ефективно оновлювати лише ті
частини інтерфейсу, які зазнали змін, що знижує навантаження на браузер і
покращує відчуття швидкодії навіть при великій кількості контенту. Модулі
продажу товарів та статичної інформації, розроблені на Vue.js,
характеризуються легкістю і компактністю коду, що дозволяє швидко
завантажувати сторінки та оптимізувати взаємодію користувача з системою.
Vue.js забезпечує ефективну реактивність компонентів і дозволяє обробляти
дані на клієнтській стороні без зайвого навантаження на сервер.
Використання single spa як оркестратора мікрофронтендів також
позитивно впливає на продуктивність. Завдяки цьому підходу модулі
завантажуються лише тоді, коли це необхідно, а взаємодія між ними
відбувається в межах контрольованого середовища, що запобігає зайвим
перезавантаженням і конфліктам ресурсів [22]. Окремі деплои модулів
56
дозволяють оптимізувати їхні ресурси незалежно один від одного, що
підвищує загальну швидкодію системи та забезпечує плавний користувацький
досвід.
Крім того, автономність модулів відкриває можливість для подальшої
оптимізації продуктивності, наприклад, шляхом кешування даних,
використання lazy loading для компонентів або підключення спеціалізованих
сервісів для обробки великих обсягів інформації. Такий підхід дозволяє
досягти високої ефективності системи навіть при значному зростанні
навантаження і забезпечує гнучкість для майбутнього масштабування,
зберігаючи стабільність та швидкодію кожного з мікрофронтендів.
Всі три модулі розробленої CMS системи використовують спільне
сховище даних, що дозволяє забезпечити узгодженість інформації між різними
частинами платформи та спрощує обмін даними між мікрофронтендами.
Використання спільного сховища дає можливість кожному модулю
отримувати актуальні дані в реальному часі, синхронізуючи стан системи без
необхідності дублювання інформації або додаткових запитів до серверу. Це
особливо важливо для CMS системи, де одна й та сама інформація, наприклад,
дані про товари або новини, може відображатися одночасно у кількох модулях.
Окрім того, впровадження спільного кешування даних підвищує
ефективність роботи системи та зменшує навантаження на backend. Кеш
дозволяє зберігати тимчасові копії даних у браузері користувача або на
клієнтській стороні, що скорочує кількість звернень до сервера та прискорює
доступ до часто використовуваної інформації. Завдяки цьому модулі можуть
швидко оновлювати свій інтерфейс і відображати актуальні дані без затримок,
навіть якщо одночасно працюють декілька компонентів, що взаємодіють із
одними і тими ж ресурсами. Такий підхід підвищує загальну продуктивність
системи та робить роботу користувача більш плавною та передбачуваною.
Для користувача робота системи виглядає цілісною та гармонійною,
незважаючи на те, що насправді вона складається з трьох окремих
57
мікрофронтендів. Інтерфейс платформи сприймається як єдиний додаток, де
всі модулі працюють узгоджено і реагують на дії користувача без затримок чи
видимих переривань. Завдяки цьому користувач не відчуває, що різні
функціональні блоки ‒ новини, продаж товарів та статична інформація ‒
розроблені окремо і можуть мати різні технологічні стеки.
Взаємодія між модулями організована таким чином, що дані та стан
системи синхронізуються через спільне сховище та кешування. Користувач
бачить однорідний потік інформації: новини миттєво відображаються, товари
завантажуються без затримок, а статичний контент інтегрується в загальний
інтерфейс. Всі переходи між розділами платформи відбуваються плавно, без
перезавантаження сторінки чи помітних змін у зовнішньому вигляді, що
створює відчуття роботи єдиного додатку.
Використання single spa як оркестратора дозволяє приховати технічні
деталі реалізації мікрофронтендів від кінцевого користувача. Завантаження
окремих модулів відбувається динамічно у фоновому режимі, а маршрутизація
між модулями виглядає як природна навігація в межах однієї платформи. Це
забезпечує високу зручність використання, адже користувачу не потрібно
знати про існування окремих компонентів або їхнє технологічне
розмежування ‒ для нього система сприймається як єдиний, логічно
пов’язаний та стабільний інтерфейс.
3.2 Опис функцій системи
Система розроблена таким чином, щоб користувач міг максимально
швидко та зручно отримувати доступ до всієї необхідної інформації та
взаємодіяти з різними функціональними блоками. Перш за все, користувач
бачить головну сторінку, яка об’єднує ключові модулі системи: новини,
продаж товарів та статичну інформацію. Інтерфейс оформлений у єдиному
стилі, що забезпечує відчуття цілісності платформи, незважаючи на те, що
кожен модуль технічно є окремим додатком. Головна сторінка містить
58
навігаційне меню, яке дозволяє швидко переміщуватися між розділами, і
панель швидкого доступу до найважливіших функцій.
Модуль новин надає користувачу можливість отримувати актуальну
інформацію про діяльність компанії, її продукти та послуги. На головній
сторінці цього модуля відображається стрічка новин із можливістю
сортування за датою, популярністю або тематикою. Кожна новина містить
заголовок, короткий опис і зображення, що дозволяє користувачу швидко
ознайомитися з її змістом. Натиснувши на заголовок, користувач потрапляє
на детальну сторінку новини, де може прочитати повний текст, переглянути
додаткові матеріали, прикріплені зображення, відео або документи. Для
зручності користувачів передбачена функція коментування та оцінки новин,
що дозволяє залишати відгуки та взаємодіяти з контентом. Додатково модуль
новин підтримує підписку на сповіщення про нові публікації, що надходять у
реальному часі. Це дозволяє користувачу залишатися в курсі актуальних подій
без необхідності постійно відвідувати сайт, відображення новин на
створеному порталі зображено на рисунку 3.2.
59
Рисунок 3.2 – Відображення новин на створеному порталі
Модуль продажу товарів забезпечує повноцінний досвід електронної
комерції. Користувач має змогу переглядати каталог продукції з різними
категоріями та підкатегоріями, фільтрувати товари за ціною, популярністю,
наявністю на складі або іншими критеріями. Кожен товар представлений
карткою, яка містить зображення, короткий опис, ціну та доступні варіанти
(колір, розмір, комплектація). Натиснувши на товар, користувач переходить
на детальну сторінку, де може ознайомитися з повним описом,
характеристиками, відгуками інших покупців та переглянути рекомендації
схожих продуктів. Система дозволяє додавати товари у кошик, редагувати
його вміст і оформляти замовлення за допомогою інтеграції з платіжними
сервісами, які підтримують безпечні транзакції. Для постійних користувачів
передбачено можливість зберігати історію замовлень та відслідковувати
60
статус доставки в реальному часі відображення товарів на сторінках порталу
зображено на рисунку 3.3.
Рисунок 3.3 – Відображення товарів на сторінках порталу
Модуль статичної інформації призначений для представлення
довідкових матеріалів та базової інформації про компанію. Користувач може
переглядати опис діяльності компанії, контактні дані, розташування офісів на
інтерактивній карті, а також правила користування платформою та політики
конфіденційності. Інформація структурована у вигляді статичних сторінок з
можливістю навігації через меню або пошук за ключовими словами, що
дозволяє швидко знаходити потрібні дані. Цей модуль забезпечує підтримку
користувача, надаючи доступ до часто задаваних питань, інструкцій або
посібників для роботи з платформою.
Крім основних функціональних модулів, система забезпечує ряд
додаткових можливостей, які покращують користувацький досвід. До них
належать персоналізація контенту ‒ користувач може налаштовувати
відображення новин або рекомендованих товарів залежно від власних
вподобань. Пошук і фільтри дозволяють швидко знаходити потрібну
інформацію або продукцію, а інтеграція з платіжними системами робить
процес оформлення замовлень простим та безпечним. Система підтримує
61
адаптивний дизайн, що забезпечує комфортну роботу як на десктопах, так і на
мобільних пристроях.
Користувацький досвід у системі значно покращується завдяки
можливості персоналізації контенту. Користувач може налаштовувати
відображення новин за тематикою, вибираючи цікаві категорії або типи
публікацій, які він хоче бачити на головній сторінці або в стрічці новин. Також
є можливість підписки на сповіщення про нові публікації або зміни у каталозі
товарів, що дозволяє залишатися в курсі подій без необхідності постійного
оновлення сторінки. Для зручності користувачів система автоматично
запам’ятовує їхні вподобання і налаштування, забезпечуючи
індивідуалізований досвід використання, який зменшує час пошуку потрібної
інформації і робить роботу з платформою більш комфортною.
Модуль продажу товарів надає користувачу великий набір інструментів
для взаємодії з продукцією. Користувач може не лише переглядати каталог,
але й використовувати різні фільтри для пошуку потрібного товару: за ціною,
категорією, популярністю, наявністю на складі, рейтингом або акційними
пропозиціями. Кожен товар має детальну картку, де відображається
інформація про характеристики, склад, умови доставки, гарантії та наявні
варіанти комплектацій. Окремо передбачено секцію відгуків, де користувач
може ознайомитися з думкою інших покупців або залишити власний
коментар. Це дозволяє підвищити довіру до продукту та приймати
обґрунтовані рішення про покупку.
Процес оформлення замовлення у модулі продажу побудований
максимально інтуїтивно. Користувач додає обрані товари до кошика, може
редагувати його вміст, змінювати кількість одиниць, видаляти або додавати
товари. Далі система пропонує оформити замовлення, вибравши спосіб
доставки та оплату через інтегровані платіжні сервіси. Для зручності
користувачів передбачена можливість збереження даних адреси, облікових
записів та історії замовлень. Після підтвердження замовлення користувач
62
отримує сповіщення про його статус і може відслідковувати доставку в режимі
реального часу. Такий підхід робить процес покупки швидким, безпечним і
прозорим.
Модуль статичної інформації виконує функцію довідника для
користувача. Тут розміщено базову інформацію про компанію, контактні дані,
місцезнаходження офісів із інтерактивними картами, правила користування
платформою, політики конфіденційності та інші документи, які допомагають
орієнтуватися в системі. Користувач може швидко знаходити потрібну
інформацію за допомогою вбудованого пошуку або структури навігаційного
меню. Крім того, у модулі реалізована система часто задаваних питань і
інструкцій, що спрощує користування системою навіть новачками. Це
дозволяє зменшити навантаження на службу підтримки та зробити роботу
користувача більш автономною.
Особливу увагу приділено синхронізації даних між модулями. Завдяки
спільному сховищу даних та кешуванню користувач бачить актуальну
інформацію в усіх модулях без затримок. Наприклад, якщо користувач додав
товар до кошика у модулі продажу, інформація одразу відображається у всіх
пов’язаних частинах системи, а новини, що стосуються продуктів або акцій,
автоматично синхронізуються зі стрічкою оновлень. Це створює відчуття
єдиного цілого, а користувачу не потрібно оновлювати сторінку або
переходити між різними додатками для отримання актуальної інформації.
Крім базових функцій, система підтримує додаткові можливості, які
покращують користувацький досвід та підвищують зручність роботи. Це
інтеграція з платіжними системами, що дозволяє швидко і безпечно
здійснювати фінансові операції; система сповіщень про нові товари, зміни в
замовленнях або публікації новин; персоналізовані рекомендації на основі
історії переглядів або попередніх покупок; а також адаптивний дизайн, що
забезпечує комфортну роботу на будь-яких пристроях ‒ від десктопів до
мобільних телефонів і планшетів.
63
Система передбачає комплексну роботу з обліковими записами
користувачів. Кожен користувач може зареєструватися, вказавши базові дані,
такі як ім’я, прізвище, електронну пошту та пароль, а також додаткову
інформацію, наприклад, контактний номер або адресу доставки. Після
реєстрації користувач отримує персональний профіль, у якому зберігаються
всі його дії та налаштування. У профілі можна переглядати історію переглядів
товарів, історію замовлень, збережені товари у «вподобаннях», а також
підписки на новини чи сповіщення про акції. Такий підхід дозволяє створити
персоналізований досвід для кожного користувача, адаптуючи контент і
функціонал платформи під його потреби та інтереси.
Управління ролями та правами доступу є ще однією важливою функцією
системи. Для користувачів передбачено декілька рівнів доступу. Наприклад,
звичайні користувачі можуть переглядати контент, додавати товари до кошика
та оформлювати замовлення, тоді як адміністратори отримують розширений
функціонал ‒ можливість додавати новини, керувати товарами, оновлювати
статичну інформацію, переглядати аналітичні дані та обробляти запити
користувачів. Крім того, для окремих модулів можна налаштовувати
специфічні права, що дозволяє, наприклад, призначати відповідальних осіб за
контент у модулі новин, але не надавати їм доступу до управління товарами
або фінансових операцій. Така гнучкість дозволяє ефективно організовувати
роботу команд, зменшує ризик помилок та забезпечує безпеку даних.
Система також підтримує ведення історії активності користувачів, що
дозволяє відслідковувати всі дії, виконані в межах платформи. Наприклад,
система реєструє переглянуті товари, оформлені замовлення, коментарі до
новин, підписки на сповіщення та інші дії. Користувач може переглядати свою
власну активність у профілі, а адміністратор ‒ отримувати статистику щодо
взаємодії всіх користувачів. Це допомагає не лише аналізувати популярність
контенту або продукції, а й планувати подальший розвиток системи та
впровадження нових функцій.
64
Аналітичні інструменти платформи дають користувачу та
адміністраторам змогу отримувати зведені дані про ефективність окремих
модулів. Наприклад, у модулі продажу можна відстежувати, які товари
користуються найбільшим попитом, які категорії переглядаються частіше, які
методи оплати використовуються найактивніше. У модулі новин можна
аналізувати кількість переглядів, коментарів і лайків, що допомагає
оптимізувати контент і підвищувати залученість користувачів. Статистичні
дані доступні у вигляді графіків і таблиць, що робить їх сприйняття зручним
та наочним, навіть для користувачів, які не мають технічного досвіду.
Система сповіщень є ще однією важливою функцією, що покращує
користувацький досвід. Користувач отримує повідомлення про нові товари,
акції, зміни у замовленнях або публікації новин у режимі реального часу.
Повідомлення можуть надходити через веб-інтерфейс, а в мобільній версії ‒
також у вигляді push-сповіщень. Це дозволяє користувачеві не пропускати
важливу інформацію та швидко реагувати на події, що підвищує залученість і
зручність користування платформою.
Крім основних функцій, система забезпечує підтримку інтеграції з
зовнішніми сервісами. Наприклад, модуль продажу товарів може бути
інтегрований із сторонніми платіжними системами для забезпечення
безпечних та швидких транзакцій. Модуль новин може підключатися до
зовнішніх джерел контенту, щоб автоматично оновлювати стрічку новин або
імпортувати матеріали, що підвищує актуальність та різноманітність контенту
для користувачів. Також можлива інтеграція з аналітичними сервісами для
отримання детальної інформації про активність користувачів, популярність
товарів і ефективність маркетингових кампаній.
Система також забезпечує високий рівень інтерактивності та зручності
навігації для користувача. Всі три модуля інтегровані в єдиний інтерфейс, що
дозволяє користувачеві переміщатися між розділами без затримок та
перезавантажень сторінок. Головне меню і панелі навігації залишаються
65
доступними у будь-якому модулі, забезпечуючи швидкий доступ до новин,
товарів та довідкової інформації. Динамічні елементи, такі як спливаючі вікна,
модальні форми, кнопки швидкого доступу і інтерактивні картки товарів,
роблять взаємодію інтуїтивно зрозумілою та природною, а також дозволяють
виконувати необхідні дії без зайвих переходів і повторних кліків.
Користувач також отримує широкий набір допоміжних сервісів, які
підвищують зручність використання платформи. Наприклад, система
пропонує персоналізовані рекомендації на основі історії переглядів і
попередніх покупок, що допомагає швидше знаходити цікаві новини та
товари. Функція пошуку дозволяє шукати інформацію у всіх модулях
одночасно, використовуючи ключові слова або фільтри, що спрощує навігацію
по великому об’єму даних. Крім того, платформа підтримує інтерактивні
підказки, інструкції та покрокові гіди для нових користувачів, що значно
зменшує поріг входу та робить систему доступною навіть для тих, хто не має
досвіду роботи з CMS.
Важливим аспектом є адаптивність інтерфейсу. Платформа коректно
відображається на будь-яких пристроях ‒ від десктопних комп’ютерів до
планшетів і мобільних телефонів. Це дозволяє користувачам працювати з
новинами, каталогом товарів та статичною інформацією у будь-якому
зручному місці та у будь-який час. Адаптивний дизайн забезпечує оптимальне
розташування елементів, зручну навігацію та швидке завантаження сторінок,
що робить роботу з платформою комфортною навіть при обмеженому
інтернет-з’єднанні.
Особливу увагу приділено сценаріям взаємодії користувача з системою.
Наприклад, при оформленні замовлення користувач проходить покроковий
процес: вибір товарів, редагування кошика, вибір способу доставки та оплати,
підтвердження замовлення та отримання сповіщення про його статус. У
модулі новин користувач може підписуватися на конкретні рубрики або
авторів, залишати коментарі та оцінки, а також отримувати автоматичні
66
сповіщення про нові публікації. Модуль статичної інформації надає доступ до
довідкових матеріалів у будь-який момент, дозволяючи користувачу швидко
знаходити необхідну інформацію або контакти для звернень до компанії.
Система також передбачає можливість інтеграції з додатковими
сервісами, такими як зовнішні аналітичні платформи, маркетингові
інструменти або платіжні шлюзи. Це дозволяє користувачу отримувати більш
точну та актуальну інформацію, користуватися розширеним функціоналом і
робить роботу з платформою більш ефективною. Наприклад, користувач може
отримувати персоналізовані сповіщення про акції або рекомендації товарів на
основі аналітики його поведінки на сайті, а адміністратор може
використовувати дані про активність для оптимізації контенту та підвищення
залученості.
Завдяки всім перерахованим функціям користувач зовсім не відчуває,
що система складається з трьох різних мікрофронтендів. Для нього платформа
виглядає як єдиний цілісний додаток із плавним і швидким інтерфейсом, де
всі модулі взаємодіють між собою без видимих затримок або розривів у роботі.
Інтеграція через спільне сховище даних, кешування та використання single spa
забезпечує високу швидкодію та синхронність, а автономність модулів
дозволяє системі розвиватися, масштабуватися та впроваджувати нові функції
без порушення роботи існуючих компонентів.
Таким чином, користувач отримує комплексну, зручну та гнучку
платформу, яка поєднує в собі можливості для отримання інформації,
взаємодії з контентом та управління замовленнями. Всі функції системи ‒ від
перегляду новин до оформлення покупок і налаштування персоналізованого
досвіду ‒ інтегровані у єдиний, логічно побудований інтерфейс, який
забезпечує комфортну і передбачувану роботу на будь-якому пристрої та
відповідає сучасним вимогам користувачів. Такий підхід дозволяє
демонструвати практичну ефективність мікрофронтенд архітектури,
67
одночасно забезпечуючи стабільність, швидкодію та масштабованість
системи.
3.3 Технічні вимоги для роботи з системою
Для комфортної та безпечної роботи з розробленою CMS системою
кінцевий користувач повинен дотримуватися певних технічних вимог.
Основною умовою є наявність сучасного веб-браузера, що підтримує
стандарти HTML5, CSS3 та JavaScript. Система побудована з використанням
технологій мікрофронтенду, React та Vue.js, а також застосовує динамічне
завантаження компонентів через single spa, що вимагає підтримки останніх
версій браузерів. Рекомендується використовувати популярні браузери, такі
як Google Chrome, Mozilla Firefox, Microsoft Edge або Safari, щоб забезпечити
повну сумісність із усіма функціями платформи та уникнути можливих
проблем із відображенням інтерфейсу. Підтримка старих версій браузерів або
застарілих технологій може призвести до некоректного відображення
сторінок, затримок у роботі або обмеження доступу до деяких модулів
системи.
Ще однією важливою технічною вимогою є стабільне підключення до
Інтернету. Оскільки система використовує спільне сховище даних і
кешування, а також динамічно підвантажує контент із backend API, швидкість
з’єднання впливає на час завантаження сторінок і швидкість оновлення даних.
Рекомендована мінімальна швидкість з’єднання становить 5 Мбіт/с для
комфортної роботи з усіма функціональними модулями, включаючи модуль
продажу товарів з великою кількістю зображень та інтерактивних елементів.
При повільному або нестабільному Інтернет-з’єднанні деякі елементи
інтерфейсу можуть завантажуватися довше або відображатися некоректно, що
впливає на загальний користувацький досвід.
Користувач повинен мати доступ до пристрою з достатньою
продуктивністю для обробки динамічного контенту. Оскільки платформа
68
працює з автономними мікрофронтендами, що завантажуються і рендеряться
незалежно, кожен модуль використовує ресурси пристрою ‒ процесор,
оперативну пам’ять та графічний адаптер. Для оптимальної роботи
рекомендується мати пристрій із мінімум 4 ГБ оперативної пам’яті і сучасним
процесором, який підтримує багатопоточну обробку, щоб уникнути затримок
під час рендерингу компонентів або обробки великої кількості даних. Це
особливо актуально для модулів з активним динамічним контентом, таких як
модуль новин з медіафайлами та модуль продажу товарів із великою кількістю
карток продукції.
Для користувачів мобільних пристроїв важливо забезпечити сучасну
версію операційної системи та наявність браузера, що підтримує адаптивний
дизайн. Платформа автоматично підлаштовується під розмір екрану, однак
деякі інтерактивні елементи, такі як спливаючі вікна, модальні форми або
великі таблиці з даними, можуть працювати некоректно на старих версіях ОС
або застарілих мобільних браузерах. Рекомендується використовувати
операційні системи, що підтримують останні версії браузерів, а також
забезпечити достатньо оперативної пам’яті для плавної роботи платформи на
мобільних пристроях.
Ще одним важливим аспектом є підтримка JavaScript і cookies у браузері.
Система використовує динамічне завантаження модулів, управління станом
через спільне сховище даних і кешування, а також роботу сесій користувачів,
що неможливо без увімкненого JavaScript. Cookies використовуються для
збереження налаштувань користувача, стану сесії, а також персоналізації
контенту. Вимкнення цих функцій може призвести до обмеження доступу до
системи, втрати персоналізації та неможливості коректного виконання дій,
таких як оформлення замовлень або підписка на новини.
Для коректного відображення та роботи всіх медіаелементів
користувачу рекомендується використовувати пристрої з підтримкою
сучасних форматів зображень і відео, таких як PNG, JPEG, WebP та MP4.
69
Модуль новин активно використовує медіа-контент, а модуль продажу товарів
відображає зображення продукції та демонстраційні відео. Відсутність
підтримки цих форматів може призвести до некоректного відображення
контенту або втрати частини функціоналу, що впливає на загальний
користувацький досвід.
Крім технічних характеристик пристрою та браузера, важливо
дотримуватися базових правил безпеки під час роботи з системою. Для
забезпечення захисту персональних даних та фінансових транзакцій
користувачу рекомендується не використовувати загальнодоступні або
незахищені мережі Wi-Fi, не зберігати паролі у браузері без додаткового
захисту та регулярно оновлювати антивірусне програмне забезпечення.
Система підтримує роботу через HTTPS, що забезпечує шифрування всіх
даних між клієнтом і сервером, але безпечні практики користувача є
необхідною умовою для повного захисту особистої інформації.
Технічні вимоги до кінцевого користувача включають наявність
сучасного браузера, стабільного Інтернет-з’єднання, продуктивного
пристрою, підтримку JavaScript і cookies, а також базових правил безпеки.
Дотримання цих вимог дозволяє максимально ефективно використовувати усі
функції платформи ‒ від перегляду новин та роботи з каталогом товарів до
оформлення замовлень і персоналізації контенту, забезпечуючи комфортну,
безпечну та швидку роботу з системою.
3.4 Оцінка ефективності
Оцінка ефективності розробленої CMS системи в порівнянні з відомими
платформами, такими як WordPress, Joomla чи Drupal, дозволяє чітко
окреслити переваги та недоліки підходу з використанням мікрофронтенд
архітектури. Однією з ключових переваг розробленої системи є
продуктивність. Завдяки розділенню функціоналу на три окремі
70
мікрофронтенди ‒ модуль новин, модуль продажу товарів та модуль статичної
інформації ‒ платформа забезпечує автономне завантаження компонентів і
динамічне оновлення контенту. Користувач не змушений чекати на повне
завантаження всього додатку, що особливо важливо для сучасних вебсистем
із великою кількістю динамічного контенту та інтерактивних елементів. У
порівнянні з WordPress, який зазвичай працює як монолітна система і
завантажує всю сторінку цілком, мікрофронтенд підхід дозволяє значно
прискорити час рендерингу та підвищити швидкодію платформи навіть при
великому навантаженні.
Ще однією перевагою є використання сучасних технологій у розробці.
Розроблена система застосовує React і Vue.js, що дозволяє створювати
динамічні і реактивні інтерфейси, а також управляти станом через спільне
сховище даних. Це надає можливість реалізовувати сучасні користувацькі
сценарії, які складно або обмежено реалізувати у традиційних CMS, таких як
WordPress, де для досягнення подібного рівня динамічності часто необхідне
використання додаткових плагінів або кастомних рішень. Single spa як
оркестратор мікрофронтендів забезпечує плавну інтеграцію модулів і дає
змогу окремим командам розробників працювати над різними частинами
системи паралельно, що підвищує ефективність процесу розробки та дозволяє
швидко впроваджувати нові функції.
Ще однією важливою перевагою є можливість незалежного розвитку і
деплою модулів. Кожен мікрофронтенд можна оновлювати, оптимізувати або
масштабувати без впливу на інші модулі системи. Це дає значні переваги у
підтримці та модернізації платформи, оскільки адміністратори та розробники
можуть планувати окремі релізи для новин, товарів або довідкової інформації
без ризику порушити роботу всього додатку. У традиційних CMS, таких як
WordPress, будь-яка зміна в коді або плагіні може впливати на всю систему,
що іноді призводить до конфліктів і збоїв у роботі.
71
Разом з тим, розроблена система має і певні недоліки у порівнянні з
WordPress та іншими популярними CMS. Однією з таких особливостей є
обмежена кількість готових шаблонів і плагінів. WordPress пропонує тисячі
готових тем оформлення і розширень, що дозволяє швидко налаштувати
систему під потреби бізнесу без залучення програмістів. У розробленій
системі наразі немає такої широкої екосистеми, що вимагає створення
кастомного коду для реалізації нових функцій або стилів. Це може збільшити
час на впровадження нових рішень на початковому етапі використання
платформи.
Однак у майбутньому розроблена система має потенціал для подолання
цих обмежень. Завдяки модульній архітектурі та використанню сучасних
фреймворків можна створювати власну бібліотеку компонентів, шаблонів та
плагінів, що дозволить швидко розширювати функціонал. Використання
мікрофронтендів також відкриває можливість підключати сторонні сервіси
або розширення незалежно для кожного модуля, що дає ще більшу гнучкість,
ніж у традиційних монолітних CMS. Тобто, хоча на даний момент кількість
готових розширень обмежена, архітектура платформи закладає фундамент для
масштабованості та розвитку, що дозволить поступово досягти рівня
універсальності, подібного до WordPress.
Підсумовуючи, ефективність розробленої системи можна оцінити як
високий рівень продуктивності, сучасні технології та можливість паралельної
розробки окремими командами. Система забезпечує швидке завантаження
модулів, автономність і масштабованість, а також інтеграцію сучасних
фронтенд-технологій, що робить її гнучкою та готовою до майбутніх
розширень. Водночас існують обмеження у порівнянні з WordPress щодо
готових шаблонів і плагінів, проте архітектура платформи дозволяє поступово
їх створювати та інтегрувати, що робить систему перспективною для розвитку
та адаптації під будь-які потреби бізнесу.
72
3.5 Висновки до розділу 3
Оцінка ефективності розробленої CMS системи демонструє, що
використання мікрофронтенд архітектури забезпечує суттєві переваги
порівняно з традиційними платформами, такими як WordPress, Joomla чи
Drupal. Головними перевагами є висока продуктивність завдяки автономному
завантаженню модулів, динамічне оновлення контенту та швидке
рендерування навіть при великому навантаженні. Використання сучасних
технологій, таких як React і Vue.js, дозволяє створювати динамічні і реактивні
інтерфейси, а Single SPA як оркестратор мікрофронтендів забезпечує
інтеграцію модулів і паралельну роботу команд розробників, що підвищує
ефективність розробки та впровадження нових функцій.
Ключовою перевагою є також незалежність розвитку та деплою кожного
модуля. Модулі можна оновлювати, оптимізувати та масштабувати окремо,
що спрощує підтримку та модернізацію платформи і зменшує ризик
конфліктів, характерних для монолітних CMS.
Серед недоліків варто відзначити обмежену кількість готових шаблонів
і плагінів, що у WordPress дозволяє швидко налаштовувати систему без
залучення програмістів. Проте модульна архітектура і сучасні фреймворки
дають потенціал для створення власної бібліотеки компонентів та розширень,
що забезпечує поступове збільшення функціональності і гнучкості системи.
Розроблена CMS демонструє високий рівень продуктивності,
масштабованість, автономність і готовність до подальшого розвитку.
Незважаючи на обмеження щодо готових розширень, архітектура платформи
закладає основу для гнучкої адаптації під різні потреби бізнесу, роблячи її
перспективним рішенням для сучасних вебсистем.
73
РОЗДІЛ 4 ЗАХИСТ МІКРОФРОНТЕНД-АРХІТЕКТУРИ ДЛЯ
ПОБУДОВИ РОЗПОДІЛЕНИХ ВЕБСИСТЕМ
4.1 Огляд існуючих рішень захисту системи сповіщення
Захист інформації у фронтенд-додатках є критично важливим аспектом
забезпечення безпеки інформаційної системи, оскільки саме фронтенд є
точкою взаємодії користувача з веб-додатком і виступає потенційною
мішенню для атак. Основна мета захисту полягає у запобіганні
несанкціонованому доступу, маніпуляціям із даними, витоку конфіденційної
інформації та порушенню цілісності системи.
Одним із ключових напрямків захисту є контроль доступу та
аутентифікація користувачів. Фронтенд-додатки повинні забезпечувати
надійне підтвердження особи користувача за допомогою сучасних механізмів,
таких як двофакторна аутентифікація (2FA), OAuth 2.0, OpenID Connect або
інтеграція з корпоративними системами управління ідентифікацією.
Правильна аутентифікація гарантує, що до додатка мають доступ лише
авторизовані користувачі, а права доступу реалізуються відповідно до ролей
та політик безпеки [23].
Фронтенд-додатки також повинні забезпечувати захист даних при їх
передачі. Для цього використовуються протоколи безпечної комунікації, такі
як HTTPS з TLS, що шифрує дані між клієнтом і сервером та запобігає
перехопленню конфіденційної інформації. Крім того, важливо контролювати
введення користувача та запобігати атакам типу XSS (Cross-Site Scripting),
SQL Injection, CSRF (Cross-Site Request Forgery) та іншим методам ін’єкцій,
які можуть призвести до компрометації системи.
Для підвищення безпеки рекомендується застосовувати політику
Content Security Policy (CSP), яка дозволяє визначати допустимі джерела
скриптів, стилів та медіа-контенту. CSP зменшує ризик виконання шкідливих
74
скриптів і обмежує потенційні вектори атак. Також доцільно використовувати
механізми захисту cookie, включаючи HttpOnly, Secure та SameSite, що
запобігає доступу сторонніх скриптів до сесійних даних і зменшує ризик
CSRF-атак [24].
Іншим важливим аспектом є захист даних, що зберігаються у браузері.
Локальне сховище (LocalStorage, SessionStorage, IndexedDB) слід
використовувати обережно, оскільки дані у ньому доступні JavaScript-коду.
Чутливу інформацію бажано не зберігати на стороні клієнта або шифрувати її
перед збереженням. Для управління станом і передачі даних між
компонентами також рекомендується застосовувати безпечні патерни,
наприклад, централізовані сховища з контролем доступу та обмеженням
прямого доступу до критичних даних.
Захист фронтенд-додатків включає також регулярне оновлення
сторонніх бібліотек та залежностей, оскільки вразливості в них можуть бути
використані для атак на систему. Використання сучасних інструментів
моніторингу та автоматичного сканування вразливостей дозволяє виявляти та
усувати ризики до того, як вони стануть критичними.
Крім технічних заходів, ефективність захисту фронтенд-додатків
залежить від дотримання принципів безпечного програмування. Це включає
мінімізацію доступу до глобальних змінних, застосування строгого
типізування, перевірку даних на всіх етапах обробки, а також документування
та стандартизацію безпечних патернів розробки.
Захист інформації у фронтенд-додатках ‒ це комплекс заходів, який
охоплює контроль доступу, безпечну передачу даних, запобігання ін’єкційним
атакам, захист локального сховища, управління сесіями, оновлення
компонентів та застосування безпечних практик розробки. Виконання цих
заходів дозволяє забезпечити конфіденційність, цілісність та доступність
інформації у сучасних веб-додатках.
75
Захист інформації при роботі з інформаційною системою вимагає
реалізації надійних механізмів автентифікації та авторизації, оскільки саме
вони забезпечують контроль доступу користувачів до ресурсів і
функціональних можливостей системи. Ці процеси є фундаментальними для
гарантування конфіденційності, цілісності та доступності даних у будь-якому
сучасному програмному середовищі.
Автентифікація є процесом перевірки особи користувача, тобто
підтвердження, що користувач дійсно є тим, за кого себе видає. Вона може
здійснюватися за допомогою різних методів, включаючи традиційні
комбінації логіна та пароля, багатофакторну автентифікацію (MFA),
використання одноразових паролів (OTP), біометричних даних (відбитки
пальців, розпізнавання обличчя) та сертифікатів цифрового підпису. Сучасні
системи також використовують стандартизовані протоколи, такі як OAuth 2.0,
OpenID Connect або SAML, що дозволяє інтегрувати автентифікацію у
корпоративні системи та забезпечує безпечний обмін токенами доступу.
Авторизація є процесом визначення рівня доступу користувача до
конкретних ресурсів або функцій системи після його автентифікації. Вона
реалізується через систему ролей та прав доступу (RBAC ‒ Role-Based Access
Control), де кожному користувачу присвоюється певна роль із визначеним
набором дозволів, або через більш гнучку модель на основі атрибутів (ABAC
‒ Attribute-Based Access Control), що враховує контекст доступу,
характеристики користувача та властивості ресурсів. Авторизація забезпечує,
що користувачі можуть виконувати лише ті дії, на які вони мають відповідні
права, зменшуючи ризик несанкціонованих дій і порушень безпеки [25].
Для підвищення безпеки системи рекомендується застосовувати
багаторівневі механізми контролю доступу, включаючи одноразові токени
доступу, часові обмеження сесій, контроль IP-адрес, геолокаційні перевірки
та моніторинг активності користувачів. Зберігання паролів повинно
виконуватися у хешованому та солоному вигляді із застосуванням сучасних
76
криптографічних алгоритмів, таких як bcrypt або Argon2, що забезпечує захист
від витоку облікових даних навіть у разі компрометації бази даних.
Критично важливо також забезпечити безпечну передачу облікових
даних та токенів через мережу за допомогою протоколів TLS/HTTPS, що
шифрують інформацію і захищають її від перехоплення або модифікації. Крім
того, системи повинні підтримувати механізми блокування облікових записів
при підозрілих спробах доступу, ведення журналів аудиту та сповіщення
адміністратора про потенційні загрози.
Сучасні підходи передбачають інтеграцію єдиної системи
автентифікації (SSO ‒ Single Sign-On), яка дозволяє користувачу увійти один
раз і отримати доступ до декількох підсистем без повторного введення
облікових даних. Це підвищує зручність користувачів, зменшує ймовірність
використання слабких паролів і спрощує централізоване управління безпекою.
Захист інформації при роботі з системою через автентифікацію та
авторизацію є комплексом технічних, криптографічних та організаційних
заходів, спрямованих на контроль доступу, запобігання несанкціонованим
діям та забезпечення цілісності і конфіденційності інформації. Реалізація
багаторівневих механізмів безпеки підвищує стійкість інформаційної системи
до внутрішніх та зовнішніх загроз, забезпечує надійну роботу користувачів і
відповідає сучасним стандартам інформаційної безпеки.
Захист інформації при збереженні даних у базі даних є критично
важливим аспектом безпеки інформаційної системи, оскільки база даних
виступає основним сховищем всієї функціональної та конфіденційної
інформації. Недостатній захист бази даних може призвести до
несанкціонованого доступу, витоку даних, їхньої модифікації або втрати, що
становить серйозну загрозу для організації та користувачів системи.
Одним із ключових напрямків захисту є контроль доступу до бази даних.
Це передбачає реалізацію механізмів аутентифікації користувачів та ролей,
визначення прав доступу до таблиць, записів та операцій над ними. Моделі
77
доступу, такі як RBAC (Role-Based Access Control) та ABAC (Attribute-Based
Access Control), дозволяють обмежувати права користувачів відповідно до
їхніх ролей або атрибутів, що зменшує ризик випадкової або навмисної
модифікації даних.
Криптографічний захист інформації є важливим компонентом безпеки
бази даних. Він включає шифрування даних як при збереженні (at rest), так і
під час передачі (in transit). Сучасні системи використовують алгоритми
симетричного та асиметричного шифрування, наприклад AES, RSA або TLS,
для забезпечення конфіденційності даних. Шифрування критично важливе
для чутливої інформації, такої як персональні дані, фінансові транзакції або
медичні записи, оскільки навіть у разі компрометації бази даних дані
залишаються недоступними для зловмисників.
Іншим важливим аспектом є контроль цілісності даних. Використання
цифрових підписів, хеш-функцій та механізмів перевірки контрольних сум
дозволяє відстежувати будь-які зміни у записах бази даних і гарантувати, що
інформація не була модифікована без дозволу. Регулярне резервне копіювання
та відновлення даних також є частиною стратегії захисту, забезпечуючи
можливість відновлення інформації у разі технічних збоїв, помилок
користувачів або кібератак.
Моніторинг та аудит доступу до бази даних дозволяють своєчасно
виявляти спроби несанкціонованого доступу або підозрілу активність.
Системи журналювання ведуть записи про дії користувачів, час звернення до
ресурсів, зміни даних і спроби порушення політик доступу. Це дозволяє не
тільки реагувати на інциденти безпеки, але й проводити аналіз та
вдосконалювати механізми захисту.
Безпека баз даних також передбачає застосування принципів мінімізації
прав, сегментації даних, ізоляції середовищ та регулярного оновлення
програмного забезпечення. Використання сучасних СУБД з вбудованими
механізмами шифрування, управління доступом і контролю транзакцій
78
підвищує надійність захисту та забезпечує відповідність стандартам
інформаційної безпеки, таким як ISO/IEC 27001, GDPR або HIPAA.
Захист інформації при збереженні даних у базі даних є комплексним
процесом, який включає контроль доступу, криптографічний захист,
забезпечення цілісності, аудит та моніторинг активності. Реалізація цих
заходів гарантує конфіденційність, цілісність та доступність даних, підвищує
стійкість інформаційної системи до зовнішніх і внутрішніх загроз та
відповідає сучасним вимогам безпеки та законодавчим нормам.
Мікрофронтенди, як архітектурний підхід, дозволяють будувати великі
веб-додатки через розподіл функціональності на автономні піддодатки, які
інтегруються у єдиний користувацький інтерфейс. Разом із цим підходом
виникають специфічні загрози безпеці, пов’язані з взаємодією численних
незалежних модулів, що можуть використовувати різні технології, бібліотеки
та версії фреймворків. Захист інформації при роботі з мікрофронтендами
потребує комплексного підходу, що охоплює ізоляцію модулів, контроль
доступу, захист комунікацій та забезпечення цілісності даних.
Одним із ключових аспектів є ізоляція мікрофронтендів. Кожен
піддодаток повинен працювати незалежно, не впливати на інші модулі та не
порушувати глобальний стан системи. Для цього застосовуються такі
механізми, як використання Web Components, Shadow DOM, iframe або
ізольованих контейнерів, що дозволяє уникнути конфліктів стилів, глобальних
змінних та небажаного виконання скриптів сторонніх модулів. Ізоляція також
запобігає поширенню атак, таких як Cross-Site Scripting (XSS), з одного
мікрофронтенду на інший.
Захист інформації передбачає контроль доступу та автентифікацію
на рівні мікрофронтендів. Оскільки кожен піддодаток може мати власні
ресурси, важливо забезпечити перевірку прав користувача перед
завантаженням або виконанням функцій. Це може здійснюватися через
централізовану авторизацію з використанням токенів доступу (JWT, OAuth
79
2.0), які передаються між shell-додатком і мікрофронтендами. Такі токени
повинні бути надійно захищені, наприклад, через HTTPS та зберігатися у
безпечних cookie з атрибутами HttpOnly і Secure.
Важливим аспектом є захист комунікації між мікрофронтендами та
сервером, а також між самими модулями. Використання шифрування
TLS/HTTPS для передачі даних та застосування стандартизованих API з
перевіркою прав доступу дозволяє уникнути перехоплення або модифікації
даних під час їхнього переміщення. Для внутрішньої взаємодії між модулями
застосовуються механізми подій, message bus або централізовані стани (state
management) із обмеженням прямого доступу до даних і контрольованою
маршрутизацією повідомлень.
Ключовим елементом захисту є управління залежностями та
бібліотеками, оскільки кожен мікрофронтенд може використовувати різні
версії фреймворків і сторонніх пакетів. Регулярне оновлення компонентів,
сканування на вразливості та використання перевірених джерел забезпечує
зменшення ризику атак через сторонні бібліотеки. Крім того, бажано
застосовувати централізовані політики безпеки, щоб уніфікувати контроль за
загрозами у всіх модулях.
Захист мікрофронтендів також включає моніторинг активності та
аудит. Ведення логів дій користувачів і подій у мікрофронтендах дозволяє
виявляти аномалії, несанкціоновані спроби доступу та потенційні загрози
безпеки. У великих системах доцільно застосовувати централізовану систему
моніторингу, яка збирає інформацію зі всіх піддодатків та дозволяє
оперативно реагувати на інциденти.
Таким чином, захист інформації при роботі з мікрофронтендами є
комплексним процесом, що включає ізоляцію модулів, контроль доступу та
автентифікацію, захист комунікацій, управління залежностями та
бібліотеками, аудит і моніторинг. Реалізація цих заходів дозволяє забезпечити
конфіденційність, цілісність та доступність даних у розподілених фронтенд-
80
додатках, зменшує ризики атак та забезпечує надійну і безпечну роботу
користувачів у сучасних веб-системах.
4.2 Реалізація захисту даних у мікрофронтенд-архітектурі
Захист даних і безпечна робота користувачів є одним із ключових
пріоритетів розробленої CMS системи. Платформа спроектована так, щоб
забезпечити високий рівень безпеки на всіх рівнях: клієнтському, серверному
та при взаємодії між модулями. Перш за все, система передбачає надійну
автентифікацію та авторизацію користувачів. Кожен користувач повинен
пройти процес реєстрації, під час якого вводяться базові дані, такі як ім’я,
прізвище, електронна пошта та пароль. Для додаткового захисту передбачено
підтвердження електронної пошти, що запобігає створенню фейкових
акаунтів. Паролі зберігаються у хешованому вигляді за допомогою сучасних
криптографічних алгоритмів, що унеможливлює їх відновлення навіть у разі
компрометації бази даних. Для підвищення рівня безпеки користувачі можуть
активувати двофакторну автентифікацію (2FA), яка вимагає додаткового
підтвердження через SMS, email або спеціальні мобільні додатки для генерації
одноразових кодів.
Важливою складовою безпеки є контроль доступу та ролей. У системі
передбачено кілька рівнів прав користувачів. Звичайні користувачі можуть
взаємодіяти з контентом, переглядати новини, оформляти замовлення і
користуватися базовими функціями платформи. Адміністратори отримують
доступ до управління модулями, редагування контенту, контролю замовлень
і аналітики. Кожен модуль має можливість окремого налаштування прав
доступу, що дозволяє, наприклад, призначати відповідальних за модуль новин
без надання їм доступу до модулю продажу. Такий підхід забезпечує
ефективне розмежування прав та зменшує ризики випадкових або
несанкціонованих дій у системі.
81
На клієнтській стороні реалізовані механізми безпеки для захисту даних
під час роботи користувача із системою. Усі дані передаються через захищене
з’єднання HTTPS, що забезпечує шифрування інформації між браузером і
сервером. Сесії користувачів контролюються системою: встановлюються
обмеження на одночасні сесії, передбачено автоматичне завершення сесії
після певного часу бездіяльності, а також зберігаються токени авторизації для
управління доступом до ресурсів. Важливо, що система реалізує захист від
загальних веб-атак, таких як CSRF (Cross-Site Request Forgery) і XSS (Cross-
Site Scripting), шляхом використання токенів перевірки запитів і фільтрації
введених даних.
Особливу увагу приділено захисту мікрофронтендів. Кожен модуль ‒
новини, товари та статична інформація ‒ працює автономно через single spa,
що дозволяє ізолювати їх один від одного. Така архітектура знижує ризики,
якщо один модуль стане об’єктом атаки, оскільки проблеми не поширюються
на інші компоненти системи. Спільне сховище даних та кешування
організовані так, щоб обмежити доступ до конфіденційної інформації тільки
тим модулям і компонентам, які мають на це право. Наприклад, користувачі
не можуть отримати доступ до адміністративних функцій модулю продажу
через модуль новин. Це дозволяє зберегти контроль над даними та уникнути
витоків між компонентами системи.
Backend частина системи також реалізує багаторівневий захист. Доступ
до API контролюється через токени авторизації, що перевіряються при
кожному запиті. База даних захищена від несанкціонованого доступу за
допомогою правил доступу та шифрування чутливих даних на рівні таблиць.
Крім того, всі дії користувачів і адміністраторів логуються для аудиту та
виявлення підозрілих дій. Це дозволяє оперативно реагувати на спроби
вторгнень або порушення правил користування платформою, а також
забезпечує можливість відновлення даних у разі інцидентів.
82
Особливо ретельно розроблено захист фінансових операцій у модулі
продажу товарів. Для цього система інтегрована із сертифікованими
платіжними шлюзами, що відповідають міжнародним стандартам безпеки,
таким як PCI DSS. Платформа не зберігає фінансові дані користувачів
локально, а передає їх безпосередньо у захищені сервіси, що знижує ризики
компрометації і забезпечує безпечне проведення транзакцій. Крім того,
передбачено контроль за успішністю платежів і сповіщення користувача про
будь-які проблеми з оплатою, що підвищує прозорість і безпеку процесу
покупки.
У майбутньому розроблена система передбачає можливість додаткового
посилення безпеки. Планується впровадження розширених механізмів
моніторингу і виявлення аномалій у поведінці користувачів, інтеграція з
системами захисту від DDoS атак та впровадження регулярних перевірок на
вразливості. Також розробники можуть створювати бібліотеки безпечних
компонентів і плагінів для мікрофронтендів, що дозволить швидко додавати
нові функції без ризику порушення безпеки платформи.
Завдяки комплексному підходу до захисту ‒ на рівні користувача,
мікрофронтендів та backend ‒ система забезпечує високий рівень надійності,
мінімізує ризики витоку або компрометації даних і дозволяє користувачу
працювати безперервно та безпечно. Навіть при великому навантаженні,
активному використанні динамічних функцій або інтеграції з зовнішніми
сервісами безпека платформи залишається на високому рівні, що є критично
важливим для бізнес-додатків, де конфіденційність і стабільність роботи
мають ключове значення.
Таким чином, реалізація захисту в розробленій CMS системі охоплює
усі аспекти сучасної веб-безпеки: від автентифікації та контролю доступу до
шифрування даних, ізоляції модулів, логування дій і безпечної інтеграції з
платіжними сервісами. Платформа поєднує в собі високу продуктивність,
83
модульність та надійність, що робить її стійкою до загроз і готовою до
масштабування та подальшого розвитку у майбутньому.
4.3 Висновки до розділу 4
Захист інформації у мікрофронтенд-архітектурі є комплексним та
багаторівневим процесом, що охоплює клієнтську, серверну та міжмодульну
взаємодію. Аналіз існуючих рішень показав, що ефективна безпека фронтенд-
додатків потребує поєднання автентифікації, авторизації, контролю доступу,
захисту даних при передачі та збереженні, а також застосування сучасних
практик безпечного програмування.
Реалізація захисту в розробленій CMS системі підтвердила переваги
мікрофронтенд-архітектури. Ізоляція модулів, використання single spa,
контроль доступу на рівні кожного модуля та централізоване управління
токенами авторизації забезпечують надійний захист від атак і витоку даних.
Шифрування інформації під час передачі через HTTPS, безпечне зберігання
паролів та токенів, а також багаторівневий захист backend та бази даних
дозволяють гарантувати конфіденційність, цілісність та доступність
інформації.
Особлива увага приділена безпеці фінансових операцій, інтеграції з
сертифікованими платіжними шлюзами та контролю транзакцій, що підвищує
надійність комерційних функцій платформи. Реалізовані механізми логування,
моніторингу та аудит дозволяють оперативно виявляти аномалії та реагувати
на потенційні загрози.
Комплексний підхід до захисту даних у мікрофронтенд-архітектурі
забезпечує стійкість системи до зовнішніх і внутрішніх загроз, дозволяє
безпечно масштабувати та розвивати платформу, а також підтримує високий
рівень надійності та безперервності роботи для користувачів. Розроблена CMS
демонструє, що поєднання модульності, ізоляції та сучасних практик безпеки
робить мікрофронтенд-платформи перспективними для розбудови сучасних
розподілених вебсистем.
84
ВИСНОВКИ
У ході виконання кваліфікаційної роботи було досліджено та
розроблено сучасну CMS систему на основі мікрофронтенд-архітектури, а
також проведено комплексну оцінку її ефективності, продуктивності та
безпеки у порівнянні з традиційними платформами, такими як WordPress,
Joomla та Drupal. Розроблена система продемонструвала ряд суттєвих переваг,
зокрема високу продуктивність, гнучкість у масштабуванні, автономність
модулів та можливість паралельної роботи різних команд розробників над
окремими частинами платформи. Завдяки розподілу функціоналу на три
ключові мікрофронтенд ‒ модуль новин, модуль продажу товарів та модуль
статичної інформації ‒ забезпечується динамічне завантаження контенту, що
дозволяє користувачам отримувати швидкий доступ до необхідної інформації
без очікування повного рендерингу всього додатку.
Використання сучасних фронтенд-технологій, таких як React і Vue.js, а
також оркестратора мікрофронтендів Single SPA дозволяє створювати
динамічні та інтерактивні інтерфейси, впроваджувати сучасні користувацькі
сценарії та забезпечувати ефективне управління станом через спільне сховище
даних. Крім того, архітектура платформи передбачає незалежний розвиток і
деплой кожного модуля, що суттєво спрощує оновлення системи та зменшує
ризики виникнення конфліктів між компонентами. Хоча на даному етапі
система має обмежену кількість готових шаблонів та плагінів порівняно з
популярними CMS, її модульна структура закладає фундамент для створення
власної бібліотеки компонентів та поступового розширення функціоналу.
Особлива увага в роботі була приділена питанням безпеки та захисту
даних у розподіленій мікрофронтенд-архітектурі. Впроваджено багаторівневі
механізми автентифікації та авторизації, контроль доступу на рівні
користувачів і модулів, шифрування даних при передачі та збереженні, а
85
також ізоляцію мікрофронтендів для запобігання поширенню атак між
компонентами системи. Ретельно реалізовані механізми моніторингу, аудиту
та логування дій користувачів дозволяють оперативно виявляти підозрілу
активність та запобігати інцидентам безпеки. Для фінансових операцій
інтегровано сертифіковані платіжні шлюзи, що забезпечують відповідність
міжнародним стандартам безпеки і мінімізують ризики компрометації даних
користувачів.
Комплексний підхід до захисту та модульна архітектура системи
дозволяють гарантувати конфіденційність, цілісність та доступність даних,
забезпечують стійкість платформи до зовнішніх і внутрішніх загроз та
дозволяють безпечно масштабувати систему. Оцінка ефективності
розробленої CMS у порівнянні з традиційними платформами показала, що
мікрофронтенд-архітектура забезпечує значні переваги у швидкодії,
динамічності, гнучкості та можливості подальшого розвитку.
Виконана робота підтвердила практичну доцільність використання
мікрофронтенд-архітектури для побудови сучасних розподілених вебсистем,
які потребують високої продуктивності, масштабованості, безпеки та
гнучкості. Розроблена CMS є перспективним рішенням для бізнес-додатків та
платформ з великим обсягом динамічного контенту, інтерактивних функцій
та високими вимогами до безпеки, і може слугувати базою для подальшого
розвитку та впровадження сучасних вебтехнологій у практичні проєкти.
86
ПЕРЕЛІК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ
CMS — Content Management System, система управління контентом
UI — User Interface, користувацький інтерфейс
UX — User Experience, користувацький досвід
API — Application Programming Interface, програмний інтерфейс додатку
JS — JavaScript, мова програмування
HTML — HyperText Markup Language, мова розмітки гіпертексту
CSS — Cascading Style Sheets, каскадні таблиці стилів
RBAC — Role-Based Access Control, контроль доступу на основі ролей
ABAC— Attribute-Based Access Control, контроль доступу на основі атрибутів
SSO — Single Sign-On, єдина автентифікація
JWT — JSON Web Token, токен доступу у форматі JSON
2FA — Two-Factor Authentication, двофакторна автентифікація
CSP — Content Security Policy, політика безпеки контенту
XSS — Cross-Site Scripting, міжсайтовий скриптовий напад
CSRF — Cross-Site Request Forgery, міжсайтовий підробіток запиту
TLS/HTTPS — Transport Layer Security / Hypertext Transfer Protocol Secure,
захищені протоколи передачі даних
MFA — Multi-Factor Authentication, багатофакторна автентифікація
87
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Sam Newman “Building Microservices: Designing Fine Grained Systems.”
Sebastopol, CA: O’Reilly Media, 2015. 278 p.
2. Chris Richardson “Microservices Patterns: With Examples in Java.” New York:
Manning Publications, 2018. 400 p.
3. Rajesh RV “Spring Microservices: Building Scalable Systems with Spring Boot,
Docker and Mesos.” Birmingham: Packt Publishing, 2016. 350 p.
4. Ashley Davis “Bootstrapping Microservices: Building Cloud Native
Applications.” Shelter Island, NY: Manning Publications, 2020. 464 p.
5. Jonas Fritzsch, Justus Bogner, Alfred Zimmermann, Stefan Wagner “From
Monolith to Microservices: A Classification of Refactoring Approaches.” arXiv,
2018. 22 p.
6. Muhammad Waseem, Peng Liang, Mojtaba Shahin, Amleto Di Salle, Gastón
Márquez “Design, Monitoring, and Testing of Microservices Systems: The
Practitioners’ Perspective.” arXiv, 2021. 30 p.
7. Yujing Wang, Darrel Ma “Developing a Process in Architecting Microservice
Infrastructure with Docker, Kubernetes, and Istio.” arXiv, 2019. 18 p.
8. Luca Mezzalira “Building Micro Frontends: Scaling Teams and Projects.” Self
published, 2020. 210 p.
9. Jeffrey Zeldman “Designing with Web Standards.” New Riders, 2009. 368p.
10.Іваненко С. В. “Сучасні веб технології: HTML, CSS, JavaScript.” Київ:
Наукова думка, 2019. 320 с.
11.Петренко О. М. “Розробка веб додатків із застосуванням сучасних
фреймворків.” Львів: Видавництво ЛНУ, 2020. 280 с.
12.Кузьменко В. П. “Архітектура мікросервісів у сучасних програмних
системах.” Харків: ХНУРЕ, 2021. 300 с.
13.Сидоренко А. І., Мельник О. Ю. “Безпека веб додатків: методи та
інструменти.” Київ: КПІ, 2018. 240 с.
14.Шевченко П. М. “Проєктування інтерфейсів користувача та UX дизайн.”
Львів: Видавництво ЛНУ, 2019. 200 с.
88
15.Бондаренко В. О. “Програмування на JavaScript: від основ до практики.”
Київ: Наукова думка, 2020. 350 с.
16.Гнатюк О. С. “CSS та сучасні методи стилізації веб додатків.” Чернівці:
Букрек, 2019. 220 с.
17.Alex Banks, Eve Porcello “Learning React: Functional Web Development with
React and Redux.” O’Reilly Media, 2017. 350 p.
18.Fernando Monteiro “Learning Single Page Web Application Development.”
University Lecture Notes, 2014. 112 p.
19.Martin Fowler “Refactoring: Improving the Design of Existing Code.” Boston:
Addison Wesley, 2018. 456 p.
20.Robert C. Martin “Clean Architecture: A Craftsman’s Guide to Software
Structure and Design.” Prentice Hall, 2017. 432 p.
21.Martin Kleppmann “Designing Data Intensive Applications: The Big Ideas
Behind Reliable, Scalable, and Maintainable Systems.” Sebastopol, CA:
O’Reilly Media, 2017. 616 p.
22.Addy Osmani “Learning JavaScript Design Patterns.” O’Reilly Media, 2012.
254 p.
23.Marijn Haverbeke “Eloquent JavaScript: A Modern Introduction to
Programming.” No Starch Press, 2018. 472 p.
24.Kent Beck “Test Driven Development: By Example.” Addison Wesley, 2003.
240 p.
25.Eric Evans “Domain Driven Design: Tackling Complexity in the Heart of
Software.” Addison Wesley, 2003. 560 p.
26.Планування експериментальних досліджень у науковій діяльності:
методологічні основи та практичні основи / К. В. Петров // Традиційні та
інноваційні підходи до наукових досліджень: збірник наукових праць IX
Міжнародної наукової конференції, м. Ужгород, 4 липня 2025р.
Міжнародний центр наукових досліджень. Вінниця: ТОВ «УКРЛОГОС
Груп, 2025. С. 138-139.
ДОДАТОК А
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
к.т.н., доцент Артем ЛАВДАНСЬКИЙ
__________________
“___” _____________ 2025р.
Проєктування мікрофронтенд-архітектури для побудови розподілених
вебсистем
Специфікація
482.ЧДТУ.52403-01
Листів 2
Розробник _______________ Костянтин ПЕТРОВ
Керівник _______________ Ольга НЕЧИПОРЕНКО
Черкаси 2025
2
482.ЧДТУ.52403-01
Позначення Найменування Примітка
Документація
482.ЧДТУ.52403-01 12 01 Текст програми
482.ЧДТУ.52403-01 34 01 Інструкція користувача
ДОДАТОК Б
Проєктування мікрофронтенд-архітектури для побудови розподілених
вебсистем
Текс програми
482.ЧДТУ.52403-01 12 01
Листів 16
Розробник _______________ Костянтин ПЕТРОВ
Черкаси 2025
2
482.ЧДТУ.52403-01 12 01
import { registerApplication, start, navigateToUrl } from 'single-spa';
// Global app state
window.appState = {
user: null,
isAuthenticated: false,
route: '/',
comments: [],
products: []
};
// Shared functions
window.navigateTo = (path) => {
window.appState.route = path;
updateActiveModule(path);
navigateToUrl(path);
};
window.handleAuthClick = () => {
if (window.appState.isAuthenticated) {
logout();
} else {
navigateTo('/login');
}
};
window.setUser = (user) => {
window.appState.user = user;
window.appState.isAuthenticated = true;
updateUserInfo();
};
window.logout = () => {
window.appState.user = null;
window.appState.isAuthenticated = false;
localStorage.removeItem('userToken');
updateUserInfo();
navigateTo('/');
};
function updateUserInfo() {
const userInfo = document.getElementById('user-info');
if (window.appState.user) {
3
482.ЧДТУ.52403-01 12 01
userInfo.textContent = `Welcome, ${window.appState.user.username}`;
} else {
userInfo.textContent = '';
}
updateAuthButton();
}
function updateAuthButton() {
const btn = document.getElementById('auth-btn');
btn.textContent = window.appState.isAuthenticated ? 'Logout' : 'Login';
}
function updateActiveModule(path) {
const newsDiv = document.getElementById('news');
const productsDiv = document.getElementById('products');
const pagesDiv = document.getElementById('pages');
newsDiv.style.display = 'none';
productsDiv.style.display = 'none';
pagesDiv.style.display = 'none';
if (path.includes('news')) {
newsDiv.style.display = 'block';
} else if (path.includes('products')) {
productsDiv.style.display = 'block';
} else if (path.includes('about') || path.includes('login') || path.includes('register') ||
path === '/') {
pagesDiv.style.display = 'block';
}
}
// Register applications
registerApplication({
name: '@microfrontend/news',
app: () => System.import('@microfrontend/news'),
activeWhen: '/news',
customProps: {
domElement: document.getElementById('news'),
api: window.appState
}
});
registerApplication({
4
482.ЧДТУ.52403-01 12 01
name: '@microfrontend/products',
app: () => System.import('@microfrontend/products'),
activeWhen: '/products',
customProps: {
domElement: document.getElementById('products'),
api: window.appState
}
});
registerApplication({
name: '@microfrontend/pages',
app: () => System.import('@microfrontend/pages'),
activeWhen: ['/about', '/login', '/register', '/'],
customProps: {
domElement: document.getElementById('pages'),
api: window.appState
}
});
start();
updateUserInfo();
import React from 'react';
import ReactDOM from 'react-dom/client';
import singleSpaReact from 'single-spa-react';
import App from './App';
const lifecycles = singleSpaReact({
React,
ReactDOM,
rootComponent: App,
errorBoundary(error, info, props) {
return (
<div>
<h1>Error in News Module</h1>
<p>{error.message}</p>
</div>
);
}
});
export const { bootstrap, mount, unmount } = lifecycles;
5
482.ЧДТУ.52403-01 12 01
import React, { useState, useEffect } from 'react';
import NewsArticles from './components/NewsArticles';
import NewsForm from './components/NewsForm';
import CommentsSection from './components/CommentsSection';
import './styles/App.css';
export default function NewsApp(props) {
const [articles, setArticles] = useState([]);
const [selectedArticle, setSelectedArticle] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [page, setPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const [comments, setComments] = useState({});
const apiClient = window.appState?.apiClient;
useEffect(() => {
fetchArticles(page);
}, [page]);
useEffect(() => {
if (selectedArticle) {
fetchComments(selectedArticle.id);
}
}, [selectedArticle]);
const fetchArticles = async (pageNum) => {
setLoading(true);
setError(null);
try {
const response = await apiClient.getNews(pageNum, 5);
setArticles(response.data);
setTotalPages(response.pagination.pages);
} catch (err) {
setError(err.message || 'Failed to fetch articles');
console.error('Error fetching articles:', err);
} finally {
setLoading(false);
}
};
const fetchComments = async (articleId) => {
6
482.ЧДТУ.52403-01 12 01
try {
const articleComments = await apiClient.getArticleComments(articleId);
setComments(prev => ({
...prev,
[articleId]: articleComments
}));
} catch (err) {
console.error('Error fetching comments:', err);
}
};
const handleAddArticle = async (newArticle) => {
try {
const response = await apiClient.createNews(
newArticle.title,
newArticle.content,
newArticle.category
);
setArticles([response, ...articles]);
setError(null);
} catch (err) {
setError(err.message || 'Failed to create article');
console.error('Error creating article:', err);
}
};
const handleDeleteArticle = async (articleId) => {
if (!window.confirm('Are you sure you want to delete this article?')) return;
try {
await apiClient.deleteNews(articleId);
setArticles(articles.filter(a => a._id !== articleId));
if (selectedArticle?._id === articleId) {
setSelectedArticle(null);
}
setError(null);
} catch (err) {
setError(err.message || 'Failed to delete article');
console.error('Error deleting article:', err);
}
};
const handleAddComment = async (articleId, commentText) => {
7
482.ЧДТУ.52403-01 12 01
try {
const response = await apiClient.createComment(commentText, articleId);
setComments(prev => ({
...prev,
[articleId]: [...(prev[articleId] || []), response]
}));
setError(null);
} catch (err) {
setError(err.message || 'Failed to add comment');
console.error('Error adding comment:', err);
}
};
const handleDeleteComment = async (commentId, articleId) => {
if (!window.confirm('Are you sure you want to delete this comment?')) return;
try {
await apiClient.deleteComment(commentId);
setComments(prev => ({
...prev,
[articleId]: prev[articleId].filter(c => c._id !== commentId)
}));
setError(null);
} catch (err) {
setError(err.message || 'Failed to delete comment');
console.error('Error deleting comment:', err);
}
};
return (
<div cl��assName="news-container">
<h1> News Module</h1>
{error && <div className="error-message">{error}</div>}
{window.appState?.isAuthenticated && (
<NewsForm onSubmit={handleAddArticle} />
)}
{loading ? (
<div className="loading">Loading news...</div>
) : (
<>
8
482.ЧДТУ.52403-01 12 01
<NewsArticles
articles={articles}
onSelectArticle={setSelectedArticle}
onDeleteArticle={handleDeleteArticle}
currentUserId={window.appState?.user?.id}
/>
<div className="pagination">
<button
onClick={() => setPage(p => Math.max(1, p - 1))}
disabled={page === 1}
>
Previous
</button>
<span>Page {page} of {totalPages}</span>
<button
onClick={() => setPage(p => Math.min(totalPages, p + 1))}
disabled={page === totalPages}
>
Next
</button>
</div>
{selectedArticle && (
<div className="article-detail">
<button className="close-btn" onClick={() =>
setSelectedArticle(null)}>
✕ Close
</button>
<h2>{selectedArticle.title}</h2>
<p className="article-meta">
By {selectedArticle.author?.username || 'Unknown'} •{' '}
{new Date(selectedArticle.createdAt).toLocaleDateString()} •{' '}
{selectedArticle.views} views
</p>
<p>{selectedArticle.content}</p>
{window.appState?.user?.id === selectedArticle.author?._id && (
<button
className="btn-delete"
onClick={() => handleDeleteArticle(selectedArticle._id)}
>
Delete Article
9
482.ЧДТУ.52403-01 12 01
</button>
)}
<CommentsSection
articleId={selectedArticle._id}
comments={comments[selectedArticle._id] || []}
onAddComment={(text) => handleAddComment(selectedArticle._id,
text)}
onDeleteComment={(commentId) =>
handleDeleteComment(commentId, selectedArticle._id)
}
currentUserId={window.appState?.user?.id}
/>
</div>
)}
</>
)}
</div>
);
}
import React from 'react';
export default function NewsArticles({
articles,
onSelectArticle,
onDeleteArticle,
currentUserId
}) {
return (
<div className="articles-list">
<h2>Latest News</h2>
{articles.length === 0 ? (
<p className="no-items">No articles available</p>
) : (
articles.map(article => (
<article
key={article._id}
className="article-card"
>
<div onClick={() => onSelectArticle(article)}>
<h3>{article.title}</h3>
<p className="article-summary">
10
482.ЧДТУ.52403-01 12 01
{article.content.substring(0, 100)}...
</p>
<footer>
<small>By {article.author?.username || 'Unknown'}</small>
<small>{new Date(article.createdAt).toLocaleDateString()}</small>
<small>{article.views} views</small>
</footer>
</div>
{currentUserId === article.author?._id && (
<button
className="btn-delete-small"
onClick={() => onDeleteArticle(article._id)}
title="Delete article"
>��️
</button>
)}
</article>
))
)}
</div>
);
}
import React, { useState } from 'react';
export default function NewsForm({ onSubmit }) {
const [formData, setFormData] = useState({
title: '',
content: '',
category: 'General'
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
11
482.ЧДТУ.52403-01 12 01
const handleSubmit = async (e) => {
e.preventDefault();
if (!formData.title.trim() || !formData.content.trim()) {
setError('Title and content are required');
return;
}
setLoading(true);
setError(null);
try {
await onSubmit(formData);
setFormData({
title: '',
content: '',
category: 'General'
});
} catch (err) {
setError(err.message || 'Failed to submit article');
} finally {
setLoading(false);
}
};
return (
<form className="news-form" onSubmit={handleSubmit}>
<h3>Create New Article</h3>
{error && <div className="error-message-small">{error}</div>}
<div className="form-group">
<label>Title:</label>
<input
type="text"
name="title"
value={formData.title}
onChange={handleChange}
placeholder="Enter article title..."
required
/>
</div>
12
482.ЧДТУ.52403-01 12 01
<div className="form-group">
<label>Category:</label>
<select
name="category"
value={formData.category}
onChange={handleChange}
>
<option>General</option>
<option>Technology</option>
<option>Business</option>
<option>Sports</option>
<option>Entertainment</option>
</select>
</div>
<div className="form-group">
<label>Content:</label>
<textarea
name="content"
value={formData.content}
onChange={handleChange}
placeholder="Enter article content..."
rows="5"
required
/>
</div>
<button type="submit" className="btn-submit" disabled={loading}>
{loading ? 'Publishing...' : 'Publish Article'}
</button>
</form>
);
}
import ProductCard from './components/ProductCard.vue';
import ProductDetail from './components/ProductDetail.vue';
export default {
name: 'ProductsApp',
components: {
ProductCard,
ProductDetail
},
13
482.ЧДТУ.52403-01 12 01
data() {
return {
products: [],
selectedProduct: null,
loading: false,
error: null,
searchQuery: '',
selectedCategory: '',
sortBy: 'name',
currentPage: 1,
pageSize: 12,
totalProducts: 0,
productComments: {},
newProduct: {
name: '',
price: 0,
description: '',
category: '',
stock: 0
}
};
},
computed: {
isAuthenticated() {
return window.appState?.isAuthenticated || false;
},
currentUserId() {
return window.appState?.user?.id;
},
totalPages() {
return Math.ceil(this.totalProducts / this.pageSize);
},
filteredProducts() {
return this.products;
}
},
watch: {
searchQuery() {
this.currentPage = 1;
this.fetchProducts();
},
selectedCategory() {
14
482.ЧДТУ.52403-01 12 01
this.currentPage = 1;
this.fetchProducts();
},
sortBy() {
this.sortProducts();
}
},
mounted() {
this.fetchProducts();
},
methods: {
async fetchProducts() {
this.loading = true;
this.error = null;
try {
const apiClient = window.appState?.apiClient;
const response = await apiClient.getProducts(
this.currentPage,
this.pageSize,
this.selectedCategory,
this.searchQuery
);
this.products = response.data;
this.totalProducts = response.pagination.total;
} catch (err) {
this.error = err.message || 'Failed to fetch products';
console.error('Error fetching products:', err);
} finally {
this.loading = false;
}
},
sortProducts() {
const sorted = [...this.products];
if (this.sortBy === 'price-asc') {
sorted.sort((a, b) => a.price - b.price);
} else if (this.sortBy === 'price-desc') {
sorted.sort((a, b) => b.price - a.price);
} else if (this.sortBy === 'name') {
sorted.sort((a, b) => a.name.localeCompare(b.name));
15
482.ЧДТУ.52403-01 12 01
} else if (this.sortBy === 'date') {
sorted.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
}
this.products = sorted;
},
async addProduct() {
if (
!this.newProduct.name ||
!this.newProduct.price ||
!this.newProduct.description ||
!this.newProduct.category
) {
this.error = 'All fields are required';
return;
}
this.loading = true;
this.error = null;
try {
const apiClient = window.appState?.apiClient;
await apiClient.createProduct(
this.newProduct.name,
this.newProduct.price,
this.newProduct.description,
this.newProduct.category,
this.newProduct.stock
);
// Reset form
this.newProduct = {
name: '',
price: 0,
description: '',
category: '',
stock: 0
};
// Refresh products
this.currentPage = 1;
await this.fetchProducts();
16
482.ЧДТУ.52403-01 12 01
} catch (err) {
this.error = err.message || 'Failed to create product';
console.error('Error creating product:', err);
} finally {
this.loading = false;
}
}
ДОДАТОК В
Проєктування мікрофронтенд-архітектури для побудови розподілених
вебсистем
Інструкція користувача
482.ЧДТУ.52403-01 34 01
Листів 5
Розробник _______________ Костянтин ПЕТРОВ
Черкаси 2025
2
482.ЧДТУ.52403-01 34 01
Адміністратор системи для початку роботи повинен забезпечити
підготовку серверної інфраструктури та встановлення необхідного
програмного забезпечення. Сервер повинен мати сучасну операційну систему,
бажано Linux, наприклад Ubuntu 22.04 LTS, стабільне підключення до
Інтернету та достатні ресурси для роботи системи, включаючи мінімум 4 ГБ
оперативної пам’яті, сучасний процесор і достатньо дискового простору для
бази даних, кешу та логів. Після підготовки серверу адміністратор встановлює
Node.js, який необхідний для запуску backend-сервісів, а також системи
управління процесами, наприклад PM2 або Docker, що дозволяє контролювати
роботу серверних та фронтенд-компонентів у режимі реального часу.
Після встановлення середовища адміністратор копіює на сервер файли
системи, включаючи backend та три мікрофронтенди, кожен з яких є окремим
JavaScript-додатком. Для backend необхідно налаштувати підключення до бази
даних, вказавши адресу сервера бази даних, порт, облікові дані та параметри
безпеки. Також необхідно перевірити, щоб усі залежності були встановлені
коректно через npm або yarn, залежно від використовуваного менеджера
пакетів. Для мікрофронтендів адміністратор встановлює необхідні пакети та
збирає кожен додаток окремо, використовуючи стандартні інструменти
зборки для React та Vue.js, що дозволяє підготувати готові до запуску файли
та ресурси.
Після підготовки і збірки системи адміністратор запускає backend та
кожен мікрофронтенд через PM2 або Docker-контейнери. Це дозволяє
забезпечити безперервну роботу сервісів, автоматичний рестарт у разі
помилок та моніторинг завантаження ресурсів. Для перевірки коректності
роботи системи адміністратор повинен переконатися, що backend відповідає
на запити через API, а всі три мікрофронтенди успішно завантажуються і
відображаються у браузері, інтегруючись через single spa у єдиний інтерфейс.
3
482.ЧДТУ.52403-01 34 01
Також перевіряється правильність роботи спільного сховища даних та
кешування між модулями.
Після запуску системи адміністратор налаштовує параметри платформи.
Це включає створення облікових записів користувачів, розподіл ролей і прав
доступу, налаштування інтеграцій з платіжними сервісами та іншими
зовнішніми системами, а також параметри сповіщень для користувачів і
адміністраторів. Важливо перевірити безпеку підключення, увімкнувши
HTTPS і налаштувавши SSL-сертифікати, щоб дані користувачів і фінансова
інформація передавалися зашифрованими каналами. Адміністратор також
налаштовує логування дій користувачів і адміністративних операцій для
подальшого аудиту та контролю безпеки.
Додатково адміністратор може проводити тестування продуктивності
та моніторинг ресурсів системи. Це включає перевірку часу завантаження
модулів, швидкості обробки запитів backend, коректності роботи кешу та
спільного сховища даних. При виявленні проблем адміністратор вносить
необхідні зміни у конфігурацію серверу або параметри запуску процесів, щоб
забезпечити оптимальну роботу платформи під навантаженням. Регулярне
оновлення компонентів системи та залежностей дозволяє підтримувати її
стабільність, підвищувати продуктивність та забезпечувати захист від відомих
вразливостей.
Таким чином, процедура розгортання та налаштування системи включає
підготовку серверного середовища, встановлення Node.js та менеджера
процесів, копіювання і збірку backend та мікрофронтендів, запуск усіх
компонентів із моніторингом, налаштування безпеки, прав доступу та
інтеграцій, а також регулярну перевірку продуктивності та стабільності.
Дотримання цих кроків дозволяє адміністратору забезпечити безперебійну і
безпечну роботу системи для кінцевих користувачів та підтримувати
платформу на сучасному рівні.
4
482.ЧДТУ.52403-01 34 01
Після початкового запуску системи адміністратор має налаштувати
додаткові параметри серверного середовища, які забезпечують стабільну і
безпечну роботу платформи. До них входить налаштування системи
кешування на сервері, що дозволяє прискорити завантаження даних для
користувачів і зменшити навантаження на backend. Для цього можуть
використовуватися Redis або інші інструменти для кешування API-запитів та
спільного сховища даних мікрофронтендів. Адміністратор також контролює
використання ресурсів сервера, включаючи процесор, оперативну пам’ять та
дисковий простір, щоб уникнути перевантаження та забезпечити швидкодію
системи навіть при великій кількості одночасних користувачів.
Особливу увагу слід приділити системі логування та моніторингу.
Адміністратор налаштовує збір логів з backend та мікрофронтендів для аналізу
помилок і продуктивності. Логи можуть зберігатися на сервері або
відправлятися на окремий моніторинговий сервіс, де адміністратор може
відслідковувати частоту запитів, помилки сервера, стан процесів і тривалість
завантаження сторінок. Це дозволяє вчасно реагувати на потенційні проблеми,
оптимізувати роботу компонентів і передбачати необхідність масштабування
серверних ресурсів.
Ще однією важливою частиною є налаштування автоматичного
оновлення системи та залежностей. Оскільки платформа використовує сучасні
фреймворки, такі як React і Vue.js, а також Node.js на backend, регулярне
оновлення пакетів через npm або yarn дозволяє підтримувати сумісність,
виправляти відомі уразливості і підвищувати продуктивність. Адміністратор
повинен контролювати сумісність версій мікрофронтендів і backend, щоб
уникнути конфліктів під час оновлення. Для цього рекомендується
створювати тестове середовище або staging-сервер, де можна перевіряти
оновлення перед впровадженням на продакшн.
5
482.ЧДТУ.52403-01 34 01
Важливою частиною обслуговування системи є організація резервного
копіювання. Адміністратор налаштовує регулярне створення бекапів бази
даних, конфігураційних файлів і кешованих даних, що дозволяє відновити
систему у разі збоїв, помилок або атак. Резервні копії можуть зберігатися
локально на сервері, на зовнішніх носіях або у хмарних сервісах, що
забезпечує додатковий рівень безпеки і зменшує ризик втрати важливої
інформації.
Крім того, адміністратор відповідає за налаштування системи безпеки
на сервері, включаючи захист від несанкціонованого доступу, обмеження IP-
адрес, налаштування firewall, регулярне оновлення системних пакетів і
антивірусного програмного забезпечення. Також необхідно контролювати
доступ до серверу через SSH, створювати окремі облікові записи для
адміністраторів і обмежувати права користувачів, щоб запобігти випадковому
або навмисному пошкодженню системи.
Для зручності адміністратор може налаштувати автоматичний деплой
нових версій мікрофронтендів та backend за допомогою CI/CD інструментів,
таких як GitHub Actions, GitLab CI/CD або Jenkins. Це дозволяє швидко
впроваджувати зміни, мінімізувати простої і забезпечувати безперервну
інтеграцію та доставку оновлень. Кожен мікрофронтенд може мати власний
pipeline, що дозволяє оновлювати модулі незалежно, не впливаючи на роботу
інших компонентів системи.