Подробное руководство по микрофронтенд архитектуре

Микрофронтенд - это архитектура, которая позволяет масштабироваться, делать команды независимыми и больше ориентироваться на бизнес потребности. Мы начинаем большую и подробную серию видео о микрофронтенд архитектуре на Boosty с ранним доступом. Некоторые темы будут эксклюзивно доступны только на Boosty по подписке. Мы будем читать и обсуждать книгу “Building Micro-Frontends. Scaling Teams and Projects, Empowering Developers”. Книга не переведена на русский язык. В этих видео мы будем обсуждать самую суть книги, без воды. Также я буду давать свои комментарии, основываясь на своем опыте внедрения микрофронтендов в большом проекте.

В этих видео будет дано большое количество полезной информации по всем аспектам распиливания монолита на микрофронтенды. Мы рассмотрим большое количество вариантов внедрения микрофронтенд архитектуры, рассмотрим все достоинства и недостатки вариантов, сложности перехода на микрофронтенд архитектуру и что стоит учесть заранее. Также коснемся принципов Domain Driven Design (DDD) и как эти принципы связаны с микрофронтендами. Рассмотрим следующие темы:

1. Как распилить монолит на микрофронтенды
2. Архитектуры фронтенд приложений - SPA, Изоморфные, Статичные, JAMstack
3. Что такое микрофронтенд и каковы его принципы
4. Что учитывать при переходе на микрофронтенд
5. Краткий обзор видов разделения на микрофронтенды
6. Вертикальное разделение на микрофронтенды
7. Горизонтальное разделение на микрофронтенды
8. Микрофронтенд на основе Module Federation
9. Микрофронтенд на основе iframes
10. Микрофронтенд на основе веб-компонентов
11. Server Side микрофронтенды
12. Edge Side микрофронтенды
13. Проект с Webpack Module Federation
14. Эволюция проекта с Webpack Module Federation
15. Как деплоить микрофронтенды
16. Как версионировать микрофронтенды
17. CI/CD микрофронтендов
18. Стратегии деплоя микрофронтендов
19. Пример автоматизации пайплайна для микрофронтенда
20. Общение микрофронтендов с бекендом
21. Пример распиливания монолита на микрофронтенды. О приложении
22. Пример распиливания монолита на микрофронтенды. Детали реализации
23. Как презентовать микрофронтенд архитектуру команде

Основная цель разработки любого веб-сайта - обеспечить, чтобы пользователи могли видеть необходимую информацию в удобном для чтения формате. Но эта простая цель сложна в реализации, поскольку посетители используют различные типы устройств с разными размерами и разрешениями экрана. Также необходимо обеспечить корректное открытие сайта в различных браузерах и различных операционных системах (кроссплатформенность). Это заставляет frontend разработчика тестировать свой дизайн на нескольких вариантах ОС, браузеров и устройств, что усложняет его работу. Frontend разработчики используют HTML, JavaScript и CSS (каскадные таблицы стилей) для обеспечения привлекательного внешнего вида и правильной работы сайта. Это также позволяет пользователям свободно и комфортно взаимодействовать с веб-сайтом.

Чем занимается frontend разработчик?

Вот некоторые важные роли, которые играют фронтенд-разработчики:

• Фронтенд-разработчик должен уметь определять компоненты на веб-странице с помощью HTML.
• Уметь повышать производительность с помощью JavaScript-фреймворков.
• Фронтенд-разработчик выполняет различные задачи, такие как управление контентом, изменение веб-дизайна, анализ взаимодействия, отладка и т.д.
• Анализирует производительность веб-страницы на стороне клиента, чтобы лучше понять пользовательский опыт и взаимодействие пользователей.
• Фронтенд-разработчик работает с веб-дизайнерами и UX-специалистами, чтобы создать наилучший опыт для посетителей.

Важные навыки для frontend разработчиков

Вот важные навыки для frontend разработчиков:

• Умение создавать отзывчивый дизайн веб-сайта.
• Хорошее знание HTML (язык разметки гипертекста) для определения компонентов на веб-странице.
• Знание JavaScript для повышения интерактивности сайта.
• Умение анализировать производительность веб-страницы на стороне клиента для лучшего понимания пользовательского опыта.
• Разработчики фронтенда оптимизируют веб-сайты для улучшения пользовательского опыта.
• Разработка и поддержка пользовательского интерфейса.
• Реализация дизайна веб-сайта для мобильных устройств.
• Управление рабочим процессом программного обеспечения.
• Должны быть знакомы с современными лучшими практиками SEO.
• Исправление ошибок и тестирование веб-сайтов на удобство использования.

Какое программное обеспечение и инструменты использует фронтенд разработчик?

Frontend разработчик или fullstack разработчик проектирует визуальную часть сайта, которую видят пользователи. Frontend разработчик превращает проекты, созданные веб-дизайнером, в функциональный, эстетически приятный пользовательский интерфейс.

Ниже приведены некоторые технические знания, которые ожидаются от Frontend разработчиков: 1. Технологии фронтенда: Фронтенд-разработчики должны хорошо разбираться в основных фронтенд-веб-технологиях, таких как HTML, CSS и JavaScript. Эти специалисты также должны знать сторонние библиотеки, такие как React , Vue, Angula и другие. 2. Языки разработки: Front-end разработчики должны знать основы таких языков программирования, как TypeScript, и по необходимости Python, Java, Ruby и др. 3. TypeScript: TypeScript - это чистый объектно-ориентированный язык программирования с классами, статически типизированным кодом, интерфейсами, как C# или Java. 4. База данных и кэш: Front-end разработчики должны знать различные технологии СУБД, такие как MySQL, MongoDB, Oracle и SQLServer, которые широко используются для этих целей. 5. Отзывчивый и мобильный дизайн: Чтобы стать успешным frontend разработчиком, знание дизайна является обязательным условием. Более того, frontend разработчик должен обладать навыками отзывчивого и мобильного дизайна, которые важны для работодателей. Отзывчивый дизайн означает, что макет сайта меняется в зависимости от размера экрана и устройства, которым пользуется пользователь. Фронтенд разработчики должны убедиться, что сайт доступен для всех пользователей и остается отзывчивым для всех мобильных, планшетных компьютеров, ноутбуков, ПК и других устройств. 6. Сервер: Front-end разработчик должен работать с такими серверами, как Apache или Nginx, и должен хорошо разбираться в Linux и администрировании серверов. 7. Система контроля версий (VCS): Система контроля версий помогает Front-end разработчикам отслеживать все изменения, вносимые в их код. Git широко используется в этих системах контроля версий, которые могут быть установлены с помощью командной строки. Знание Git помогает разработчикам разобраться в последнем коде, обновить определенные части кода и внести изменения в код других разработчиков. 8. Работа с API (REST и SOAP): Знание API и веб-сервисов также является плюсом для frontend разработчиков. Желательно знакомство с созданием и использованием сервисов REST и SOAP. 9. Системы управления контентом и платформы электронной коммерции: Frontend разработчик должен знать о различных системах управления контентом и платформах электронной коммерции (особый тип CMS). Самой популярной CMS, используемой во всем мире, является WordPress. Некоторые другие популярные CMS включают Magento, Joomla и Drupal. 10. Кросс-браузерная разработка: Современные браузеры очень хорошо справляются с отображением веб-сайтов. Однако все еще существуют различия в том, как они интерпретируют внутренний код. Знание того, как заставить ваш сайт работать так, как вы хотите, в каждом браузере, также очень важно.

В чем разница между Frontend и Backend разработчиком?

Frontend разработчики, как правило, работают над пользовательской частью веб-сайта или веб-приложения.

• Frontend веб-разработчик должен быть знаком с HTML, CSS и JavaScript.
• Frontend разработчик работает вместе с дизайнером, принимая вводные данные пользователей и изменяя их путем тестирования.

Backend разработчики обычно работают с технологиями на стороне сервера, которые обеспечивают функциональность сайта.

• Backend разработчики используют Python, Go, Java, PHP, .Net, СУБД, сервер, API и т.д.
• Backend разработчики разрабатывают приложение, которое поддерживает фронтенд. Они также обеспечивают поддержку, безопасность и управление контентом.

Итоги

• Фронтенд разработчики - это профессионалы, которые отвечают за эффективную реализацию визуальных компонентов на сайте.
• Фронтенд разработчик определяет компоненты на веб-странице с помощью HTML.
• Разработка фронтенд-стека используется для проектирования той части веб-сайта, которую видит пользователь.
• Frontend разработчики должны знать: 1) Frontend технологии, 2) языки веб-разработки, 3) TypeScript, 4) базы данных и кэш, 5) отзывчивый и мобильный дизайн, 6) сервер, 7) систему контроля версий, 8) работу с API, 9) функциональное тестирование и модульное тестирование, 10) кросс-браузерную разработку.
• Backend разработчики обычно работают с технологиями на стороне сервера, которые обеспечивают функциональность сайта. В отличие от них, разработчики Frontend обычно работают с пользовательской частью сайта или веб-приложения.