Я уже несколько раз встречал термин Micro Front-end и не знал, что это такое. Итак, я отправился в путешествие, чтобы точно узнать, что это такое.
Идея микро-интерфейса основана на представлении о том, что веб-приложение основано на наборе функций. Все эти функции могут принадлежать разным командам, которые имеют разное представление об этой функции, поскольку все они имеют разную миссию, которая их волнует.
Основные идеи
Идеология микро-интерфейса включает в себя несколько основных идей. Их можно рассматривать как руководящие принципы, на основе которых вы можете построить микро-интерфейс.
- Будьте агностиками в области технологий.
Все команды должны иметь возможность обновлять и выбирать свой стек без необходимости согласовывать свои действия с другими командами. - Изолировать код команды
Не используйте общую среду выполнения, даже если все используют одни и те же платформы. Создавайте автономные приложения, не зависящие от общего состояния или глобальных переменных. - Установите префиксы команд
Согласуйте соглашения об именах, где изоляция пока невозможна. В CSS, функциях и хранилище, чтобы избежать коллизий и прояснить, чей это код. - По возможности старайтесь использовать собственные функции.
Если невозможно использовать собственные события, постарайтесь сделать API как можно более простыми. - Создайте устойчивый сайт
Ваша функция должна быть полезной, даже если JavaScript не работает или еще не запущен.
Большинство, если не все, из этих основных идей говорят о командах, но вы можете легко применить это и к сольным проектам. Хотя поначалу это может показаться странным.
Состав страницы
Веб-страница состоит из нескольких компонентов. Если вы посчитаете все более мелкие компоненты, у вас будет, может быть, десять кнопок, нижний колонтитул, заголовок, контент и т. Д. В более глобальном масштабе вы можете определить все компоненты, которые работают вместе, как единый микро интерфейс. В простом интернет-магазине у вас будут «навигация», «корзина» и «продукт».
Им действительно требуются одни и те же данные, и они могут вызывать один и тот же API для получения этих данных. Но сами компоненты не обязательно должны иметь одну и ту же структуру. А некоторые могут даже быть потомками другого родительского микрокомпонента внешнего интерфейса.
Для взаимодействия между компонентами вы не можете выбрать что-то вроде состояний React, потому что дочерний элемент может не использовать React. Но все эти компоненты могут читать и записывать только атрибуты HTML.
Сольные проекты
В большинстве сольных проектов такая работа не имеет большого смысла. Это может быть очень весело, и вы наверняка многому научитесь, работая с несколькими фреймворками.
Работая в одиночку, вы добьетесь того же, что и в команде. Вы можете создать несколько проектов для разных частей проекта, таких как навигация или страница продукта. И вы бы связали их вместе, используя более естественные способы вместо состояний.
Заключение
Мне очень интересна идея микро-интерфейса, но я бы не стал использовать ее в любом реальном проекте. Идея есть, но ее можно отшлифовать. И хотя в этой статье рассматриваются только самые основы, было бы интересно посмотреть, станет ли это когда-нибудь более популярным.
На мой взгляд, использование компонентов React ничуть не хуже микро-интерфейса. Но я понимаю, почему это может работать в приложениях корпоративного размера. Если вы хотите узнать больше, посетите официальный сайт здесь.
Спасибо за чтение и хорошего дня.
