Архітектура мікрофронтендів: досвід Wix (докладний допис) Шах | Radio Kottans

Архітектура мікрофронтендів: досвід Wix (докладний допис)

Шахар Талмі (Shahar Talmi), голова фронтенд-розробки Wix, розповів про архітектуру мікрофронтендів на прикладі досвіду Wix.com. Цей дуже детальний допис розкриває не тільки тему мікрофронтенд-архітектури, але і багато інших нюансів великого фронтенд-проєкту.

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

Блог Мартіна Фаулера визначає мікрофронтенди так:
Архітектурний стиль, за якого створені незалежно один від одного фронтенд-застосунки компонуються у єдине ціле.

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

Wix являє собою конструктор сайтів, в якому користувач формує сайт для свого бізнесу з окремих компонентів та віджетів. Таким чином готовий сайт складається з невідомих заздалегідь елементів. До підходу мікрофронтендів Wix прийшов ще 2013 року, спираючись на вимоги продукту. Автор допису наголошує, що проблеми, які розв’язує архітектура мікрофронтендів, є типовими для будь-якої системи, що збирається з незалежних під’єднуваних елементів, а не тільки конструкторів сайтів, тому описаний досвід може бути корисний іншим продуктам.

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

https://shahata.medium.com/taking-micro-frontends-to-the-next-level-1a1a91adc476