GraphQL para reduzir complexidade no front e no back

Palestra apresentada no FrontInVale de 2018.
http://frontinvale.com.br/

Referências:
- Blog geral: https://blog.nubank.com.br
- Blog técnico: https://medium.com/building-nubank
- Construindo a Nuconta: do zero a milhões de clientes: https://www.youtube.com/watch?v=aQLv4F1PpTY&t=48s&index=2&list=PLg1c2HmAMLv3ikw2eVWAleHxaxoxEAuS8
- https://graphql.org/
- http://facebook.github.io/graphql/June2018/
- https://insomnia.rest/
- https://github.com/walmartlabs/lacinia
- https://www.npmjs.com/package/graphql
- https://github.com/apollographql/apollo-server
- https://www.apollographql.com/
- https://facebook.github.io/relay/
- Vaga UI : https://nubank.workable.com/j/E67A6CB359

Transcript

1. GraphQL Para reduzir a complexidade no front e no back @ketemr - #frontinvale2018
2. Kete Martins Rufino @ketemr Graduada em Sistemas de Informação - CE @nubankbrasil há 8 meses
3. $330 milhões em 5 rodadas de investimento +4 milhões de clientes +1000 funcionários Foi eleito o cartão favorito dos brasileiros
4. Meu pedido foi negado... #xatiado
5. Como funciona a lista de espera do cartão Nubank? https://blog.nubank.com.br
7. Nu Stack
8. Microserviços
9. Monolito x Microserviços monolito microsserviços
10. Permite mudar um pedaço de cada vez Monolito x Microserviços
11. Permite criar um pedaço de cada vez Monolito x Microserviços
12. Habilidade de dividir os serviços por time Monolito x Microserviços
13. FATURAS SALDOS ANTECIPAÇÃO FATURAS SALDOS ANTECIPAÇÃO Microserviços
14. Microserviços Serviço A Serviço B Serviço C HTTP HTTP (sync) KAFKA (async)
15. Nuconta ENVIO - Pedido de Envio - Envio RECEBIMENTOS - Recebimento SALDO - Depósito - Liquidação
16. ENVIO RECEBIMENTOS SALDO Envio solicitado Pedido de envio Envio
17. ENVIO RECEBIMENTOS SALDO Envio solicitado Pedido de envio Envio Liquidação efetuada Liquidação
18. ENVIO RECEBIMENTOS SALDO Envio solicitado Pedido de envio Envio Liquidação efetuada Dinheiro enviado Depósito Liquidação
19. ENVIO RECEBIMENTOS SALDO Envio solicitado Liquidação efetuada Dinheiro enviado Recebimento Dinheiro recebido Liquidação Pedido de envio Envio
20. ENVIO RECEBIMENTOS SALDO Envio solicitado Liquidação efetuada Dinheiro enviado Recebimento Dinheiro recebido Depósito Liquidação Pedido de envio Envio
21. ENVIO RECEBIMENTOS SALDO Envio solicitado Depósito Liquidação Liquidação efetuada Dinheiro enviado Recebimento Dinheiro recebido Transferência Concluída Pedido de envio Envio
22. • + detalhes... ◦ Validações ◦ Falhas ◦ Integrações com terceiros ▪ Transferência para outros bancos ▪ Recebimento de outros bancos ◦ ... Nuconta
23. Construindo a Nuconta: do zero a milhões de clientes Gustavo Bicalho e Maurício Verardo Nuconta https://medium.com/building-nubank
24. Como o cliente vê tudo isso? Nuconta
25. Problema de dados distribuídos ENVIO RECEBIMENTOS SALDO CONTATOS FATURA ...
26. ENVIO - Pedido de Envio - Envio RECEBIMENTOS - Recebimento SALDO - Depósito - Liquidação Nuconta
27. ENVIO RECEBIMENTOS SALDO CONTATOS FATURA ... Nuconta
28. Problemas Custo • Tempo / Energia / Banda Complexidade • Modelo do backend !== visão do cliente Segurança • Exposição das regras de negócio Responsabilidades • Apresentar dados / DIferentes interfaces Atualizações • Publicação na loja / Usuário não atualiza Acoplamento • Dificuldade em evoluir o backend
29. Back-end For Front-end ENVIO RECEBIMENTOS SALDO BFF
30. GraphQL • Linguagem de consulta de dados para sua API
31. • Linguagem de consulta de dados para sua API • Criada e mantida pelo Facebook em 2012 ( Ops… ) GraphQL
32. • Linguagem de consulta de dados para sua API • Criada e mantida pelo Facebook em 2012 ( Ops… ) • Padrão aberto em 2015 GraphQL
33. • Linguagem de consulta de dados para sua API • Criada e mantida pelo Facebook em 2012 ( Ops… ) • Padrão aberto em 2015 • Definição do schema (tipagem) GraphQL
34. • Linguagem de consulta de dados para sua API • Criada e mantida pelo Facebook em 2012 ( Ops… ) • Padrão aberto em 2015 • Definição do schema (tipagem) • Retorno dos dados previsíveis GraphQL
35. schema { query: Query } type Query { saldo(accountId: id!): Float feed(accountId: id!): [Envio | Recebimento] } type Recebimento { data: Date valor: Float } GraphQL schema enum StatusEnvio { PENDENTE, FALHA, SUCESSO } type Envio { data: Date valor: Float status: StatusEnvio }
36. query feedScreen($accountId: ID!) { feed(accountId: $accountId) { ...on Envio { data valor status } ... on Recebimento { data valor } } schema { query: Query } type Query { saldo(accountId: id!): Float feed(accountId: id!): [Envio | Recebimento] } type Recebimento { data: Date valor: Float } enum StatusEnvio { PENDENTE, FALHA, SUCESSO } type Envio { data: Date valor: Float status: StatusEnvio } HTTP /api/query GraphQL client
37. http://api/customer/accountId { "Saldo": "500.00", "Feed": { "Envio": { "data": "2018-08-11", "valor": "100.00", "status": "SUCESSO", }, "Recebimento": { "data": "2018-08-11", "valor": "600.00", } } } GraphQL client
38. http://api/customer/accountId { "Saldo": "500.00", "Feed": { "Envio": { "data": "2018-08-11", "valor": "100.00", "status": "SUCESSO", }, "Recebimento": { "data": "2018-08-11", "valor": "600.00", } } } query feedScreen($accountId: ID!) { feed(accountId: $accountId) { ...on Envio { data valor status } ... on Recebimento { data valor } } GraphQL client
39. query feedScreen($accountId: ID!) { feed(accountId: $accountId) {...} saldo(accountId: $accountId) {...} } type Query { saldo(accountId: id!): Float feed(accountId: id!): [Envio | Recebimento] saldoDetalhado(accountId: id!): SaldoDetalhado } query feedScreen($accountId: ID!) { feed(accountId: $accountId) {...} saldoDetalhado(accountId: $accountId) {...} } Cliente V1 Cliente V2 GraphQL client
40. E para alterar os dados?
41. Mutations
42. schema { query: Query mutation: Mutation } type Query { saldo(accountId: id!): Float feed(accountId: id!): [Envio | Recebimento] } type Mutation { transferir(accountId: id!, toAccountId: id!, value: value!): Envio } GraphQL schema
43. mutation fazerTranferencia($accountId: id!, $toAccountId: id!, $value: value!) { transferir(accountId: $accountId, toAccountId: $toAccountId, value: $value) { data valor status } } // Variavéis { "accountId": "10-ab-cs", "toAccountId": "22-ab-c4", "value": "100.00", } // Retorno { "data": { "data": "2018-08-11", "valor": "100", "status": "SUCESSO", } } Mutations client
44. Mutations client
45. Ferramentas
46. insomnia.rest
47. FERRAMENTAS BACKEND - lacinia (Clojure) - graphql (nodejs) - apollo-server (nodejs) - graphql-java (Java) FRONTEND - re-graph (ClojureScript) - apollo (JS/Android/Swifit) - relay (React)
48. FERRAMENTAS - NU BACKEND - lacinia (Clojure) FRONTEND - apollo (React Native) - relay (React Native)
49. Conclusão
50. Conclusão Vantagens - API representando a UI - Menor custo - menos requisições - consumo de dados - bateria - Menor complexidade - Evolução do backend Desvantagens - Um item a mais na arquitetura - Curva de aprendizado - Tecnologia recente
51. Obrigada! Perguntas? @ketemr UI Engineer @ Nubank Vem para o nosso time! WE BUILD STRONG AND D I V E R S E TEAMS