What are component based interfaces

Component based interfaces are a new trend in application and web development for all kinds of devices.

They are based on building User Interfaces using small modules, named components. Development starts from bottom to top, starting from the components that serve small functionalities.

The smaller components are then combined in order to make whole screens.

History

Even though this way of creating interfaces started to be used more and more with newer technologies, it's not at all recently discovered.

Articles that described in detail this method were written a few years ago. Even since 2014 articles on this topic were written, such as:

• Toward the adaptation of component-based architectures by model transformation: behind smart user interfaces
• Building Blocks: Utilizing component-based software engineering in developing cross-platform mobile applications

In 2016, in some articles of the Normal Nielsen group (I highly recommend checking out their articles), guides and learning resources about Cards - a small example of a component - and Style-Guides for Front-End.

• Cards: UI-Component Definition
• Front-End Style Guides: Definition, Requirements, Component Checklist

What is the use of components

Modern interfaces are becoming more and more complex, because users have high expectations and demands from the applications and websites they use.

But, with the applications becoming more complex, components also start to get more complex and hard to fix when adding new functionalities. Those effects of the complexity mean more time taken when delivering the applications and websites.

This is why the idea of separating interfaces in a modular manner showed up in order to get to a flexible and solid result.

Those components allow us to isolate application state from backend logic. This means, whole screens can be separated into smaller and simpler components. Each component has a well defined API (Application Programming Interface) and many states (such as different colors, sizes etc). Those functionalities allow the components to be decoupled and be reused in other locations.

How does it work?

First, the components are created (buttons, form fields, titles, wrappers etc) and every state in which a component can be found is defined.

For example, for a button, a file is created, which offers us only that component. Inside the file, backend logic for the component states is created such as: color on hover, color when the user clicks on the button, text/icon inside the button, etc.

After that, intermediary components are created. For example, a Form would be created by using a few smaller components such as: field, button, label, text, title etc.

After intermediary components are created, we can create whole screens using them. For example, a contact page can be created using some intermediary components like: navigation bar, header, sidebar, form and footer.

Maybe at first sight this would seem like a lot of work and overengineering simple things but, in the long term, so much time can be saved when adding functionalities and debugging.