<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Mayannara Carvalho</title>
    <description>The latest articles on DEV Community by Mayannara Carvalho (@mayannara).</description>
    <link>https://dev.to/mayannara</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1664037%2F5c59e3b1-1302-4d27-8b49-b765e7886414.jpg</url>
      <title>DEV Community: Mayannara Carvalho</title>
      <link>https://dev.to/mayannara</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mayannara"/>
    <language>en</language>
    <item>
      <title>Development with Components</title>
      <dc:creator>Mayannara Carvalho</dc:creator>
      <pubDate>Thu, 27 Jun 2024 19:44:55 +0000</pubDate>
      <link>https://dev.to/mayannara/overview-of-development-with-components-4lpe</link>
      <guid>https://dev.to/mayannara/overview-of-development-with-components-4lpe</guid>
      <description>&lt;p&gt;Hi guys, this is my first post, I hope you enjoy ❣️&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;A summary of componentization&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;📝 &lt;strong&gt;What are components?&lt;/strong&gt;&lt;/p&gt;

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

&lt;p&gt;🔍 &lt;strong&gt;Benefits of Development with Components&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxie7yp4jikxoomxk0oe6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxie7yp4jikxoomxk0oe6.png" alt="Image with Benefits of Development with Components" width="800" height="329"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;✍️ &lt;strong&gt;Advantages of Componentization&lt;/strong&gt;&lt;/p&gt;

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

&lt;p&gt;🛠️ &lt;strong&gt;Componentization Efficiency&lt;/strong&gt;&lt;/p&gt;

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

&lt;p&gt;🎯 &lt;strong&gt;Challenges in Development Componentization&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbmt19gmhjt79nc0e9y54.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbmt19gmhjt79nc0e9y54.png" alt="Image with challenges in topics for development componentization" width="800" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🏷 &lt;strong&gt;Technologies for Development with Components&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Frontend:&lt;/strong&gt;  React, Vue.js, Angular...&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Backend:&lt;/strong&gt; Ruby on Rails, Django, Laravel (for creating RESTful APIs)...&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Libs:&lt;/strong&gt; Bootstrap, Material-UI, Tailwind CSS, Storybook, Bit, Styleguidist...&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;To next time 😊&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Book: Modern Front-end Architecture - Ryan Lanciaux&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://awari.com.br/a-importancia-da-componentizacao-no-desenvolvimento-front-end/?utm_source=blog&amp;amp;utm_campaign=projeto+blog&amp;amp;utm_medium=A%20Import%C3%A2ncia%20Da%20Componentiza%C3%A7%C3%A3o%20No%20Desenvolvimento%20Front-End" rel="noopener noreferrer"&gt;https://awari.com.br/a-importancia-da-componentizacao-no-desenvolvimento-front-end/?utm_source=blog&amp;amp;utm_campaign=projeto+blog&amp;amp;utm_medium=A%20Import%C3%A2ncia%20Da%20Componentiza%C3%A7%C3%A3o%20No%20Desenvolvimento%20Front-End&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://blog.betrybe.com/tecnologia/componentizacao-tudo-sobre/" rel="noopener noreferrer"&gt;https://blog.betrybe.com/tecnologia/componentizacao-tudo-sobre/&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://news.cornell.edu/stories/2024/03/doug-mcilroy-53-applied-physicist-programming-pioneer" rel="noopener noreferrer"&gt;https://news.cornell.edu/stories/2024/03/doug-mcilroy-53-applied-physicist-programming-pioneer&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://raphaelfabeni.com/componentes-responsivos/" rel="noopener noreferrer"&gt;https://raphaelfabeni.com/componentes-responsivos/&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://embarcados.com.br/funcoes-e-procedimentos-modularizacao/" rel="noopener noreferrer"&gt;https://embarcados.com.br/funcoes-e-procedimentos-modularizacao/&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="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" rel="noopener noreferrer"&gt;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&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>frontend</category>
      <category>architecture</category>
      <category>learning</category>
      <category>designsystem</category>
    </item>
  </channel>
</rss>
