Na prática + Reflita

Na Prática

Você acabou de ver como front-end, back-end, APIs, cache e cookies trabalham juntos para fazer um produto digital funcionar. Agora, vamos colocar esse conhecimento em prática com um exercício simples mas poderoso.

Escolha um app ou site que você usa no dia a dia: Instagram, iFood, Spotify, o que preferir. Abra ele e faça a seguinte análise:

Para cada ponto, anote suas observações. Não precisa ser formal, pode ser no bloco de notas, em um post-it, no seu caderno. O importante é o exercício de olhar para o produto com essa nova lente. Você vai perceber que design não para na interface. Ele depende de toda a arquitetura que sustenta o produto.

Um exemplo do nível esperado: "iFood, ao confirmar o pedido apareceu um spinner por uns 2 segundos; deve ser o servidor validando o pagamento e criando o pedido no banco." Não precisa acertar a tecnologia exata, o que importa é conectar o que você vê na tela com o que provavelmente está acontecendo nos bastidores.

Se você quiser ir além: tente descobrir se o site usa REST ou GraphQL. No computador, abra a versão web do produto, aperte F12 para abrir as DevTools do navegador, vá na aba Network (Rede), filtre por Fetch/XHR e use o site normalmente. Se quase todas as chamadas vão para um mesmo endereço com "graphql" no nome (o Instagram, por exemplo, chama /graphql/query o tempo todo), é GraphQL. Se você vê várias URLs diferentes com cara de recurso (/users/123, /posts?limit=10), é REST. Alguns produtos misturam os dois estilos, e tudo bem: o que importa é você reconhecer o padrão. Um cuidado: o jeito como a tela carrega (em partes ou tudo de uma vez) não revela o estilo de API. Isso depende muito mais de decisões do front-end, como skeleton screens e o carregamento preguiçoso de imagens (o lazy loading, que você vai conhecer no Módulo 3), do que de a API ser REST ou GraphQL.