How to cut a monolithic TypeScript project?

Question

Angular

There is a TS monolithic project written without the use of frameworks.

Monolithic, meaning that the business logic is closely intertwined with the construction of the DOM template, a root DOM element is created, which is thrown into the depths, where other DOM elements of different nesting with their functionality are added.

The problem is that the project structure is very confusing, it is difficult to separate from each other, for example:

The Task menu contains tabs, one of the tabs is a list of addresses, and each address has its own properties, and the properties have their own attributes.

All this is built from top to bottom.
Each subsequent DOM functional element is dependent on the previous one, the referent to the previous HtmlElement is always passed.

The task is to cut the application into angular components in order to separate the construction of the tree (layout template) from the business logic. Ideally, leave the business logic as it is, and execute only the template, design and styles in Angular.

What approach to use in order not to change the core, but try to reuse it, while cutting out the construction of the DOM from the logic.

Please share your tips?

Answer 1

In this case, the reverse generalization approach helps.
You go down to the lowest level and see what is being passed down and why you need a reference to the parent.
If there is no work with the parent, but the code is written just like that, then throw out this reference.
As a result, you will have something like this (I omitted the cycles and boilerplate for clarity)

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

Each component will receive data through a service or through parent attributes.
Your task very much depends on how addresses, properties, attributes, etc. are updated. How much is it fragmented in the backend, is it possible to do partial updates, etc.