Написал приложение на React и Vue! Что такое микрофронтенды

Получить профессию Frontend разработчика -

Подробнее узнать об обучении в Result School -

Я в соц сетях:

Мои паблики по JavaScript:

JavaScript cообщества:

Roadmap по каналу:

Что такое микрофронтенды?

В видео расскажу про микросервисную архитектуру но для frontend!

Первая часть видео теоретическая. Во второй части покажу приложение, которое я написал сразу на Vue и React и как я их связал общим стором.

Таймкоды:
00:00 - Введение
00:39 - Что такое микрофронтенды
04:57 - Мое приложение на React & Vue

[VladilenMinin]

Пока готовлю большой проект и много контент на Youtube решил разбавить новым форматом. Как вам?
Лично мне очень нравится учить новое, и если вы оцените, то буду таким делиться чаще)

Так же напишите, какую тему в подобном стиле еще разобрать?

[ВадимТарановский-чс]

Контент несомненно полезный, но сам microFrontend подход напомнил мем где слон + пингвин = пингвин с головой слона)

[artsurkov]

Это не совсем микро-фронтэнд. Это монолит с использованием разных фреймворков. Можно назвать его - ГИБРИД.
Микрофронтэнд - это когда каждый модуль вообще никак не связан с другими модулями, когда они собираются в разных проектах, а подключаются в хост-модуль например с помощью webpack moduleFederation плагина и лучше по какому-нибудь конфигу на лету. Или вообще подключаются непосредственно в html
Ну и еще про стор замечание. Это по функционалу - шина событий. Стор все-таки должен хранить данные.
А в общем спасибо за рассказ.

[chewed]

Классно рассказано, спасибо тебе!
Правда в части общей шины данных не совсем корректно применено к микрофронтендам.
Я сейчас разбираюсь с микрофронтендами углубленно, и суть их в том, что каждый микрофронт должен работать изолировано, только со своим набором данных. Ни один микрофронт не должен реагировать на изменения в другом.
Посыл микрофронтендов заключается в том, что каждую часть приложения разрабатывают разные команды, и по итогу их части приложения - модулями можно грубо назвать, должны легко слиться в одно большое приложение.
Но фишка даже больше не в этом, а в том, чтобы данные для других микрофронтов подгружались лишь тогда и только тогда, когда они нужны, и подгружаться должны только те данные, которые не были подгружены ранее для ранее потребовавшихся микрофронтов. Т.е. общие пакеты или данные не должны подгружаться дважды, например react для каждого микрофронта.
Все это поддерживается в webpack5.

А так, мне понравилась теория о микрофронтендах! :))))

[Денис-вгц]

что за извращения?)
оказывается Владилен знает толк в извращениях))

[alexbro]

класс, сначала загрузим реакт, потом загрузим вью и через кошачью жопу будим их огонь идея, производительность должна расти на глазах :)))

[student]

Круто!! Спасибо! Очень доступно со стором получилось.

[ProoksiusSvaagali]

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

[ГеннадийМалюгин-мр]

Интересно! Всё больше и больше новых идей появляется в разработке)

[jemand-im]

приложение по управлению приложениями с приложениями приложения приложений

[АлександрЛихолетов-ыч]

Классное видео! Я вообще работаю на vue, но всегда было интересно посмотреть в сторону react.

[kowkavn]

При разработке на реакт ты сразу начинаешь страдать изза размера бандла, но придумали же микрофронтенды!! ТЕПЕРЬ можно и реакт библиотеку тянуть и вью, вот бы еще ангуляр подключать тогда приложение точно будет удобно и быстро работать

[jaksystroy]

Красавчик Владилен! Как раз собираюсь разделить react проект на микросервисы. Очень полезным был видео. Спасибо👍

[TheOrteme]

Полезно, спасибо большое) Смотрю твои видео)

[hutoryanin]

Здравствуй Владилен.

Отличная идея, интересный контент. Делай ещё подобный контент.

*Л. а. й. к.*

[irzdjye]

Осталось SSR еще впихуить туда для счастья

[konstantinkuksov]

Отличная тема! Мне бы очень хотелось посмотреть, как оптимально организовать совмещение различных css-библиотек, например, весь проект на Materialize, а вот какой-нибудь слайдер прикрутить с Bootstrap. Еще интересно было бы посмотреть про сессии в Ноде, по работе с куками в бэке и на фронте. Интересна интеграция в проект сторонней аутентификации, через гугл, к примеру. Интересна двухфакторная авторизация, с подтверждением по почте/телефону. Короче, жду))) Удачи тебе во всем!

[Zheka]

Владилен, в какой-то момент видоса я вдруг осознал, что полностью понял программирование. Все твои объяснения и весь код стал кристально ясным и понятным. По сути, программирование - это действительно своего рода общение;)
Спасибо Вам, дорогой друг

[kardashevr]

Мне кажется, не совсем корректно описано. Микрофронтенды живут на своих собственных хостах и могут быть загружены в другие приложения лениво. Для этого используют ModuleFederation из Webpack 5. В конфиг заранее прописывают какие модули (микрофронтенды) могут быть запущены.

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

[AlekseyMyasnikov-uqob]

У меня лет 5 назад был SPA-проект на bootstrap+jQuery, в котором реализована идея плагинизации: сервер отдает список подключенных (оплаченных пользователем) фич-микросервисов, фронт читает этот список и загружает соответствующие js-файлы через "добавить в head тег <script src=.../>"), которые "находят" себе место на SPA. Когда визуально компоненты можно разнести - это (как выше отмечалось) можно сделать и на iframe'ах. А вот когда в едином SPA что-то дорисовывается или меняет логику - это квест. К сожалению, с переходом на React пришлось "потерять" эту крутейшую штуку и прийти к фронту-монолиту. В итоге, даже если пользователь не оплатил какую-то фичу, по факту при загрузке страницы эта фича ему грузится (но не работает) - такое себе решение. Но уход от вермишели кода на jquery к компонентам на React в целом многократно прибавил надежности