Componentes universais são componentes que não dependente de uma fonte específica de dado para determinar seu comportamento. A única coisa que lhes importa é o formato do dado, isso geralmente acontece quando o componente é feito para ser usado em vários lugares diferentes (inclusive há possibilidade entre usa-lo entre sites distintos) sem que seja necessário ler de alguma API específica, ou seja, sem nenhuma dependência externa (a.k.a implicit dependency).

Um exemplo de um componente universal é a ProductShelf da loja Fashion, vamos dar uma olhada nele;

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

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

Perceba que, apesar da ProductShelf depender de uma lista de “Product” pra funcionar, ela não depende de qual é a fonte do dado que vai prover essa informação. Isso só é possível porque o tipo Product é um tipo criado por uma entidade central no schema.org. Uma outra forma possível de pensar nossa ProductShelf seria escrever um Inline Loader e fazer com que esse inline loader leia os dados da API de um e-commerce em específico (e.g Shopify) e só então renderizar a ProductShelf.

Isso é totalmente possível e factível, no entanto, deve-se atentar que quando isso é feito, o nosso usuário de negócio perde a possibilidade de, por exemplo, trocar a fonte de dados de Shopify para VTEX, o que é uma feature bastante poderosa para evitar lock-in em uma plataforma especifica. Nesse sentido, um component universal faz com que as dependencias nos tipo sejam invertidas, ao invés do componente depender da API, na verdade o componente depende apenas do formato do dado e permite com que loaders sejam implementados de forma a retornarem esse tipo em comum, fazendo com que seja possível escolher o dado loader ao configurar as propriedades do componente no Editor Admin.

De fato, nossa ProductShelf possui ao menos quatro implementações distintas para ler produtos de APIs e até mesmo plataformas de e-commerce distintas, são elas: VNDAProductList, VTEXProductList, VTEXLegacyProductList, It is ShopifyProductList

Isso faz com que Universal Components sejam algo que tem um valor e usabilidade muito grande comparado a componentes que dependem de dados de APIs!

​
Leitura sugerida

Componentes universais faz com que a interoperabilidade entre plataformas seja possível e o mais fácil possível. Leia mais sobre como criar loaders abaixo nos nossos tutoriais;

Was this page helpful?

AnnotationsUsing secrets