Прежде всего: что такое MicroFrontend?

Что ж, термин не новый, на самом деле начало использоваться в конце 2016 года компанией ThoughtWorks Technology Radar, концепция очень проста, расширять или использовать концепцию «микросервисов» из серверной части в интерфейсных приложениях, это не безумие. Если мы подумаем о том, как выросли внешние интерфейсы за последние десять лет, кажется, прошло много времени, но это не так, в этой статье я буду говорить о веб-интерфейсах (HTML / CSS / Javascript и подтипах).

Микро-интерфейс может быть определен этим

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

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

Как это работает?

Как я сказал ранее, способ реализации микро-интерфейса основан на концепции микросервисов, поэтому вы должны разделить свое приложение на несколько частей, лучший способ сделать это - применить концепции Domain Driven Design, что означает, что вы должны думать в своем приложении на основе вашего домена, в случае внешнего интерфейса, взгляните на разделы, даже если все веб-приложение имеет только одно предложение, вы увидите, что не все компоненты сильно связаны, конечно, в некоторых В случаях, когда один компонент зависит от другого, но это не всегда общий сценарий, некоторые разделы могут просто использовать другой API с сервера и отображать его на экране, в то же время другой позволяет вам общаться с человеком.

ниже вы можете сравнить старый способ (монолит) и новый подход

Даже если в подходе к микро-интерфейсу используется контейнер для отображения всех разделов, преимущество для этого аналогично микросервисам, команды могут работать над улучшением веб-приложения и не вступать в конфликт, чтобы коснуться «одного и того же кода», потому что существует нет того же кода, команды работают только в том разделе, который им нужно улучшить.

Вернуться к названию

Я разрабатываю библиотеку с помощью response, она называется «µFront» (очень умно, не так ли?), Этот компонент позволяет вам отображать раздел в вашем приложении, конечно, у вас нет ничего чистого волшебства. Чтобы выполнить некоторые шаги, чтобы сделать это, в основном разделы вашего приложения должны быть отрисованы с применением другой стратегии, позвольте мне показать вам, что я имею в виду.

На данный момент ваше приложение должно быть разделено на два типа

  • Контейнер
  • Разделы

Создание подходящего контейнера

Для этого вам как минимум необходимо использовать библиотеку µFront.

Представьте, что компонент µFront - это просто еще один блок div, что означает, что он может адаптировать свой размер в соответствии с пространством, которое вы ему предоставляете, и раздел, который будет отображаться там, может иметь этот размер. Вам просто нужно добавить эту строку в свой код

import React, { Component } from 'react'

import { Ufront } from 'ufront'

class Example extends Component {
  render() {
    return <UFront host="SECTION HOST" name="SECTION NAME"/>
  }
}

Но что это за параметры?

  • хост: необходим для поиска в разделе, его вызов службы, которая должна удалить скрипт с разделом, а затем отобразить
  • name: так идентифицируется ваш раздел, это имя важно, потому что µFront использует его для визуализации компонента.

Создание раздела

На самом деле это не так сложно, вы можете разработать раздел, используя шаблон реагирования, или, если вы хотите, я сделал его для примеров, поскольку я сказал, что раздел - это просто приложение для реагирования, поэтому для создания раздела необходимо учитывать только три момента:

  • При сборке проекта он должен просто сгенерировать один файл сценария.
  • Визуализация компонента должна выполняться способом, подобным этому примеру.
import React from "react";
import ReactDOM from "react-dom";
import App from "./App"; 
if (!document.getElementById("MicroSection-container")) {      ReactDOM.render(<App />, document.getElementById("root"));
} 
window.renderMicroSection = (containerId) => {          ReactDOM.render(<App />, document.getElementById(containerId));
} 
window.unmountMicroSection = (containerId) => {      ReactDOM.unmountComponentAtNode(document.getElementById(containerId));
}

это необходимо, потому что вы можете отображать свой раздел автономно или в другом контейнере, а µFront использует второй метод, запомните имя, которое µFront спрашивает вас раньше, в этом Например, название раздела - MicroSection, что означает, что µFront добавляет суффикс -container к внутреннему компоненту HTML. а затем визуализируйте раздел с помощью этого метода, посмотрите, как называется метод renderMicroSection, еще раз, имя говорит µFront, что существует некий метод с именем раздела и префиксом «render», поэтому название вашего раздела очень важно и должно быть уникальным.

  • И последний шаг очень прост, очевидно, вы должны предоставить конечную точку для использования и получения файла сценария, созданного в первую очередь.

Если вы хотите узнать об этом или хотите внести свой вклад, вот все ссылки