Как распилить монолитный проект TypeScript?

Question

[Константин]

Имеется TS монолитный проект, написанный без использования фреймворков.

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

Проблема в том, что структура проекта очень запутанная, трудно отделима друг от друга, например:

Меню Задача содержит табы, один из табов это список адресов, а под каждым адресом есть свои свойства, а у свойств свои атрибуты.

Все это строится сверху вниз.
Каждый следующий DOM функциональный элемент зависим от предыдущего, передается всегда референт на предыдущий HtmlElement.

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

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

Поделитесь пожалуйста советами?

Answer 1

[Philipp]

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

По итогу у вас будет вырисовываться нечто такое (циклы и бойлерплейт я опустил для наглядности)

<Tasks>
  <Task>
    <Tabs>
      <Tab>
        <AddressList>
          <Address>
            <Properties>
              <Property attributes="attr" />
              ...
            </Properties>
          </Adress>
          ...
        </AddressList>
      </Tab>
      ...
    </Tabs>
  </Task>
  ...
</Tasks>

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