Development with Components
Tags: frontend, architecture, learning, designsystem
Published: 2024-06-27 19:44:55

Hi guys, this is my first post, I hope you enjoy ❣️

## **A summary of componentization**

It was created by Doug Mcilroy, responsible for the company Nato Software in 1968. His idea was to develop code components to facilitate the development of other applications by reusing code.

📝 **What are components?**

**1.** It is a composition unit with contractually specified interfaces and only explicit context dependencies.
**2.** Can be used independently and be composed of other parts. 
**3.** An unknown implementation of functionality, which may be composed of other parts conforming to a component model.
**4.** It is an independent set of reusable services.
**5.** They are self-contained artifacts, which describe and/or perform specific functions and have clear interfaces, appropriate documentation, and a defined reuse condition.
**6.** Components must conform to a component model.

🔍 **Benefits of Development with Components**


![Image with Benefits of Development with Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xie7yp4jikxoomxk0oe6.png)

✍️ **Advantages of Componentization**

**Maintenance -** Ease and speed when carrying out maintenance.
**Minor impacts -** No need to change various parts of the code.
**Code reuse -** Reuse of components in different parts of the project.
**Easy understanding -** Simpler to understand what that component does.
**Code pattern -** Helps you locate problems more easily.
**Productivity increase -** More agile development due to code reuse.

🛠️ **Componentization Efficiency**

**1.** Planning and architecture, define a solid architecture for the project.
**2.** Separation of responsibilities, each component is responsible for a single functionality.
**3.** Weak Coupling promotes flexibility and maintainability.
**4.** Unitary tests, ensure the correct use and functioning of the component.
**5.** Clear documentation, documentation must describe the purpose, clearly and comprehensively.

🎯 **Challenges in Development Componentization**


![Image with challenges in topics for development componentization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmt19gmhjt79nc0e9y54.png)

🏷 **Technologies for Development with Components**

- **Frontend:**  React, Vue.js, Angular...
- **Backend:** Ruby on Rails, Django, Laravel (for creating RESTful APIs)...
- **Libs:** Bootstrap, Material-UI, Tailwind CSS, Storybook, Bit, Styleguidist...



That's it guys, I hope you like this brief content and I'll leave here references that I used for the post and some tips for more knowledge.

To next time 😊

- Book: Modern Front-end Architecture - Ryan Lanciaux

- https://awari.com.br/a-importancia-da-componentizacao-no-desenvolvimento-front-end/?utm_source=blog&utm_campaign=projeto+blog&utm_medium=A%20Import%C3%A2ncia%20Da%20Componentiza%C3%A7%C3%A3o%20No%20Desenvolvimento%20Front-End

- https://blog.betrybe.com/tecnologia/componentizacao-tudo-sobre/

- https://news.cornell.edu/stories/2024/03/doug-mcilroy-53-applied-physicist-programming-pioneer

- https://raphaelfabeni.com/componentes-responsivos/

- https://embarcados.com.br/funcoes-e-procedimentos-modularizacao/

- https://medium.com/pretux/atomic-design-o-que-%C3%A9-como-surgiu-e-sua-import%C3%A2ncia-para-a-cria%C3%A7%C3%A3o-do-design-system-e3ac7b5aca2c