Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL para reduzir complexidade no front e no back

GraphQL para reduzir complexidade no front e no back

Kete Martins Rufino

August 11, 2018
Tweet

More Decks by Kete Martins Rufino

Other Decks in Technology

Transcript

  1. GraphQL
    Para reduzir a complexidade no front e no back
    @ketemr - #frontinvale2018

    View full-size slide

  2. Kete Martins Rufino
    @ketemr
    Graduada em Sistemas de Informação - CE
    @nubankbrasil há 8 meses

    View full-size slide

  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

    View full-size slide

  4. Meu pedido foi negado...
    #xatiado

    View full-size slide

  5. Como funciona a lista de
    espera do cartão Nubank?
    https://blog.nubank.com.br

    View full-size slide

  6. Microserviços

    View full-size slide

  7. Monolito x Microserviços
    monolito microsserviços

    View full-size slide

  8. Permite mudar um pedaço de cada vez
    Monolito x Microserviços

    View full-size slide

  9. Permite criar um pedaço de cada vez
    Monolito x Microserviços

    View full-size slide

  10. Habilidade de dividir os serviços por time
    Monolito x Microserviços

    View full-size slide

  11. FATURAS
    SALDOS
    ANTECIPAÇÃO
    FATURAS
    SALDOS
    ANTECIPAÇÃO
    Microserviços

    View full-size slide

  12. Microserviços
    Serviço A
    Serviço B
    Serviço C
    HTTP HTTP
    (sync)
    KAFKA
    (async)

    View full-size slide

  13. Nuconta
    ENVIO
    - Pedido de Envio
    - Envio
    RECEBIMENTOS
    - Recebimento
    SALDO
    - Depósito
    - Liquidação

    View full-size slide

  14. ENVIO RECEBIMENTOS
    SALDO
    Envio
    solicitado
    Pedido de envio
    Envio

    View full-size slide

  15. ENVIO RECEBIMENTOS
    SALDO
    Envio
    solicitado
    Pedido de envio
    Envio
    Liquidação
    efetuada
    Liquidação

    View full-size slide

  16. ENVIO RECEBIMENTOS
    SALDO
    Envio
    solicitado
    Pedido de envio
    Envio
    Liquidação
    efetuada
    Dinheiro
    enviado
    Depósito
    Liquidação

    View full-size slide

  17. ENVIO RECEBIMENTOS
    SALDO
    Envio
    solicitado
    Liquidação
    efetuada
    Dinheiro
    enviado Recebimento
    Dinheiro
    recebido
    Liquidação
    Pedido de envio
    Envio

    View full-size slide

  18. ENVIO RECEBIMENTOS
    SALDO
    Envio
    solicitado
    Liquidação
    efetuada
    Dinheiro
    enviado Recebimento
    Dinheiro
    recebido
    Depósito
    Liquidação
    Pedido de envio
    Envio

    View full-size slide

  19. 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

    View full-size slide

  20. ● + detalhes...
    ○ Validações
    ○ Falhas
    ○ Integrações com terceiros
    ■ Transferência para outros bancos
    ■ Recebimento de outros bancos
    ○ ...
    Nuconta

    View full-size slide

  21. Construindo a Nuconta: do zero
    a milhões de clientes
    Gustavo Bicalho e Maurício Verardo
    Nuconta
    https://medium.com/building-nubank

    View full-size slide

  22. Como o cliente
    vê tudo isso?
    Nuconta

    View full-size slide

  23. Problema
    de dados
    distribuídos
    ENVIO
    RECEBIMENTOS
    SALDO
    CONTATOS
    FATURA
    ...

    View full-size slide

  24. ENVIO
    - Pedido de Envio
    - Envio
    RECEBIMENTOS
    - Recebimento
    SALDO
    - Depósito
    - Liquidação
    Nuconta

    View full-size slide

  25. ENVIO
    RECEBIMENTOS
    SALDO
    CONTATOS
    FATURA
    ...
    Nuconta

    View full-size slide

  26. 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

    View full-size slide

  27. Back-end For Front-end
    ENVIO
    RECEBIMENTOS
    SALDO
    BFF

    View full-size slide

  28. GraphQL
    ● Linguagem de consulta de dados para sua API

    View full-size slide

  29. ● Linguagem de consulta de dados para sua API
    ● Criada e mantida pelo Facebook em 2012 ( Ops… )
    GraphQL

    View full-size slide

  30. ● Linguagem de consulta de dados para sua API
    ● Criada e mantida pelo Facebook em 2012 ( Ops… )
    ● Padrão aberto em 2015
    GraphQL

    View full-size slide

  31. ● 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

    View full-size slide

  32. ● 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

    View full-size slide

  33. 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
    }

    View full-size slide

  34. 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

    View full-size slide

  35. 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

    View full-size slide

  36. 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

    View full-size slide

  37. 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

    View full-size slide

  38. E para alterar os dados?

    View full-size slide

  39. 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

    View full-size slide

  40. 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

    View full-size slide

  41. Mutations client

    View full-size slide

  42. insomnia.rest

    View full-size slide

  43. FERRAMENTAS
    BACKEND
    - lacinia (Clojure)
    - graphql (nodejs)
    - apollo-server (nodejs)
    - graphql-java (Java)
    FRONTEND
    - re-graph (ClojureScript)
    - apollo (JS/Android/Swifit)
    - relay (React)

    View full-size slide

  44. FERRAMENTAS - NU
    BACKEND
    - lacinia (Clojure)
    FRONTEND
    - apollo (React Native)
    - relay (React Native)

    View full-size slide

  45. 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

    View full-size slide

  46. Obrigada!
    Perguntas?
    @ketemr
    UI Engineer @ Nubank
    Vem para o nosso time!
    WE BUILD STRONG
    AND D I V E R S E TEAMS

    View full-size slide