Currently, web components are up. Much has been heard about modular UI creation, componentization of layout structure and related subjects. It turns out that creating a component is not just having a code that generates a part of a UI and that’s it! No! Components go way beyond that and I’ll show you why. FIRST Principle Focused — Independent — Reusable — Small — Testable I really enjoy applying this principle to Web Components. A component should have focus, unique responsibility, do one thing and very well. It must be independent and reusable. There is no sense in creating a component that works on just one specific project. Your component should be small, if it starts to grow, try to create a subcomponent that makes sense within a context, so you can use it whenever you need it. It needs to be testable, that will guarantee its perfect functioning. Holistic vision Concept: or is an adjective that classifies something related to holism, that is, that seeks to Holistic holistic understand the phenomena in their totality and globality. Let’s apply this concept to our Web Components. A component must have style — CSS, content — HTML and behavior — Javascript. When inserted into a context, let’s call it ‘middle’, it needs to do its job and ensure its functioning regardless of the medium it is inserted. If you have a component called that has the responsibility of rendering a list of articles, which can be another component, it should do this in whatever middle it is inserted, either inside a section, footer, the idea is you guarantee That it will render correctly. But what about his style? You said that it needs to have style, content and behavior, if I put a as property of my component, will not it fu** with my UI? Articles ArticleItem position: fixed A component must have style as to its own visual character. It may have text color, background color, border, but the main idea is: Your intrinsic style can not interfere with the environment in which it is inserted. Let the say how it should be rendered, , Your component need not have margin, even spacing because The important thing is: he needs to do his part. middle 4 from margin-left 5 from margin-bottom. it does not know who will use it or where it will be inserted. He needs to render what he has as responsibility. The content of it is crucial to its operation and should not be harmed by the where it is included. Fr st — middle I Independent. Middle — Local and Global When you are going to create a component, have you stopped to think about who will use it and where will it be used? I will define objectively and exemplify what I mean by local and global . middle : This is where your component is inserted into the application. An component may be inserted inside a component, which may be inserted inside a main component. Local Middle Articles News App Think about the local environment as to your application itself. Components, Containers, etc. : is the middle that will be responsible for receiving the content. Your components must deliver their content regardless of where they are being rendered, consumed. Global Middle The environment where your application is displayed. It is about responsiveness, accessibility, and you must ensure that it works on a global basis. Finally, whenever you create a component you need to think about who will consume it, who will use it, not just think about what task it will do. Think of your application as a global component that has the responsibility of rendering and working in whatever middle it enters. I guarantee that in this way, creating components will be much more pleasurable and will have much more satisfactory results when it comes to usability and accessibility. Not make sense your component make 10000 articles in a very short time if you do not guarantee that the end user will have access to your content, which is . the main idea of the entire web Show your support Clapps show how much you appreciated my story!
