Тёмный

Павел Черторогов - Революция в микрофронтендах, module federation, Webpack 5 

HolyJS
Подписаться 30 тыс.
Просмотров 24 тыс.
50% 1

Ближайшая конференция - 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 проделали титаническую работу, чтобы предложить достойный стандарт для микрофронтендов.

Опубликовано:

 

1 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 30   
@GraxS
@GraxS 3 года назад
02:25 Cringe warning
@Lampa303
@Lampa303 3 года назад
Аватарка профиля перестанет каждый раз грузиться при переходе с карт на кредиты в интернет-банках. Ура.
@faizulla5838
@faizulla5838 3 года назад
это оказывается он делает НЕ юзабельные сайты... такой неудобный сайт, просто атас
@oinn6216
@oinn6216 3 года назад
Что вместо Редакса используете? Redux Toolkit использовали?
@pashkes
@pashkes 2 года назад
Очень удобно
@AndreiSoroka
@AndreiSoroka 2 года назад
1:01:10 - для ленивых и у кого с видео ссылки не кликаются: в чем проблема? почему будем думать что вебпак бажнутый?
@petrglinka9398
@petrglinka9398 3 года назад
Дослушал до Redux - это нельзя и сразу добавил +100 к карме Павла
@demimurych1
@demimurych1 3 года назад
24:23 **долгий переход для пользователя** Бога ради простите если я не понял с чего вдруг изменение домена требует повторной загрузки бандлов. Если речь идет о том, что кэширование привязано к имени домена, так во первых кто вас заставляет именно бандлы грузить с разных доменных имен, а во вторых CORS и CacheStorage API никто не отменял, как и тот факт что CacheStorage API доступно в любом контексте, а не только в ServiceWorker ах. То есть даже нет необходимости городить логику вокруг ожидания старта воркера при холодном старте.
@nickolayivanov2848
@nickolayivanov2848 Год назад
Другое приложение - другой бандл
@ДмитрийЕгоров-с5ь
@ДмитрийЕгоров-с5ь 3 года назад
Просто Огонь!!! Спасибо за доклад!
@alexeyku8926
@alexeyku8926 3 года назад
полезная штука, спасибо!
@shahid1508
@shahid1508 3 года назад
А мне нравится, спасибо.
@luresh3968
@luresh3968 3 года назад
Павел, вы не правы, через Single-SPA можно полноценно переиспользовать js библиотеки через webpack externals. SystemJS может полноценно работать в связке с webpack и 4 версии аналогично federals. Можно включить туда веб компоненты и инкапсулировать стили. Лучше попробовать что-то имплементировать, прежде чем рассказывать почитав доки или просто продолжать рассказывать только про GraphQL.
@KostiaBazrov
@KostiaBazrov 3 года назад
А зачем веб компонентс7
@nodkz
@nodkz 3 года назад
Согласен, что можно прикрутить что угодно к чему угодно. Простите, что я не успел докопаться до таких подходов и ввел кого-то в заблуждение. Я всегда стараюсь обтекаемо выражаться, тут видимо меня понесло. Инструмент в котором уже все поженено купил меня с потрохами. В свое время я намучился с разными интеграциями вроде бы простых инструментов, каждый из которых раскуривается за неделю, НО на нормальную интеграцию уходят месяцы. Еще раз спасибо за дельный комментарий! (Можно ли его как-то закрепить наверху?)
@Alina-ee8gs
@Alina-ee8gs 3 года назад
А что не так с lodash?
@codewithdmytro
@codewithdmytro 3 года назад
почти все есть в es6+
@thomasanderson3145
@thomasanderson3145 2 года назад
Многие функции не оптимально написаны
@pashkes
@pashkes 2 года назад
Я вот тоже не понял Если в сборку будут попадать только те функции которые ты импортировал
@b.g.5106
@b.g.5106 3 года назад
Это то случай, когда придумал концепт приложения, а потом оказалось, что у этого есть название Микрофронтенд 😃
@maxsherniy4080
@maxsherniy4080 3 года назад
Не вводите людей в заблуждение, много не точной информации в докладе.
@АртёмАртём-ю4ы
@АртёмАртём-ю4ы 3 года назад
Какой?
@nodkz
@nodkz 3 года назад
Доклад делался человеком, а не роботом. Ошибки просто обязаны быть. Будет здорово, если самые страшные мои огрехи вы поправите. Я попрошу в описание к докладу их добавить. Спасибо!
@drone-plus-plus
@drone-plus-plus 3 года назад
Не вводите людей в заблуждение, много не точной информации в комментарии.
@arkadymagomedov1700
@arkadymagomedov1700 3 года назад
Проблемы большого фронта несколько высосаны из пальца. Похоже просто на проблемы криворуких девопсов и кривого воркфлоу.
@Solange372
@Solange372 3 года назад
Возможно вы не работали в огромных проектах. Монолит это боль. Если речь о простом проекте, конечно это лишнее
@arkadymagomedov1700
@arkadymagomedov1700 3 года назад
@@Solange372 lol, смело. Работал и работаю.
@serebniti
@serebniti 3 года назад
@@arkadymagomedov1700 но никому не скажу для валидации?
@super4prikolist1
@super4prikolist1 Год назад
хрень ты сморозил, наберешься опыта, побываешь в разных командах, на разных проектах , поймешь
Далее
Дикий Бармалей разозлил всех!
01:00
Introducing Module Federation in Webpack 5
10:39
Просмотров 86 тыс.
Vite and Module Federation Makes Micro-Frontends EASY!
27:36
Five Module Federation/Micro-Frontend Mistakes
28:09
Просмотров 48 тыс.
Дикий Бармалей разозлил всех!
01:00