Standard data types

Universal components are components that are not dependent on a specific data source to determine its behavior. The only thing that they what matters is the shape of the data, this usually happens when the component is made to be used in several different places (there is even a possibility between using it between different sites) without having to read from some API specific, i.e. without any external dependencies (a.k.a implicit dependency).

An example of a universal component is the Fashion Store ProductShelf, let's take a look at it;

export interface props {
  title: string;
  products: Product[] | null;
  itemsPerPage?: number;
}

function ProductShelf({
  title,
  products,
}: props) {
  // ...implementation
}

Note that although the ProductShelf depends on a "Product" list to work, it does not depend on what is the source of the data that will provide this information. This is only possible because the Product type is a type created by a central entity on schema.org. Another possible way of thinking about our ProductShelf would be to write an Inline Loader and make this inline loader read the API data of an e-commerce in specific (e.g Shopify) and only then render the ProductShelf.

This is totally possible and doable, however, it should be noted that when this is done, our business user loses the possibility of, for example, switch datasource from Shopify to VTEX, which is a very powerful to avoid lock-in on a specific platform. In that sense, one universal component causes dependencies on types to be inverted, while instead of the component depending on the API, actually the component only depends on the data format and allows loaders to be implemented in order to return this type in common, making it possible to choose the data loader when configuring component properties in the Admin Editor.

In fact, our ProductShelf has at least four distinct implementations for read products from APIs and even different e-commerce platforms, they are: VNDAProductList, VTEXProductList, VTEXLegacyProductList, It is ShopifyProductList

This makes Universal Components something that has value and usability. very large compared to components that depend on data from APIs!

Further reading

On this page