Lego components

Most modern frontend JavaScript frameworks provide some sort of support for component-based development. This is an incredibly important step in the direction of development for the web. Components provide a way to write small parts with a consistent API that can easily be orchestrated as part of a larger screen, application, or system. Imagine each component as a Lego piece—you can use it wherever you want and it will keep the same shape and behavior.

A component can be an HTML part, a JavaScript piece of code, a service, and so on. Any reusable part should be interpreted as a component.

A little puzzle

Let's practice a little how to think and abstract one application into a few components. Here's some web template with some sections:

Now, it's time to think.

How many sections are similar?

• Buttons are very similar; just the text/color can change
• Menu options can be a reusable single component
• Main page sections are the same; just the content changes
• The header can be decoupled from...