​​Микрофронтенд Заметки по лекции Ketan Agnihotri с саммита п | Hack hack xanum ru

​​Микрофронтенд

Заметки по лекции Ketan Agnihotri с саммита по Реакт, организованного Geekle. Если вдруг не понравится, как hackhackxanum перепела, стоит посетить онлайн саммит в ноябре, чтобы посмотреть оригинальные выступления.

Откуда взялся микрофронтенд? Ранее мы разделяли бекенд, фронтенд так и оставался монолитным, рискуя стать своеобразным «бутылочным горлышком». При релизе нужно полностью собрать приложение, задеплоить все с риском что-то сломать. В монолитном фронтенде одна кодовая база для всех команд, что не всегда удобно.

Для решения проблем монолита была представлена микрофронтенд архитектура. При таком подходе делят не только бек, но и фронт, так что все приложение делится на несколько своеобразных микроприложений.

При выборе архитектуры микрофронтенда нужно хорошо понимать границы микроприложений, чтобы они не были связаны друг с другом, соединялись достаточно свободно. В таком случае масштабирование приложения не составит труда. Можно будет взаимодействовать с одним микрофронтенд приложением, не оказывая влияния на другие, вбирать любые технологии. Одно микрофронтенд приложение напишем на React, второе – на Angular, третье на Vue. Такой подход позволяет осуществлять независимый релиз и деплой.

По каким принципам осуществляется деление приложения? Можно поделить его на базе бизнес-домена, на сабдомены, или по технологиям (например, если нужно постепенно мигрировать с JQuery на React, не нарушая непрерывную работу приложения). В то же время при продумывании маршрутов постараться, чтобы у пользователя не возникало ощущения, что он использует несколько разных приложений.

Для создания подобных приложений пригодится Single-SPA meta-framework или Frint.js Так же можно использовать iframe, объект Window или разместить разные одностраничные приложения на разных URL.

К недостаткам подобной архитектуры относится в первую очередь сложность в эксплуатации, так что не стоит ее использовать для простых приложений. Увеличивается размер payload, так как некоторые зависимости могут дублироваться, например, если мы используем axios как в Angular, так и в React. Могут различаться версии npm, и окружение.

Архитектура такого рода нуждается в дополнительной инфраструктуре и планировании.

В каких случаях стоит использовать микрофронтенд? При работе с распределенными автономными командами, у которых имеется необходимость в независимых релизах. В случаях, если у команд есть опыт работы с микросервисами. А так же в случаях, когда необходимо взаимодействие разных фреймворков. Конечно, это не значит, что для микрофронтенда нужно ипользовать все фреймворки, которые только успели придумать ))