The Architecture of the Component
The idea of the component is widely applied in frameworks and elsewhere. The most famous rule for developing complex software is that it’s not recommended to create complex software.
Once it turns to be complex, then you should split it into simpler parts, connecting in the most evident way.
The most efficient architecture is making the complex simple.
The user interface can be split into visual components.
It includes the Top navigation, User information, Follow suggestions, Submit form, and messages.
Components encompass subcomponents. For instance, a clickable user picture can also be considered a component.
As a rule, a component is a separate visual entity, which can be described in terms of how it interacts with the page.
Any component should have:
- DOM structure, handled only by its class
- CSS styles, that are applied to the component
- API: class methods, events for interacting with other components.
There are multiple development methodologies and frameworks for building components.
Built-in browser capabilities are provided by web components for that. For defining custom HTML elements are used Custom Elements. For creating an internal DOM for the component, which is concealed from others- Shadow Dom.
For declaring styles that are only used inside the component’s Shadow DOM-CSS Scoping.
Minor stuff and Event Targeting for making custom elements better suit the development.