GraphQL para reduzir complexidade no front e no back

GraphQL para reduzir complexidade no front e no back

00aa8b69517e1a026babb7f979c8c873?s=128

Kete Martins Rufino

August 11, 2018
Tweet

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

  6. None
  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