#Angular how to be dealing with Components growing too large in size?

9 messages · Page 1 of 1 (latest)

visual smelt
#

Good Evening, while I was working on a system for creating a workflow editor (similar to reactflow for instance), I wanted to develop this system as flexible as possible:

  • Nodes can contain various Input/output connectors.
  • Each Input can only be connected to one output.
  • Outputs can be connected to various inputs.
  • Outputs can only be connected to inputs. And inputs only to outputs.
  • All Nodes are rendered wthin one component I call "Node-Renderer" in which the Object structure is passed to as an input signal.

All of this is contained in one large Object so I can export/import in JSON alike this here. (PS. Node A's (index is 0 ) Output 0 is connected to Node B's (index is one) Input 0)

[
  {
    title: 'Node A',
    type: '',
    x: 0,
    y: 0,
    input:
    [
       {
          title: 'Input'
          type: '',
          x: 0,
          y: 0,
          reference: '',
        }
    ],
    output:
    [
       {
          title: 'Output',
          type: '',
          x: 0,
          y: 0,
          reference: ['1/0'],
        }
    ],
  },
  {
    title: 'Node B',
    type: '',
    x: 0,
    y: 0,
    input:
    [
       {
          title: 'Input'
          type: '',
          x: 0,
          y: 0,
          reference: '0/0',
        }
    ],
    output:
    [
       {
          title: 'Output',
          type: '',
          x: 0,
          y: 0,
          reference: [],
        }
    ],
  }
]
#

Now, while this system works as I intend, I want to be keeping this system as modular and extensive as possible for future applications.
Ideally turning it into a git submodule to import in other applications as well. So far no problem.

But what if I want to visually and functionally customize this system to a great degree with each application.
All this while maintaining the base structure I have established above in my object structure.

I want to customize what contents every node has, but the node renderer which renders the node component would be identical for each and every Application, thus it would be inside the submodule.
This brings me to the problem that I have to add all my additional behaviour somewhere inside the node component, possibly bloating the script and html to a great degree...
OR I would need to copy a bunch of redundant code, shared by all nodes...

I come from a C# background and usually I would go about it by either inheriting from a base component, creating so called "virtual functions", and overriding them when more functionality is required.
OR I would go ahead and utilize an interface for declaring common types of behaviour shared by all nodes in this example.

#

I noticed that in Angular I usually end up creating a "god component" containing hundreds of lines of code with a large configuration input that allows me to shape my component to how I would like it to be.
But this feels rather bloated, as the length of the HTML and TypeScript just keeps increasing and feels rather inefficient. It becomes a hazzard to manage and the risk is always there that when I change code within my system somehow,
that I need to do it in every application as well, so I want to seperate the project specific components as much as possible from the base systems they rely on.

I am rather new to web development, thus I would really appreciate if anyone had any advice to give for developing such modular systems with flexibility in mind ^^
(If there are any questions about my system, I would gladly answer them!)

stoic star
#

hello folk , basically you just want to decouple more your application for the sake to modularize better and customize it better ?

#

there are some good patterns to do that ...

visual smelt
visual smelt
stoic star
#

try to see something about smart component and dumb component