#микрофронтенды — Public Fediverse posts

Build-time микрофронтенды, или делай проще

Привет, меня зовут Александр Богданов, я ведущий фронтенд-разработчик стрима «Программы лояльности» в MWS. Наша команда отвечает за развитие и поддержку продуктов МТС Premium и МТС Cashback. На 2025 год у нас было три активных пользовательских витрины, которые использовали разный стек, разные дизайн-системы, по-разному взаимодействовали с бэкенд-сервисами и имели еще целый набор мелких отличий. Из-за этого разработке приходилось поддерживать зоопарк решений и технологий, а также многократно повторять одни и те же действия на разных стеках. Высокие time-to-market и стоимость разработки одной фичи закономерно не устраивали бизнес, поэтому перед нами поставили задачу — перейти на архитектуру микрофронтендов. В посте расскажу, как мы это сделали с помощью npm-пакетов и какие результаты получили. Читать дальше

https://habr.com/ru/companies/ru_mts/articles/1034374/

#микрофронтенд #микрофронты #микрофронтенды #npmпакет #npmпакеты #виджеты #buildtime #buildtime_микрофронтенды #пользовательские_витрины

JavaScript без мифов: синтаксический сахар, карьера и рынок — интервью с Дмитрием Колотильщиковым

JavaScript — редкий язык, который одновременно является «родным» для браузера и при этом давно вышел за пределы фронтенда: на нём пишут бэкенд, десктопные приложения, мобильные клиенты и даже игры. При этом вокруг JS всё ещё много путаницы — от «Java и JavaScript это одно и то же» до «фронтенд = кнопочки». В этом интервью я, Александр Шулепов (телеграм-канал Shulepov Code ), поговорил с Дмитрием Колотильщиковым — старшим разработчиком и автором канала « ИТ‑интроверт » — о том, как войти в профессию, почему Angular новичкам может навредить, зачем фронтендеру микрофронтенды, как устроены зарплаты и рынок за пределами России, и что на самом деле помогает дорасти до сеньора.

https://habr.com/ru/articles/1012410/

#javascript #фронтенд #разработка #angular #микрофронтенды #интервью #react #typescript #карьера_итспециалиста

Tailwind CSS v4 против MUI, Ant Design и Styled Components: архитектурный разбор

В 2026 году выбор инструмента для стилизации — это не вопрос вкуса, а вопрос архитектуры. Мы разберём, где Tailwind CSS v4 выигрывает у признанных лидеров: компонентных библиотек (MUI, Ant Design) и CSS-in-JS решений (Styled Components).

https://habr.com/ru/articles/1006248/

#Tailwind_CSS #CSS #Frontend #Design_System #React #Styled_Components #Верстка #Архитектура #Микрофронтенды #Figma

Module Federation на примере фишинга

Разберём микрофронтенд через историю вымышленного хакера — и заодно поймём, почему это спрашивают на собеседованиях. Недавно на собесе меня спросили: "А как именно работают микрофронты? Там что, прямо eval используют?" Я что-то промямлил про expose, host, сборку... и понял, что вообще не понимаю сути. Знакомо?

https://habr.com/ru/articles/979242/

#microfrontends #микрофронтенды #вебпак #webpack #module_federation

Module Federation на примере фишинга

Разберём микрофронтенд через историю вымышленного хакера — и заодно поймём, почему это спрашивают на собеседованиях. Недавно на собесе меня спросили: "А как именно работают микрофронты? Там что, прямо eval используют?" Я что-то промямлил про expose, host, сборку... и понял, что вообще не понимаю сути. Знакомо?

https://habr.com/ru/articles/979242/

#microfrontends #микрофронтенды #вебпак #webpack #module_federation

Module Federation на примере фишинга

Разберём микрофронтенд через историю вымышленного хакера — и заодно поймём, почему это спрашивают на собеседованиях. Недавно на собесе меня спросили: "А как именно работают микрофронты? Там что, прямо eval используют?" Я что-то промямлил про expose, host, сборку... и понял, что вообще не понимаю сути. Знакомо?

https://habr.com/ru/articles/979242/

#microfrontends #микрофронтенды #вебпак #webpack #module_federation

Module Federation на примере фишинга

Разберём микрофронтенд через историю вымышленного хакера — и заодно поймём, почему это спрашивают на собеседованиях. Недавно на собесе меня спросили: "А как именно работают микрофронты? Там что, прямо eval используют?" Я что-то промямлил про expose, host, сборку... и понял, что вообще не понимаю сути. Знакомо?

https://habr.com/ru/articles/979242/

#microfrontends #микрофронтенды #вебпак #webpack #module_federation

Микрофронтенды: прихоть разработчиков или реальная польза для бизнеса

История о том, как наша команда смогла ускорить релизы, снизить затраты и построить масштабируемую архитектуру без хаоса. В статье вы узнаете, подходят ли вам микрофронтенды.

https://habr.com/ru/articles/968994/

#frontend #microfrontends #architecture #javascript #reactjs #фронтенд #микрофронтенды #монолит #архитектура

Как просто использовать SRI, когда у тебя микрофронты

И чтобы всё было безопасно.

https://habr.com/ru/companies/alfa/articles/940324/

#cdn #infra #microfrontends #микрофронтенды #module_federation

Как просто использовать SRI, когда у тебя микрофронты

И чтобы всё было безопасно.

https://habr.com/ru/companies/alfa/articles/940324/

#cdn #infra #microfrontends #микрофронтенды #module_federation

Как просто использовать SRI, когда у тебя микрофронты

И чтобы всё было безопасно.

https://habr.com/ru/companies/alfa/articles/940324/

#cdn #infra #microfrontends #микрофронтенды #module_federation

Как просто использовать SRI, когда у тебя микрофронты

И чтобы всё было безопасно.

https://habr.com/ru/companies/alfa/articles/940324/

#cdn #infra #microfrontends #микрофронтенды #module_federation

У программиста три пути: шина, монолит и выйти из АйТи

Великий аргентинский писатель Хорхе Луис Борхес в одном из своих произведений попытался доказать, что вся мировая литература сводится к четырем базовым сюжетам: история об осаде и защите обречённого города, история о возвращении, история о поиске и история о жертвоприношении или самоубийстве бога. В комментарий к этому заявлению Виктор Пелевин в одном из своих романов написал: "А по-моему, сюжетов всего два. Первый – как человека убивают из-за денег. Второй – как человека приносят в жертву. А на самом деле оба сюжета можно даже объединить в один". Как бы то ни было, оставим этот спор о сюжетах литературоведам. В этом же посте я хочу разобрать схожий тезис - все архитектуры разных видов программного обеспечения можно свести к двум базовым структурам - монолиту и шине.

https://habr.com/ru/articles/945572/

#архитектура #шина #монолит #микросервисы #микрофронтенды

Как мы распилили монолит на микрофронтенды с Vite и не сошли с ума

Наш фронтенд начинался как простой SPA на React, собранный с помощью Vite — типичный монолит с несколькими страницами. Со временем проект оброс новыми функциями и интеграциями и начал становиться всё сложнее в поддержке. На горизонте появились новые вызовы: к продукту планировалось подключать всё больше независимых сервисов, а значит — ещё больше интеграций и роста кодовой базы. Мы понимали, что нагрузка на инфраструктуру будет только увеличиваться, поэтому решили заранее заложить архитектуру с расчётом на масштабирование. После изучения разных вариантов мы остановились на подходе микрофронтендов. Хотелось разграничить зоны ответственности между командами и ускорить разработку, не теряя гибкости. В качестве сборщика решили остаться на Vite — он быстро развивался, предлагал отличную DX и поддержку модульной федерации через плагин. Кроме того, важно было сохранить единый репозиторий, чтобы упростить CI/CD и управление зависимостями.

https://habr.com/ru/companies/beeline_tech/articles/918860/

#микрофронтенды #vite #frontops #module_federation #microfrontends #react

Как мы распилили монолит на микрофронтенды с Vite и не сошли с ума

Наш фронтенд начинался как простой SPA на React, собранный с помощью Vite — типичный монолит с несколькими страницами. Со временем проект оброс новыми функциями и интеграциями и начал становиться всё сложнее в поддержке. На горизонте появились новые вызовы: к продукту планировалось подключать всё больше независимых сервисов, а значит — ещё больше интеграций и роста кодовой базы. Мы понимали, что нагрузка на инфраструктуру будет только увеличиваться, поэтому решили заранее заложить архитектуру с расчётом на масштабирование. После изучения разных вариантов мы остановились на подходе микрофронтендов. Хотелось разграничить зоны ответственности между командами и ускорить разработку, не теряя гибкости. В качестве сборщика решили остаться на Vite — он быстро развивался, предлагал отличную DX и поддержку модульной федерации через плагин. Кроме того, важно было сохранить единый репозиторий, чтобы упростить CI/CD и управление зависимостями.

https://habr.com/ru/companies/beeline_tech/articles/918860/

#микрофронтенды #vite #frontops #module_federation #microfrontends #react

Как мы распилили монолит на микрофронтенды с Vite и не сошли с ума

Наш фронтенд начинался как простой SPA на React, собранный с помощью Vite — типичный монолит с несколькими страницами. Со временем проект оброс новыми функциями и интеграциями и начал становиться всё сложнее в поддержке. На горизонте появились новые вызовы: к продукту планировалось подключать всё больше независимых сервисов, а значит — ещё больше интеграций и роста кодовой базы. Мы понимали, что нагрузка на инфраструктуру будет только увеличиваться, поэтому решили заранее заложить архитектуру с расчётом на масштабирование. После изучения разных вариантов мы остановились на подходе микрофронтендов. Хотелось разграничить зоны ответственности между командами и ускорить разработку, не теряя гибкости. В качестве сборщика решили остаться на Vite — он быстро развивался, предлагал отличную DX и поддержку модульной федерации через плагин. Кроме того, важно было сохранить единый репозиторий, чтобы упростить CI/CD и управление зависимостями.

https://habr.com/ru/companies/beeline_tech/articles/918860/

#микрофронтенды #vite #frontops #module_federation #microfrontends #react

Как мы распилили монолит на микрофронтенды с Vite и не сошли с ума

Наш фронтенд начинался как простой SPA на React, собранный с помощью Vite — типичный монолит с несколькими страницами. Со временем проект оброс новыми функциями и интеграциями и начал становиться всё сложнее в поддержке. На горизонте появились новые вызовы: к продукту планировалось подключать всё больше независимых сервисов, а значит — ещё больше интеграций и роста кодовой базы. Мы понимали, что нагрузка на инфраструктуру будет только увеличиваться, поэтому решили заранее заложить архитектуру с расчётом на масштабирование. После изучения разных вариантов мы остановились на подходе микрофронтендов. Хотелось разграничить зоны ответственности между командами и ускорить разработку, не теряя гибкости. В качестве сборщика решили остаться на Vite — он быстро развивался, предлагал отличную DX и поддержку модульной федерации через плагин. Кроме того, важно было сохранить единый репозиторий, чтобы упростить CI/CD и управление зависимостями.

https://habr.com/ru/companies/beeline_tech/articles/918860/

#микрофронтенды #vite #frontops #module_federation #microfrontends #react

Микрофронтенд на пальцах с module federation 2.0

Микрофронтенд на пальцах с module federation 2.0. Как собрать микрофронты из кубиков без магии по шагам.

https://habr.com/ru/articles/898278/

#микрофронтенды #webpack #module_federation #typescript

Микрофронтенд на пальцах с module federation 2.0

Микрофронтенд на пальцах с module federation 2.0. Как собрать микрофронты из кубиков без магии по шагам.

https://habr.com/ru/articles/898278/

#микрофронтенды #webpack #module_federation #typescript

Микрофронтенд на пальцах с module federation 2.0

Микрофронтенд на пальцах с module federation 2.0. Как собрать микрофронты из кубиков без магии по шагам.

https://habr.com/ru/articles/898278/

#микрофронтенды #webpack #module_federation #typescript

Микрофронтенд на пальцах с module federation 2.0

Микрофронтенд на пальцах с module federation 2.0. Как собрать микрофронты из кубиков без магии по шагам.

https://habr.com/ru/articles/898278/

#микрофронтенды #webpack #module_federation #typescript

От хаоса к системе: как мы создавали корпоративный фронтенд-фреймворк

Как справляться с огромной сложностью программного обеспечения в условиях крупной компании, где множество отделов и управлений, множество проектов? Корпоративный фреймворк — один из ответов. Эта статья не совсем обычная. Мы будем смотреть на тему создания платформенных решений с разных ракурсов: управление, дизайн, проектирование, разработка и так далее. Чтобы передать вам как можно больше мыслей из первых рук, мой рассказ будут разрезать небольшие вставки-интервью от реальных участников нашей команды. Меня зовут Сергей Шахов, я долгое время занимался развитием корпоративного фреймворка в нашей компании. Наш фреймворк помогает создавать командам пользовательские интерфейсы, иными словами, это фронтенд-фреймворк. Статья адресована особенно тем, кто неравнодушен к разработке платформенных решений, а также может быть интересна всем, кто имеет отношение к фронтенд-разработке, проектированию интерфейсов, созданию дизайн-систем или комплексных модульных веб-приложений. Вы узнаете, стоит ли затевать разработку корпоративного фреймворка, а также о том, как неопределённое может быть управляемым, а скучное — прекрасным. В качестве бонуса дадим вам запретный рецепт, как спасти демонстрацию вашим заказчикам за десять минут до её начала, которому ни в коем случае нельзя следовать. Поехали!

https://habr.com/ru/companies/gnivc/articles/896636/

#управление_продуктом #фреймворк #дизайнсистема #devrel #проектирование #uikit #микрофронтенды #api #ux #фронтендразработка

Разворачиваем микрофронты на Next.js

Привет, Хабр! Меня зовут Дэниз, в этой статье я расскажу о микрофронтах — что это такое, какие у них плюсы и минусы, и как их можно реализовать. Пройдемся от того, зачем моей компании они понадобились, разберем реализацию, плюсы-минусы, и сделаем выводы.

https://habr.com/ru/articles/889202/

#микрофронтенды #микрофронтенд #микрофронты #nextjs #react #фронтенд #javascript #архитектура #web_разработка #интерфейсы

Микрофронтенды: зачем дробить фронтенд и почему это может быть хорошо

Привет, Хабр! Меня зовут Александр Гончаров, и я — Head of Frontend в ГК Юзтех. В коммерческом IT я c 2011 года, регулярно выступаю как спикер на конференциях и митапах, а также с 2014 года веду подкасты, в том числе «Суровый веб» . Мы в Юзтехе занимаемся заказной и продуктовой разработкой с 2006 года, в моём отделе около 80 человек, а в команде текущего проекта — 50 разработчиков. Ещё любопытные факты с цифрами: у меня три высших образования (также сейчас учусь в аспирантуре), четыре кошки, более 300 записанных выпусков подкастов и больше 200 проведенных стримов. Эта статья — адаптация моего доклада, который я рассказал на TechleadConf 2024 . В ней я не буду углубляться в технические детали реализации микрофронтендов и архитектурных паттернов, а вместо этого разберу, как они могут помочь командам работать быстрее и без боли.

https://habr.com/ru/companies/oleg-bunin/articles/884562/

#микрофронтенды #techlead #большие_команды #архитектура #frontend #backend #разработка #микрофронты #вебразработка #управление_командами

Сложное — просто: архитектуры ПО на жизненных примерах

Я недавно решила углубленно разобраться, какие архитектуры бывают в разработке ПО, и написать об этом простую статью. Это моя первая попытка поделиться своими мыслями и объяснить сложные вещи на понятном языке, поэтому буду рада вашей обратной связи! Если заметите, что что-то можно улучшить — пишите, я с удовольствием доработаю. И, конечно, позитивные комментарии и отзывы тоже очень приветствуются! 😊 Здесь я постаралась рассказать про монолиты, микросервисы и микрофронтенды без сложных терминов и технических деталей, чтобы те, кто только начинает разбираться в теме, могли понять, что к чему. Надеюсь, вам будет полезно и интересно. Поехали! 🚀

https://habr.com/ru/articles/866726/

#программные_архитектуры #архитектуры_ПО #монолитная_архитектура #микросервисы #микрофронтенды #mvc #чистая_архитектура #eventdriven #serverless

[Перевод] Как Vercel микрофронтенды внедрила

Узнайте, как Vercel сократил время сборки и повысил скорость разработки, сохранив при этом удобство работы с микрофронтендами. Основной веб-сайт Vercel, некогда являвшийся единым крупным сайтом Next.js приложение, обслуживающее как посетителей нашего веб-сайта, так и панель управления для входа в систему. Но по мере того, как компания Vercel росла, в этой системе появились возможности для совершенствования. Время сборки росло, управление зависимостями становилось все более сложным, а рабочие процессы требовали оптимизации. Незначительные изменения привели к полномасштабным сборкам, повлияв на изолированную разработку и конвейеры CI.

https://habr.com/ru/articles/852816/

#микрофронтенды #микрофронтенд #микросервисы

Рекурсивные зависимости на фронтенде

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

https://habr.com/ru/articles/852680/

#микрофронтенды #typescript #javascript #webpack #babel

Стоит ли игра свеч? Кратко о Single SPA (часть 1)

О проектировании микросервисной архитектуры с использованием фреймворка Single SPA и технологиях, связанных с его использованием. Читать далее...

https://habr.com/ru/articles/826590/

#микросервисы #single_spa #javascript #микрофронтенды #webразработка #vite #importmap #systemjs #esmoduleshims #полифиллы

Стоит ли игра свеч? Кратко о Single SPA (часть 1)

О проектировании микросервисной архитектуры с использованием фреймворка Single SPA и технологиях, связанных с его использованием. Читать далее...

https://habr.com/ru/articles/826590/

#микросервисы #single_spa #javascript #микрофронтенды #webразработка #vite #importmap #systemjs #esmoduleshims #полифиллы

Стоит ли игра свеч? Кратко о Single SPA (часть 1)

О проектировании микросервисной архитектуры с использованием фреймворка Single SPA и технологиях, связанных с его использованием. Читать далее...

https://habr.com/ru/articles/826590/

#микросервисы #single_spa #javascript #микрофронтенды #webразработка #vite #importmap #systemjs #esmoduleshims #полифиллы

Новый микрофронтенд за 20 минут вместо часа: как работает система автоматической сборки

Микрофронтенды могут казаться идеальным решением, которое облегчает разработчику жизнь. Но только до тех пор, пока система не разрастется и не придется тратить час, чтобы запустить новый микрофронтенд. Мы в Mindbox узнали это на своем опыте. Чтобы ускорить сборку, разработали систему из шаблона и CLI утилиты. Теперь новый микрофронтенд со всей обвязкой создается за 20 минут. В статье — подробное решение для тех, кто захочет повторить.

https://habr.com/ru/companies/mindbox/articles/824428/

#frontend #микрофронтенды #автоматическая_сборка #шаблонизация

Пора переходить на микрофронтенд? Опыт “Инферит Клаудмастер”

Приветствую всех новичков и гуру фронтенда, а также всех, кто работает с интерфейсами. Я Никита Борцов, создаю красоту на фронте первой в России FinOps-платформы для управления облачными затратами “ Инферит Клаудмастер ”. В этой статье вы узнаете о: - факторах, сформировавших тренд на уход фронтенд-разработки от монолита к микрофронтенду, - процессах со стороны команды разработки при переходе на микрофронтенд, - кейсе платформы “Инферит Кладумастер”: почему для нашей команды микрофронтенд с плагином Module Federation стал полезным решением, - признаках того, что пора переходить на микрофронтенд.

https://habr.com/ru/companies/inferit/articles/801737/

#микрофронтенд #module_federation #фронтенд #фронтендразработка #микросервисы #микрофронтенды #microfrontends #microservices

Пора переходить на микрофронтенд? Опыт “Инферит Клаудмастер”

Приветствую всех новичков и гуру фронтенда, а также всех, кто работает с интерфейсами. Я Никита Борцов, создаю красоту на фронте первой в России FinOps-платформы для управления облачными затратами “ Инферит Клаудмастер ”. В этой статье вы узнаете о: - факторах, сформировавших тренд на уход фронтенд-разработки от монолита к микрофронтенду, - процессах со стороны команды разработки при переходе на микрофронтенд, - кейсе платформы “Инферит Кладумастер”: почему для нашей команды микрофронтенд с плагином Module Federation стал полезным решением, - признаках того, что пора переходить на микрофронтенд.

https://habr.com/ru/companies/inferit/articles/801737/

#микрофронтенд #module_federation #фронтенд #фронтендразработка #микросервисы #микрофронтенды #microfrontends #microservices

Пора переходить на микрофронтенд? Опыт “Инферит Клаудмастер”

Приветствую всех новичков и гуру фронтенда, а также всех, кто работает с интерфейсами. Я Никита Борцов, создаю красоту на фронте первой в России FinOps-платформы для управления облачными затратами “ Инферит Клаудмастер ”. В этой статье вы узнаете о: - факторах, сформировавших тренд на уход фронтенд-разработки от монолита к микрофронтенду, - процессах со стороны команды разработки при переходе на микрофронтенд, - кейсе платформы “Инферит Кладумастер”: почему для нашей команды микрофронтенд с плагином Module Federation стал полезным решением, - признаках того, что пора переходить на микрофронтенд.

https://habr.com/ru/companies/inferit/articles/801737/

#микрофронтенд #module_federation #фронтенд #фронтендразработка #микросервисы #микрофронтенды #microfrontends #microservices

Микрофронтенд с использованием Module Federation. Соединяем компоненты между системами на разных фреймворках

Всем привет! Мы — Павел и Даниил, ведущие разработчики компании ITFB Group. У компании два собственных продукта — ЕСМ/CSP/BPM-платформа СИМФОНИЯ (документооборот, хранение контента, архив, портал) и система распознавания/обработки документов ITFB EasyDoc. Пару месяцев назад к нам прилетела задача интегрировать ряд функций распознавания из продукта ITFB EasyDoc и оформить их в отдельный модуль платформы СИМФОНИЯ, дабы пользователь всё делал в одном месте и не дрейфовал по разным системам. Однако возникла загвоздка: СИМФОНИЯ — на React, а ITFB EasyDoc — на Vue. Для решения вопроса посерчили различные источники информации и плавно ушли в собственное творчество, поскольку не обнаружили стоящих вариантов с вменяемой технической детализацией. В какой-то момент возникло острое желание поделиться нашими итоговыми наработками на Хабре и заполнить пробелы базы знаний в интернете по этому вопросу. Всем, кому интересно увидеть наше решение, добро пожаловать под кат)

https://habr.com/ru/companies/itfb/articles/797429/

#фронтенд #react #vue #vuejs #микрофронтенд #фронтендер #микрофронтенды #reactjs #фронтендразработка #фронтенд_на_react

Создание веб-приложения с использованием микрофронтендов и Module Federation

Привет! В данной статье мы разберём процесс разработки веб-приложения на основе подхода микрофронтендов с использованием технологии Module Federation

https://habr.com/ru/articles/785798/

#микрофронтенды #webpack #reactjs #javascript #redux

Микрофронтенд для самых маленьких

Всем привет. Меня зовут Алексей. Сейчас я работаю frontend-разработчиком в компании Ozon. В свободное время мне нравится читать про новые технологии, фреймворки, а учитывая то, с какой скоростью развивается frontend, я никогда не скучаю. В этой статье пойдет речь о микрофронтах. В частности, мы посмотрим, как их реализовать на самом базовом уровне, разберемся, когда они нужны, а когда даже не стоит смотреть в их сторону.

https://habr.com/ru/companies/ozontech/articles/782508/

#frontend #ozon #ozon_tech #javascript #typescript #микрофронтенды #module_federation

Микрофронтенд для самых маленьких

Всем привет. Меня зовут Алексей. Сейчас я работаю frontend-разработчиком в компании Ozon. В свободное время мне нравится читать про новые технологии, фреймворки, а учитывая то, с какой скоростью развивается frontend, я никогда не скучаю. В этой статье пойдет речь о микрофронтах. В частности, мы посмотрим, как их реализовать на самом базовом уровне, разберемся, когда они нужны, а когда даже не стоит смотреть в их сторону.

https://habr.com/ru/companies/ozontech/articles/782508/

#frontend #ozon #ozon_tech #javascript #typescript #микрофронтенды #module_federation