What is componentization

What is componentization? Different people have different ideas about componentization, and my idea of componentization is a programming idea, a way of breaking up code. For front-end development, anything from a page to an HTML tag is a component. The concept of componentization is not difficult to understand, but the idea of componentization.

Ii. How to understand componentization

Before we understand componentization, we need to talk about why we have the idea of componentization and what the problem that componentization solves. Generally speaking, front-end componentization is for code reuse and improving r&d efficiency. There are two questions to consider when designing components:

  1. How to disassemble the component? (break)
  2. How do components work? (combination)

Therefore, I put ‘What is componentization? ‘Divided into two problems of splitting and combining.

How to split components

We have different understanding of componentization and different ways of component splitting. Therefore, the most important thing for component splitting is to have a unified method and principle of component splitting. Combining ant Financial’s front-end asset market division and Vue componentized application concept, I summarized four components: basic component, business component, block component and page component.

  • Base component: refers toinput,buttonThis base tag, as well as the generic UI components encapsulated by ANTD
  • Business Components: A business abstract UI composed of base components with corresponding classes encapsulated at the back end
  • Block components: UI blocks composed of base component components and business components
  • Page component: The final page presented to the user

The relationship of the four components is like that of points, lines, surfaces and bodies in mathematics, where bodies are made up of faces, which are made up of lines, which are made up of points. Take the example of a chat page divided into a message list and a function bar to learn, you can refer to the wechat chat page to imagine the UI.

  • Business components:
// MessageItem 
<li>// User profile picture<img />/ / user name<h3>user name</h3>// Message content<p>Say a point what</p>
</li>
Copy the code
  • Block components:
// MessageList
<ul>
    {messages.map(message => <MessageItem message={message})}
</ul>
Copy the code
// FunctionBar
<div>// Message input box<input />// Send a message<button>send</button>
</div>
Copy the code
  • Page components
// Chat 
<main>
    <MessageList messages={messages} />|
    <FunctionBar />
</main>
Copy the code

How to combine the components

The combination of components ACCORDING to the data transfer mode of components and the logical processing mode of components, I also summed up two types: progressive and discrete.

  • Progressive: Data is passed layer by layer, and each component is responsible for its own business logic
  • Discrete: Data is processed in a unified manner and service logic is processed in a centralized manner

In fact, the two combination modes of progressive and discrete correspond to the language characteristics of Vue and React JS frameworks respectively. Vue offers a two-way v-Model data binding mechanism that makes it easy to work with data between the upper and lower levels of a component, is better suited to progressive, and it pretends to be a progressive JavaScript framework. React advocates functional programming and is a JavaScript framework with incomplete two-way data binding. It usually requires onChange events to update the parent state to update the View, so React is more suitable for discrete combination. Of course, both approaches can be implemented using both frameworks.

4.1 Progressive combination mode

The composition of our example of a split component is incremental, which has the advantage of having a clear division of responsibility for the component. The disadvantage is the lack of flexibility in communication between non-adjacent components.

4.2 Discrete combination mode

Rewrite the chat page in discrete form:

// MessageList
<ul>
    {this.props.children}
</ul>
Copy the code
// Chat 
<main>
    <MessageList>
          messages.map(message => <MessageItem message={message} />
    </MessageList>
    <FunctionBar />
</main>
Copy the code

I changed the list of MessageList and Chat from Chat -> MessageList -> MessageItem to Chat -> MessageItem. This reduces the path of data passing and callBack passing.

4.3 Progressive && Discrete

Both the progressive and discrete combination methods have their own advantages and disadvantages. The one-way data transmission can be progressive, but the best combination method is to achieve the progressive method on the basis of guaranteeing the callBack path.

What’s the last word

The article does not specifically say what is componentization and what is componentization thought, in fact, whether componentization thought or object oriented, as long as the programming thought is inseparable from the core principle of software design: high cohesion and low coupling. Componentization may not be suitable for every team or project, because there are many undesirable situations in real development, such as a small project with less repetitive code, a design team that is too talented to accept componentization, and so on. But componentization is the most important part of front-end engineering, and what better way to improve team effectiveness than componentization?