(Web/View) Components: Should everything be a component?

An article, posted more than one year ago filed in components, design system, structure, todo, programming, development, front-end & html.

Recently I was reviewing a merge request of some front-end code, and a simple div, that changed a bit of the custom appearance of a block of text through a few custom classes, was changed in a call to a view component that then applied the same classes, passed onto the component through a more deeply nested hash.

- <div class="custom-class">
+ <%= TextComponent.new(html: {class: "custom-class"}) do

I’m not sure why people would like to do it, but some ideas:

  • No more HTML / Everything is a component! (reminds me of l’art pour l’art)
  • Ability to analyse the way components are used (we’re not doing this right now)

The drawbacks:

  • Less readable code (perhaps an opinion)
  • Slower execution, instead of rendering a static snippet, code needs to be executed
  • Instead of <div>’itis you get ‘TextComponent’-itis.. we don’t add better semantic or structural information to the page layout

Instead?

Keep the code as is. And perhaps create a ticket (or annotate it with TODO:) that you perhaps want to extract this ‘custom-class’ call into a true reusable component. While I don’t think there is something inherently bad with offering the option to override or add some custom classes to a component, a component should only be used if it adds structural meaning either from the developer’s side of things or (better) from the consumer’s side of things (e.g. semantic output that can be processed by e.g. screen readers)

Enjoyed this? Follow me on Mastodon or add the RSS, euh ATOM feed to your feed reader.

Op de hoogte blijven?

Maandelijks maak ik een selectie artikelen en zorg ik voor wat extra context bij de meer technische stukken. Schrijf je hieronder in:

Mailfrequentie = 1x per maand. Je privacy wordt serieus genomen: de mailinglijst bestaat alleen op onze servers.