Как мы распилили монолит. Часть 1

[andreyverbin]

Ваши тезисы в начале статьи не про микросервисы и не могут быть основанием для распила приложения. Всё то же самое достигается с помощью библиотек и интерфейсов. Само собой бизнес масштаба банка в монолите жить не должен, но причины для распила совсем другие.

[Ish_Ivan]

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

[devopg]

обычно в таких статьях много графиков взаимодействия и ориентир как определенные места горизонтально масштабируются. А тут одна писанина

[Ish_Ivan]

Графики будут в следующих частях, в этой хотелось показать именно предпосылки разделения, за и против.

[rpiontik]

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

В своем проекте я создал окружение в котром webpack собирает приложение в пакет js. Пакет vendor остается общим. И собирается единожды.

Проект реализован на VUE. Это позволяет микроприложение объявить компонентом и загружать линивой загрузкой через промисы.
Т.е. приложение подгрузится только тогда, когда это потребуется.

Аркестратор всего этого — launcher. Рутовый компонент. А универсальное средство коммуникации приложений — шина данных. Ну и конечно VUEX модули.

[Ish_Ivan]

Звучит интересно, а есть ссылочка на гитхаб? Интересно было бы посмотреть)

[rpiontik]

Да, в моем профиле. Плюс есть статья о моем проекте https://m.habr.com/ru/post/474356/

Суть проекта конечно в другом. Но фронтовая реализация очень близкая. Релевантная репа https://github.com/rpiontik/ThingJS-front

В течении месяца я планирую b-релиз. Первая статья оказалась сумбурной. В этот раз я буду "есть слона" по частям. Сделаю подробное описание технологии примененной во фронте.

[TheCodeFactory]

Интересно какими тулзами настроили запрет на импорт между app папками в монорепе? Учитывая что tslint deprecated. Я на днях пытался через eslint, максимум смог libs от app защитить

[Ish_Ivan]

Привет, мы используем правила как под tslint, так и под eslint.
nx-enforce-module-boundaries из пакета @nrwl/nx

[Devtime]

Спасибо за статью. Я задавался целью разделить на модули проект, но не простым lazy load от React. А пробовал сделать подгрузку сторонних компонентов по URL.
Кейс такой:
1. Собираем bundle страницы или ее части и выкладывается на CDN
2. React приложение получается с сервера список роутов, один из которых должен был в рантайме подгрузить компонент с CDN и отобразить

Но к сожалению не удалось найти решение для этой задачи. Максимум что удавалось найти, это подключение готового bundle на этапе сборки webpack, но webpack и так умеет бить модули на чанки и этот вариант не устраивал.

Можете подсказать решение для удаленного импорта компонентов по url? в т.ч. пробовал библиотеки разные для React, все они так же требуют наличие бандла на этапе сборки вебпака.

p.s. у компоненты на CDN должны создаваться независимо от основного проекта, возможно разными сторонними разработчиками, т.е. на этапе сборки вебпака их не будет. В проекте используем React

[rpiontik]

Не знаю как в React, я делал это а VUE. Для этого есть динамические компоненты. Т.е. ты объявляешь компонент, а на его реализацию вешаешь промис. Когда он встречается в другом компоненте, происходит загрузка реализации.

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // Передаём определение компонента в коллбэк resolve
    resolve({
      template: '<div>Я — асинхронный!</div>'
    })
  }, 1000)
})

пруф
И строй его как хочешь. Хоть по урлу доставай, хоть генерируй на лету.

[Devtime]

В React не нашел такой возможность. Точнее есть, но как я понял этот компонент должен быть доступен на этапе сборки вебпаку. у Вас в исходниках глянул. очень лаконично происходит загрузка компонента через script

[SuperOleg39ru]

https://nodejs.org/api/vm.html#vm_vm_executing_javascript — если надо выполнить код компонента на сервере.
На клиенте — достаточно вставить скрипт на страницу, но код компонента должен быть обернут в доп. логику, что бы сохранять его в некий глобальный реестр компонентов