demo микрофронтенда на vuejs без iframe

воспроизвести демо

yarn install

yarn build

node server/index.js

поднимется сервер на порте 8080. демо находится на http://localhost:8080/.

мы оказываемся на странице, которая представляет собой "старый фронт", при этом на странице есть кнопка, которая приходит к нам с нового фронта.

есть 3 воркспейса:

• new:

  "новый" UI, который мы хотим интегрировать в старый.

  сборка на вебпаке, значит ее можно гибко кастомизировать.

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

  добавляя путь нового компонента для бандла мы явно описываем какие именно элементы мы ожидаем в качестве "деталей"(виджетов) нашего микрофронта.

• old:

  сейчас не используется. смотри old-plain

  "старый" UI, который мы не хотим трогать.

  в этом демо используется сборка витом, но это не играет никакой роли. мне требовалось небольшое приложение, которое сможет обращаться к "новому микрофронтеду" для демонстрации.

• old-plain:

  "старый" UI, который мы не хотим трогать.

  в отличии от old не использует сборщиков/бандлеров.

• server:

  express server, который просто возвращает статику.

  в реальном проекте тут следовало бы юзать nginx, но тогда в демо пришлось бы тянуть еще и docker-compose что усложнило бы demo.

какие проблемы есть у данного решения

• каждый бандл включает в себя все используемые библиотеки (как минимум vue), и как следствие будут не маленькими.

  но бандлы в любом случае намного меньше, чем те, что получаются при билде всего приложения с роутером

• на каждый новый виджет нашего микрофронта создается новый инстанс vue app.

  этого почти невозможно избежать. впрочем я не думаю что это большая проблема

• проблемы с доступом к общему состоянию.

  к примеру, мы "из коробки" не сможем получить доступ к общему стору из 2 разных виджетов.

  но эта проблема актуальна и в решении с использованием iframe.

какие преимущества есть у данного решения

• размер бандлов будет значительно меньше

• так как не будет iframe, то пропадут пробелмы:

  • всплытие событий
  • доступ к window.location
  • доступ к внешним элементам dom
  • необходимость включения cors
  • и т.д.

• скорее всего проблема общего кода разных виджетов является решаемой, если сделать более глубокий research.

  если решить эту проблему, то:

  • размер бандлов будет соответствовать размеру компонента (код библиотек будет общим и не будет включаться в бандлы)
  • будет решена проблема взаимодействия виджетов, так как они смогут, к примеру, иметь общую pinia store.

• собранные бандлы не будут иметь роутер и т.д., что ведет к уменьшению количества точек отказа.