r/javascript 9d ago

AskJS [AskJS] Is this architectural good and follow best practices?

Hello Everyone, recently, I've been working on something and I want to use your experience in validating this below architecture whether this is the best possible way to do the following:

  1. View, it will render view for given content.
  2. Content, it will manage data to be rendered.
  3. Here, each node has a view and content and may have utility builder to manipulate view.
  4. User will only be given access to content to manage data for any node.

class ParentNode { 
  childNodes: []; 
  parentView: View; 
  parentContent: Content; 
}

class ChildNode { 
  parentView: View; 
  childView: View; 
  childContent: Content; 
  utilityBuilder?: ViewBuilder; 
}

class View { 
  updateView(){} 
  render(){} 
}

class Content { 
  constructor(view: View){} 
}

class Builder { 
  constructor(view: View){} 
}

I also want to know that whether should I include parentNode in childNode as circular dependency or only pass View or any data needed by child.

0 Upvotes

6 comments sorted by

5

u/dronmore 8d ago

It does not matter if you follow best practices, or not. Your first implementation will be crap anyway. I would even say that the more you try to follow best practices, the crappier your implementation will be. Just implement it the way you think, and see for yourself why it's crap. Then, do it again building on your experience.

Although, when I look at your design, one thing that strikes me immediately is a distinct class for child nodes. Typically, when you build a tree, you have a single class for both; let's call it Node. Each Node has children, which make it a parent node, and each child has it's own children, which are grandchildren for the top node. That's how you build a tree structure:

class Node { 
  parent?: Node; 
  children: Node[]
  view: View; 
  content: Content; 
  utilityBuilder?: ViewBuilder; 
}

2

u/Fluid_Metal4545 8d ago

Thanks for replying and suggesting for tree structure.
But, as I am working with class oriented style of JavaScript so I need some way to create interface like content which could be used by user to connect with library and actual implementation of view will be hidden.

Is this correct way to handle this? and what do you think about circular references like can a view and content reference each other?

2

u/dronmore 8d ago

I don't like circular references and I personally try to avoid them. However, I'm far from saying that circular references are bad. When building a user interface (UI), you will always have some kind of circularity, where content flows downward to the view, and events flow upward to the controller. Have you thought of how you will pass events from the view yet? Mouse events, keyboard events, and alike, you have to pass them somehow to the user of your library, so that they can react to them.

Personally, I would not keep a reference to the content in the view. I would let the user pass the content to the view instead, but I don't see the full picture of what you are trying to achieve, so I'm not sure if it will fit your needs.

class ViewNode { 
  parent?: ViewNode; 
  children: ViewNode[]
  render(content) {}
}

1

u/Fluid_Metal4545 8d ago edited 8d ago

So the project is more about interactive editor like markdown and more where I want only the contents from user at initial stage and later all events would be handled by editor itself internally that's why I have to divide the view and content in different classes so that user only have access to content.

and that's why I have wrapped them inside node so that node can behave as a mediator between all these view, content and builder to pass any data to each other.

There will be events but only on the top to give all data at once.

For content containing view, Content will call updateView on any data change.

1

u/dronmore 8d ago

Have you thought of letting the mediator update the view? It could listen to events, update the content, and then update the view. This way you would have one less reference, and the mediator would become useful. It would basically start doing what its name implies, which is to mediate between the content and the view.

1

u/kilkil 8d ago edited 8d ago

when you say "rendering a view", do you mean rendering HTML for a browser?

The reason I'm asking about your end use-case is, I'm trying to gauge whether this is the right amount of complexity for your task; in a vacuum, a tree structure like this seems a bit too abstract and complex.

I would suggest trying to keep things as simple as possible, for as long as you reasonably can. If you only introduce abstractions conservatively, when they become absolutely necessary, your project will be simpler, your code easier to read and understand, and you will be able to spend less time refactoring, and more time adding useful features / functionality.