ReactJS CE - Agregação de Dados no Frontend

Transcript

1. @tsirlucas Agregação de Dados no Frontend: Simplificando a Integração com Microserviços Explorando soluções e fi cientes para gerenciar o fl uxo de dados advindos de microserviços
2. Lucas :D • Desenvolvedor Frontend Senior na Chili Piper (concorrente do Calendly) • Trabalho com React desde 2017 • Entusiasta de astronomia e computação quântica • Pai de pet • @tsirlucas em todas as redes sociais Quem sou eu?
3. O que é? Combinar e organizar dados de várias fontes (serviços) para exibi-los de maneira que faça sentido para o usuário. Agregação de dados
4. O problema do N+1 Ocorre quando uma aplicação faz solicitações para um serviço no backend para recuperar dados e, ao iterar sobre os resultados, resulta em consultas adicionais. Especi fi camente, o cliente fará N chamadas adicionais ao serviço para cada registro retornado pela consulta inicial, além da consulta original (+1). Agregação de dados
5. O backend não pode fazer? • O backend não sabe quais subentidades o frontend precisa, então precisaria retornar sempre tudo. • Em uma arquitetura de microserviços, os serviços precisam ser agnósticos entre si. • As vezes não é uma alternativa Agregação de dados
6. Batch ou Bulk Endpoints • Usados para agrupar várias operações em uma única chamada. • Permite um aumento de desempenho, pois reduzimos signi fi cativamente o tempo de ida e volta na rede. • Essencial para todas as estratégias que vamos apresentar. Agregação de dados
7. Live coding!
8. Um caso real • Exemplo de um endpoint real. • Esse é um endpoint de cinco ou mais. • O tempo de espera da request cresce exponencialmente, em paralelo com a complexidade. Agregação de dados
9. Soluções!
10. BFF
11. Backend for Frontend: Pontos positivos • Deployado na mesma região que o backend. • O tempo de espera da request deixa de ser exponencial de ~100ms para ser exponencial de 3ms. • Lógica de agregação fi ca separada do frontend. Agregação de dados
12. Backend for Frontend: Pontos negativos • Precisa de um servidor • Debugar na nuvem :’D • Conhecimentos de NodeJS • Muito fácil de acabar com um endpoint pra cada pagina e bastante lógica de agregação repetida Agregação de dados
13. GraphQL
14. GraphQL: Pontos positivos • Os mesmos do BFF • Não precisa de lógica de agregação se implementado corretamente • Schemas <3 Agregação de dados
15. GraphQL: Pontos negativos • Precisa de um servidor • Mudança de paradigma • Refactor, refactor… • GraphQLDocumentError: Fields "type" con fl ict because they return con fl icting types "PlayerType" and "CoachType". Use di ff erent aliases on the fi elds to fetch both if this was intentional. Agregação de dados
16. Lazy-loading
17. Lazy-loading: O que é? • Uma técnica que carrega recursos sob demanda, carregando apenas o necessário no momento certo. • Exibe conteúdos parciais de forma mais rápida. • Não reduz o tempo de espera total. Agregação de dados
20. Live coding!
21. Como que o GraphQL lida com isso?
22. Dataloader
23. Dataloader • Ferramenta indicada pelo GraphQL para lidar com problemas de performance envolvendo requests paralelas e agregação. • Todas as chamadas que acontecem "ao mesmo tempo" são agrupadas em uma só. Agregação de dados
24. Dataloader • Após receber a resposta, o data loader mapeia o resultado de volta para cada chamada inicial. • Cada chamada recebe somente o que pediu. Agregação de dados
25. Live coding!
26. Lazy-loading: Pontos positivos • O usuário consegue interagir com a página mais cedo. • Não há necessidade de lógica de agregação, reduzindo a complexidade a aplicação. Agregação de dados
27. Lazy-loading: Pontos negativos • Se não implementado corretamente, pode causar o famoso "spinner hell" ou "spinner waterfall”. • O tempo fi nal para exibir todos os itens da tela continua o mesmo. Agregação de dados
28. Spinner hell: Possíveis soluções • Remix (Precisa de um servidor) • Utilizar skeletons. Planejar junto com seu time de design. • Suspense API Agregação de dados
29. Suspense • Direção oposta as fl ags de isLoading. O pai de fi ne o skeleton do fi lho. • Quando uma request é feita em algum dos fi lhos, o fallback do pai é exibido até que ela resolva. • Requests consecutivas ou paralelas reaproveitam o mesmo fallback. Agregação de dados
30. Live coding!
31. Spinner hell: Soluções de fi nitivas • “Prefetching" no servidor + Hydration (Estratégia atual do remix). • React Server Components + SSR + Streaming. • Fica pra uma próxima talk ;) Agregação de dados
32. • Talk baseada em um artigo que escrevi alguns meses atrás. Fixado no meu twitter • @tsirlucas em todas as redes sociais