Павел Черторогов - Революция в микрофронтендах, module federation, Webpack 5
HTML-код
- Опубликовано: 25 авг 2024
- Ближайшая конференция - HolyJS 2024 Autumn, 7 ноября (online), 14-15 ноября (Санкт-Петербург + трансляция).
Подробности и билеты: jrg.su/K18Cxd
- -
У вас тяжелый фронтенд и много разработчиков работает над ним? Сборка новой версии, время деплоя, прогона интеграционных тестов занимает много часов? Частенько возникают вопросы о том, по чьей вине что-то упало в рантайме?
В мире бэкенда давно уже воспользовались принципом «разделяй и властвуй», и распилили свои монолиты на микросервисы (SOA). Провели разделение ответственности, определили владельцев кода, инкапсулировали знания предметной области, сократили время обучения новых сотрудников, ускорили время тестирования и настроили независимые деплои.
Последние 5 лет в мире SPA об этом деле не раз задумывались большие компании. В интернете можно найти сотни статей и видео про реализацию микрофронтендов. Но достойного стандарта в индустрии так и не сформировалось. Кто-то пилит «дорогие» in-house решения, кто-то мучается с дублирующимися библиотеками и модальными окнами в zoid, кто-то костылит подгрузку ассетов в single-spa (CSS, fonts, images).
Но Павел нашел рыбу своей мечты - это module federation в Webpack 5. Оно позволяет заимпортировать любой внешний модуль/компонент с внешнего сервера, где задеплоено другое приложение, собранное Webpack'ом 5. Всё просто, прям как во времена jQuery - подтянули плагин с CDN, вставили на страницу и всё заработало.
Павел расскажет и покажет, как работает module federation в Webpack 5. Расскажет про то, как Zack Jackson и Tobias Koppers проделали титаническую работу, чтобы предложить достойный стандарт для микрофронтендов.
Просто Огонь!!! Спасибо за доклад!
полезная штука, спасибо!
А мне нравится, спасибо.
Аватарка профиля перестанет каждый раз грузиться при переходе с карт на кредиты в интернет-банках. Ура.
Что вместо Редакса используете? Redux Toolkit использовали?
Очень удобно
это оказывается он делает НЕ юзабельные сайты... такой неудобный сайт, просто атас
1:01:10 - для ленивых и у кого с видео ссылки не кликаются: в чем проблема? почему будем думать что вебпак бажнутый?
Дослушал до Redux - это нельзя и сразу добавил +100 к карме Павла
24:23 **долгий переход для пользователя**
Бога ради простите если я не понял с чего вдруг изменение домена требует повторной загрузки бандлов.
Если речь идет о том, что кэширование привязано к имени домена, так во первых кто вас заставляет именно бандлы грузить с разных доменных имен, а во вторых CORS и CacheStorage API никто не отменял, как и тот факт что CacheStorage API доступно в любом контексте, а не только в ServiceWorker ах. То есть даже нет необходимости городить логику вокруг ожидания старта воркера при холодном старте.
Другое приложение - другой бандл
Павел, вы не правы, через Single-SPA можно полноценно переиспользовать js библиотеки через webpack externals. SystemJS может полноценно работать в связке с webpack и 4 версии аналогично federals. Можно включить туда веб компоненты и инкапсулировать стили. Лучше попробовать что-то имплементировать, прежде чем рассказывать почитав доки или просто продолжать рассказывать только про GraphQL.
А зачем веб компонентс7
Согласен, что можно прикрутить что угодно к чему угодно. Простите, что я не успел докопаться до таких подходов и ввел кого-то в заблуждение. Я всегда стараюсь обтекаемо выражаться, тут видимо меня понесло. Инструмент в котором уже все поженено купил меня с потрохами. В свое время я намучился с разными интеграциями вроде бы простых инструментов, каждый из которых раскуривается за неделю, НО на нормальную интеграцию уходят месяцы.
Еще раз спасибо за дельный комментарий! (Можно ли его как-то закрепить наверху?)
02:25 Cringe warning
А что не так с lodash?
почти все есть в es6+
Многие функции не оптимально написаны
Я вот тоже не понял
Если в сборку будут попадать только те функции которые ты импортировал
Это то случай, когда придумал концепт приложения, а потом оказалось, что у этого есть название Микрофронтенд 😃
Не вводите людей в заблуждение, много не точной информации в докладе.
Какой?
Доклад делался человеком, а не роботом. Ошибки просто обязаны быть. Будет здорово, если самые страшные мои огрехи вы поправите. Я попрошу в описание к докладу их добавить. Спасибо!
Не вводите людей в заблуждение, много не точной информации в комментарии.
Проблемы большого фронта несколько высосаны из пальца. Похоже просто на проблемы криворуких девопсов и кривого воркфлоу.
Возможно вы не работали в огромных проектах. Монолит это боль. Если речь о простом проекте, конечно это лишнее
@@Solange372 lol, смело. Работал и работаю.
@@arkadymagomedov1700 но никому не скажу для валидации?
хрень ты сморозил, наберешься опыта, побываешь в разных командах, на разных проектах , поймешь