Решение проблем с размером полезной нагрузки в микрофронтендах.
Много лет назад мы использовали микрофронтенды. Еще до появления этого термина.
Теперь доказательство в пудинге.
Многие крупные корпорации используют микроинтерфейсы в 2022 году — IKEA, Spotify, HelloFresh — и это помогает другим стать более любопытными, подходит ли архитектура и для их компании. Платформа микроинтерфейса Fathym — это волна будущего.
Во-первых, давайте быстро определим микрофронтенды. Затем мы рассмотрим, когда они подходят. Наконец, мы рассмотрим одно из критических замечаний по поводу микрофронтендов, размер полезной нагрузки и время загрузки.
По своей сути микроинтерфейсы просто означают получение монолитного интерфейса — жесткого, неподвижного, неделимого — и разбивание его на более мелкие части. Эти более мелкие части затем обрабатываются небольшими командами, которые работают автономно для достижения общей цели.
Преимущества использования микрофронтендов многочисленны. Можно разбить эту большую кодовую базу на более мелкие части, что означает более быструю сборку, а также более быстрые исправления. Обновления могут выполняться в одной части сайта без простоя всего сайта. Кроме того, в одном проекте можно использовать несколько разных фреймворков JavaScript.
В этом примере домашняя страница была создана в React, одном из самых популярных фреймворков. Форум создан на Angular. Тем временем блог создан в Gatsby, а техническую документацию ведет генератор статических сайтов Docusaurus.
Помимо возможности использовать эти разные фреймворки, представьте, что каждый из этих маршрутов создавался и обслуживался отдельной командой. Это опять-таки упрощает и ускоряет обновление одного аспекта веб-сайта, потому что каждая команда не обязательно ждет, пока друг друга закончат, прежде чем они смогут отправить свои обновления.
Микроинтерфейсы также означают меньшие кодовые базы, которые превращаются в быстрые исправления ошибок и более быстрые сборки в целом.
Честно говоря, сейчас не самое плохое время для использования микрофронтендов. Это может показаться ненужным для крошечной команды или шоу для одного человека, но также имеет смысл следить за будущим. Потому что, если команда расширяется, другие могут вмешаться и получить конкретные задачи или цели.
Чем больше группа, работающая над веб-сайтом, тем больше смысла разделять эту рабочую нагрузку на более мелкие части, которыми могут управлять небольшие команды.
Одно из основных критических замечаний по поводу микро-интерфейсов следующее: если кто-то использует несколько экземпляров фреймворка, каждый из них должен загружаться каждый раз при открытии сайта.
Как объяснил это Мартин Фаулер:
«Например, если каждый микроинтерфейс содержит собственную копию React, то мы вынуждаем наших клиентов загружать React n раз. Существует прямая связь между производительностью страницы и вовлеченностью/конверсией пользователей, и большая часть мира использует интернет-инфраструктуру намного медленнее, чем в высокоразвитых городах, поэтому у нас есть много причин заботиться о размерах загружаемых файлов».
Хотя это правда, мы работаем над большими размерами загрузки, создавая легкие микроинтерфейсы, включающие только то, что необходимо.
Мы хотим прояснить, что вы, как разработчик, имеете право создавать свой сайт так, как считаете нужным. Вы можете использовать React для создания каждой отдельной страницы. Однако мы предостерегаем от этого не только из-за размера полезной нагрузки, но и потому, что в этом отношении он по-прежнему тесно связан с монолитным внешним интерфейсом.
Вместо этого мы предлагаем вам использовать React (или Angular и т. д.) для одной части вашего веб-сайта и использовать генератор статических сайтов или даже более легкую структуру, такую как Vue.js или Svelte, для других страниц.
React хорошо известен как популярная библиотека JavaScript, но размеры его пакетов больше, что означает более медленные веб-сайты на стороне пользователя. Vue и Svelte намного меньше и по-прежнему содержат множество настроек для создания сногсшибательных сайтов.
Наши внешние интерфейсы становятся легче, когда мы можем использовать генераторы статических сайтов для определенных аспектов веб-сайта. В Fathym мы сосредоточены на инклюзивности и снижении планки с точки зрения опыта кодирования, необходимого для создания сайта, и часть этого заключается в использовании конструкторов сайтов с низким и нулевым кодом.
Одним из примеров является Docusaurus, который мы используем для наших блогов, а также для нашей технической документации. Другой — Гэтсби (пример из нашего блога выше), а еще есть Plasmic, удивительно эффективный и простой в использовании генератор сайтов. На самом деле, нам это так нравится, что мы в настоящее время используем его для нашей главной страницы.
Генераторы сайтов не только меньше загружаются, но и могут быть предварительно сгенерированы/предварительно загружены для повышения скорости и уклонения от загрузки.
Итак, выбор за вами при разработке на Fathym. Вы можете создать сайт с любой структурой, которая вам нравится или в которой вы лучше всего обучены, или вы можете создать веб-сайт за считанные минуты, используя конструкторы статических сайтов, как показано в руководстве здесь:
Платформа микроинтерфейсов Fathym позволяет использовать популярные фреймворки, такие как Angular, React, Vue.js, Svelte и другие. Это потрясающая гибкость, учитывая, что эти фреймворки ценятся за разные возможности.
Fathym в настоящее время находится на стадии freemium, и мы рекомендуем вам присоединиться сегодня! Хостинг сайта с микро-интерфейсом на Fathym — это просто, быстро и бесплатно.
Мы приглашаем вас зарегистрироваться в Fathym прямо сейчас, не только для достижения ваших целей, но и для того, чтобы немного повеселиться.
Первоначально опубликовано на https://www.fathym.com.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
