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

[ogregor]

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

[Smolin_I]

В большинстве случаев можно обойтись без shared state — это проще, и чем меньше взаимодействие между mf, тем легче масштабировать. Также никто не отменял принцип единой ответственности. Ведь достаточно пробросить в пропсы колбэк, если необходимо работать с внешними данными локально.
В противном случае вы вполне можете использовать инъекции. Для базовых вещей их будет вполне достаточно.

[kalyukdo]

Как с таким подходом использовать серверный рендер?

[Smolin_I]

Сама концепция немного расширяется, но смысл остаётся тем же что и при обычном подходе к ssr, т.е. когда маршрут указывает на удалённый модуль, хост-сервер делегирует обработку этого маршрута удалённому серверу. Тот, в свою очередь, рендерит HTML и отправляет его обратно в браузер.

[ShadowOfCasper]

Всё равно эти плюшки не решают типичных проблем микрофронта. Так или иначе шареды нужно ставить и хранить отдельными npm пакетами, решать геморрой с router в remote и mixed content restrict policy.

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

Статья хорошая.

[Smolin_I]

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

Большое спасибо за отзыв.

[markelov69]

Так или иначе шареды нужно ставить и хранить отдельными npm пакетами

А вот и нет. Всё проще и главное лучше.
Запрос GET /microfronts/{microfront_name}/microfront_info.json решает проблему и неудобство пакетов. Где manifest.json это файл в котором есть инфа о JS и CSS файлах бандла, например:

{
  "index.css":"/microfronts/cartf_mf/assets/css/index-e6caa24a.css",
  "index.js":{
    "tag":"script",
    "attrs":[
      {
        "key":"type",
        "val":"module"
      },
      {
        "key":"crossorigin",
        "val":"crossorigin"
      }
    ],"
    url":"/microfronts/cartf_mf/assets/index-4367d438.js"
  }
}

Сами файлы микрофронтов лежат по адресу /microfronts/{microfront_name}
Каждый микрофронт регистрирует себя в глобальной области, например

window.$someFronts ??= {};
window.$someFronts.cartf_mf = (el: HTMLElement) => {
    const root = ReactDOM.createRoot(el);
    root.render(<App />);

    return () => {
        root.unmount();
    };
};

[jellySWATy]

А можно ли source code к статье приложить? Было бы здорово наглядно всё потыкать

[Smolin_I]

У mf 2.0 есть репозиторий с различными примерами: https://github.com/module-federation/module-federation-examples