How To Think About Web Components

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:

Holistic or holistic is an adjective that classifies something related to holism, that is, that seeks to 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 Articles that has the responsibility of rendering a list of articles, which can be another ArticleItem 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 position: fixed as property of my component, will not it fu** with my UI?

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 middle say how it should be rendered, 4 from margin-left, 5 from margin-bottom. Your component need not have margin, even spacing because it does not know who will use it or where it will be inserted. The important thing is: he needs to do his part.

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 middle where it is included. FrIst — 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.

Local Middle: This is where your component is inserted into the application. An Articles component may be inserted inside a News component, which may be inserted inside a main App component. Think about the local environment as to your application itself. Components, Containers, etc.

Global Middle: is the middle that will be responsible for receiving the content. The environment where your application is displayed. Your components must deliver their content regardless of where they are being rendered, consumed. 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!