Introduction
Component-based architecture focuses on the decomposition of the design into individual functional or logical components that represent well-defined communication interfaces containing methods, events, and properties. It gives the problem a higher degree of abstraction and divides it into sub-problems, each with its own set of component divisions.
Component-Based architecture focuses on the decomposition of the design into logical components which contain events, methods and properties. How ?
What is a Component?
A component can be thought of as a small feature that makes up a part of the user interface.
If I were to explain a component within the framework of Facebook's UI , where the React.js released by them on 2013 , A chat window would be a component, a comment feed would be another component, and a continually updated friend list or the likes would be yet another component.
Although all of these elements share the same space, but interact in different ways. Components are independent, with their own structure, methods, and APIs. Components can also be reused and "reposted" into interfaces at any time. The independent nature of components allows for developers to create a UI with many different moving parts.
Component Mechanism
Components are based on the concept of AJAX requests, which are client-side calls the server that allow the DOM to be dynamically updated without the need for a page refresh. Each component has its own interface that may communicate with the server and update its own interface. Because components are independent, one component can be refreshed without affecting the whole UI.
Principles of Component−Based Design
A component-level design can be represented using a graphical, tabular, or text-based intermediary representation that can be translated into source code. To help us avoid causing errors, the design of data structures, interfaces, and algorithms should follow well-established rules.
The software system is broken down into component units that are reusable, cohesive, and encapsulated.
Each component has its own interface that describes the ports that are required and provided; each component hides the details of its implementation.
A component should be extended without the need to make internal code or design modifications to the existing parts of the component.
Depend on abstractions component do not depend on other concrete components, which increase difficulty in expendability.
Connectors connected components, specifying and ruling the interaction among components. The interaction type is specified by the interfaces of the components.
Components interaction can take the form of method invocations, asynchronous invocations, broadcasting, message driven interactions, data stream communications, and other protocol specific interactions.