var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var g=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),f=(i,e)=>{for(var o in e)s(i,o,{get:e[o],enumerable:!0})},l=(i,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!b.call(i,t)&&t!==o&&s(i,t,{get:()=>e[t],enumerable:!(a=d(e,t))||a.enumerable});return i};var y=(i,e,o)=>(o=i!=null?p(u(i)):{},l(e||!i||!i.__esModule?s(o,"default",{value:i,enumerable:!0}):o,i)),w=i=>l(s({},"__esModule",{value:!0}),i);var r=g((x,c)=>{c.exports=_jsx_runtime});var C={};f(C,{default:()=>T,frontmatter:()=>v});var n=y(r()),v={title:"Component-based Architecture Best Practices",publishedAt:"2020-11-01",summary:"Learn about the best practices to follow for building robust and reusable web components in any front-end library or framework.",category:"Web Development"};function h(i){let e=Object.assign({p:"p",ul:"ul",li:"li",ol:"ol",h2:"h2",a:"a",span:"span",code:"code",strong:"strong"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:"Front-end tools like React, Angular, and Vue provide us with a component-based architecture. We can build complex user interfaces from smaller pieces called components which are easier to manage. If we design our components properly, we can take advantage of the benefits of components. One of those benefits is reusability."}),` `,(0,n.jsx)(e.p,{children:"When building components, they should be decoupled, focused on a single responsibility, and well-tested. This can be difficult when we hurry to meet deadlines."}),` `,(0,n.jsx)(e.p,{children:"We should avoid doing the following:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"building big components with many responsibilities"}),` `,(0,n.jsx)(e.li,{children:"building tightly coupled components"}),` `,(0,n.jsx)(e.li,{children:"building components with no unit tests."}),` `]}),` `,(0,n.jsx)(e.p,{children:"Avoiding these bad practices will help us reduce technical debt. Once technical debt accumulates, it makes it hard to modify existing functionalities or create new functionalities."}),` `,(0,n.jsx)(e.p,{children:"Good components should apply the following principles:"}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsx)(e.li,{children:"Single Responsibility"}),` `,(0,n.jsx)(e.li,{children:"Loose Coupling"}),` `,(0,n.jsx)(e.li,{children:"Encapsulation"}),` `,(0,n.jsx)(e.li,{children:"Composition"}),` `,(0,n.jsx)(e.li,{children:"Reusability"}),` `,(0,n.jsx)(e.li,{children:"Testability"}),` `,(0,n.jsx)(e.li,{children:"Categorization"}),` `,(0,n.jsx)(e.li,{children:"Readability"}),` `]}),` `,(0,n.jsxs)(e.h2,{id:"1-single-responsibility",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#1-single-responsibility",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"1. Single Responsibility"]}),` `,(0,n.jsx)(e.p,{children:"The single-responsibility principle (SRP) is a programming principle that states that every module, class or function in an application should have responsibility over only a single part of that application's functionality."}),` `,(0,n.jsx)(e.p,{children:"For web components, this means that a component has a single responsibility when it implements one responsibility, or when it does one thing. This gives the component only one reason to change."}),` `,(0,n.jsx)(e.p,{children:"Some examples of a component's responsibility could be to render a list of items, to make a HTTP request, or to draw a chart. A component should pick only one responsibility and implement it. When modifying the way a component implements its responsibility, it has only one reason to change. If the component's responsibility is to render a list of items, then it's one reason to change could be when the limit to the number of items rendered needs to change."}),` `,(0,n.jsx)(e.p,{children:"When a component has only one responsibility, it makes it easier to code, modify, reuse, and test. The size of the component is reduced and the component is given a laser focus."}),` `,(0,n.jsx)(e.p,{children:"Components with many responsibilities should be split by individual responsibility into separate components."}),` `,(0,n.jsx)(e.p,{children:"When a component has multiple responsibilities, it is fragile, and has many reasons to change. This is risky because changing the component for one reason can affect how other responsibilities are handled by that same component. We want to avoid unintentional side effects because they are hard to predict and handle. We want the modification of our component to happen in isolation so that it doesn't inadvertently affect anything else."}),` `,(0,n.jsx)(e.p,{children:"The worst case scenario of building a component with multiple responsibilities is creating a God component. This is an anti-pattern (a counterproductive pattern). God components tend to know too much and do too much. God components should be broken down by their individual responsibilities into separate easy to manage components."}),` `,(0,n.jsxs)(e.h2,{id:"2-loose-coupling",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#2-loose-coupling",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"2. Loose Coupling"]}),` `,(0,n.jsx)(e.p,{children:"Coupling defines the degree of dependency between two or more components. Loose coupling happens when an application's components have very little or no knowledge about other components."}),` `,(0,n.jsx)(e.p,{children:"On the contrary, tight coupling happens when an application's components know many details about each other and depend on each other. Tight coupling makes it difficult to modify a component because it is highly dependent on other components. Just one small change in one component could break several other components or require that they also be updated. Therefore, we want the relationships between our components to be loosely coupled."}),` `,(0,n.jsx)(e.p,{children:"The benefits of loose coupling are:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Making changes to one component does not affect the other."}),` `,(0,n.jsx)(e.li,{children:"Components can be replaced without impacting other components."}),` `,(0,n.jsx)(e.li,{children:"Components are reusable across the application."}),` `,(0,n.jsx)(e.li,{children:"Testing is made easier."}),` `]}),` `,(0,n.jsxs)(e.h2,{id:"3-encapsulation",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#3-encapsulation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"3. Encapsulation"]}),` `,(0,n.jsx)(e.p,{children:"A components should not know about or rely on another component's internal implementation details. Components that are well encapsulated hide their internal structure from other components. This isolates the component. However, components still need to communicate with each other. To accomplish this in React, we can provide props to change the behavior of a component. To accomplish this in Angular, we can provide inputs. Inputs and props should be as plain and raw as possible."}),` `,(0,n.jsx)(e.p,{children:"An example of broken encapsulation is when a component's internal structure spreads across an application. If a child component is permitted to directly update the state of the parent component, encapsulation is broken. This is because the child component knows too many details about its parent."}),` `,(0,n.jsx)(e.p,{children:"What details does the child know about its parent in this example?"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"The child knows that its parent is a stateful component."}),` `,(0,n.jsx)(e.li,{children:"The child knows the parent's state object structure."}),` `,(0,n.jsx)(e.li,{children:"The child knows how to update the parent's state."}),` `]}),` `,(0,n.jsxs)(e.h2,{id:"4-composition",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#4-composition",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"4. Composition"]}),` `,(0,n.jsx)(e.p,{children:"Composition refers to combining components to create a bigger component. Composition is like playing with Legos. It refers to taking a set of small pieces, combining them, and creating something bigger."}),` `,(0,n.jsx)(e.p,{children:"The Single Responsibility Principle we saw earlier described how to split responsibilities into components. The Encapsulation Principle that we just saw described how to organize components in isolation. The Composition Principle describes how to glue the whole system of components back together."}),` `,(0,n.jsxs)(e.p,{children:["An example is having an ",(0,n.jsx)(e.code,{children:""})," component that has had its responsibilities divided into four sub-responsibilities, creating four new components: ",(0,n.jsx)(e.code,{children:""}),", ",(0,n.jsx)(e.code,{children:""}),", ",(0,n.jsx)(e.code,{children:""})," and ",(0,n.jsx)(e.code,{children:""}),"."]}),` `,(0,n.jsxs)(e.p,{children:["Composition then glues back ",(0,n.jsx)(e.code,{children:""})," from these four specific components. The ",(0,n.jsx)(e.code,{children:""})," component becomes responsible for rendering the ",(0,n.jsx)(e.code,{children:""}),", ",(0,n.jsx)(e.code,{children:""}),", ",(0,n.jsx)(e.code,{children:""})," and ",(0,n.jsx)(e.code,{children:""})," components. Composition has helped us to make the ",(0,n.jsx)(e.code,{children:""})," component adhere to the Single Responsibility Principle by allowing each of its children implement sub-responsibilities."]}),` `,(0,n.jsx)(e.p,{children:"Composition has helped us build our application with a very clean and simple organization. Components that are built with composition in mind are able to reuse common logic. This helps us to achieve the next principle, reusability."}),` `,(0,n.jsxs)(e.h2,{id:"5-reusability",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#5-reusability",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"5. Reusability"]}),` `,(0,n.jsx)(e.p,{children:"The Reusability Principle allows us to write a component once and use it many times. We want to make things work and reuse their functionality, not reinvent how they work."}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.strong,{children:"Don't repeat yourself (DRY)"})," principle can help us achieve reusability. It states that every piece of information should have one single representation within an application."]}),` `,(0,n.jsx)(e.p,{children:"A lack of reusable components will make the application harder to maintain without providing any benefits. Without reusability in place, a piece of application logic will not be self-contained in one place. This means that an update to that logic will mean updates to many parts of the application."}),` `,(0,n.jsx)(e.p,{children:"Components that have only one responsibility are the most reusable ones. However, when a component has many responsibilities, reusing it becomes complicated. You may want to reuse only one of its responsibilities, but you will be forced to accept all of its other responsibilities along with what you need."}),` `,(0,n.jsxs)(e.h2,{id:"6-categorization",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#6-categorization",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"6. Categorization"]}),` `,(0,n.jsx)(e.p,{children:"Part of having a good component architecture involves properly categorizing components. Our application should make a distinction between Smart and Dumb components, or Container and View components. Smart or Container components focus on how things work. Dumb or View components focus on how things look."}),` `,(0,n.jsx)(e.p,{children:"Smart components:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Manipulate data: fetching, manipulating, and passing down data."}),` `,(0,n.jsx)(e.li,{children:"Are stateful: managing application state (Redux, etc) and re-rendering needs."}),` `,(0,n.jsx)(e.li,{children:"Do not include styling."}),` `]}),` `,(0,n.jsx)(e.p,{children:"Dumb components:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Focus solely on the styling and presentation of elements."}),` `,(0,n.jsx)(e.li,{children:"Accept inputs/props to allow them to be dynamic and reusable."}),` `,(0,n.jsx)(e.li,{children:"Have no dependencies."}),` `,(0,n.jsx)(e.li,{children:"Have no application state."}),` `]}),` `,(0,n.jsx)(e.p,{children:"Examples of dumb components are inputs, modals, buttons, dropdowns, etc. A dumb component may have local state for handling user interactions, but it will not know about the state of the application's data."}),` `,(0,n.jsx)(e.p,{children:"By making this distinction between smart and dumb components evident in how we name them and organize them within our file hierarchy, we will have a better designed application. Presentation responsibilities will be organized in dumb components. Stateful and business logic responsibilities will be organized in smart components."}),` `,(0,n.jsxs)(e.h2,{id:"7-testability",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#7-testability",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"7. Testability"]}),` `,(0,n.jsx)(e.p,{children:"A testable component is one that is easy to test. We should test that a component returns the expected output for a given input. We should aim for component purity because it makes components easier it is to test. A pure component is like a pure function, it will always return the same same output for the same input."}),` `,(0,n.jsx)(e.p,{children:"It's very difficult and time-consuming to manually verify that each component is working as expected every time we make a change. Bugs are inevitable without proper unit tests for each component. Unit tests allow us to automate the tedious task of component testing. Every time we modify a component, we can re-run it's unit tests to verify that they still pass."}),` `,(0,n.jsx)(e.p,{children:"Unit tests don't only help us reduce bugs, they also help us to have a good component architecture. If a component in our application is not testable or difficult to test, it means that the component has not been designed properly."}),` `,(0,n.jsx)(e.p,{children:"One of the main reasons that developers do not write tests for their components is because their components are not testable. When a component does not adhere to the principles mentioned in this article, testing it becomes very difficult and frustrating. As a result, the developer gives up writing unit tests for it."}),` `,(0,n.jsxs)(e.h2,{id:"8-readability",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#8-readability",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"8. Readability"]}),` `,(0,n.jsx)(e.p,{children:"A readable component is one in which it is easy to understand what it does. A readable component has readable code within that component. This allows developrs to quickly understand the responsibility of a component when looking at its code."}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Aim for clarity over brevity when naming things."}),` `,(0,n.jsx)(e.li,{children:"Name components by their responsibility."}),` `,(0,n.jsx)(e.li,{children:"Include code comments in components."}),` `]}),` `,(0,n.jsxs)(e.p,{children:["When naming components, be specific. Consider what their responsibility is. Instead of ",(0,n.jsx)(e.code,{children:""}),", consider ",(0,n.jsx)(e.code,{children:""}),", ",(0,n.jsx)(e.code,{children:""}),", ",(0,n.jsx)(e.code,{children:""}),", ",(0,n.jsx)(e.code,{children:""}),", etc."]}),` `,(0,n.jsxs)(e.h2,{id:"conclusion",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#conclusion",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,n.jsx)(e.p,{children:"In conclusion, the eight principles for a good component architecture that we covered are: single responsibility, loose coupling, encapsulation, composition, reusability, testability, categorization, and readability. By applying these principles when designing components, you can ensure a robust and effective component architecture in your applications."})]})}function k(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(h,i)})):h(i)}var T=k;return w(C);})(); ;return Component;