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

Usando GraphQL para reduzir complexidade no front e no back

Usando GraphQL para reduzir complexidade no front e no back

Kete Martins Rufino

February 27, 2018
Tweet

More Decks by Kete Martins Rufino

Other Decks in Technology

Transcript

  1. Usando GraphQL para reduzir
    complexidade no front e no back
    React #19 - Especial React na Nextel - fev/2018

    View Slide

  2. Kete Martins Rufino - @ketemr
    Graduada em Sistemas de Informação - Fa7 - CE
    Engenheira de Software na @nubankbrasil
    Marina Limeira - @marinalimeira_
    Graduanda em Ciências da Computação da PUC-SP
    Engenheira de Software na @nubankbrasil

    View Slide

  3. ● Cartão
    ● Conta
    ● Rewards
    ● ( + )

    View Slide

  4. Stack

    View Slide

  5. Como era no início...

    View Slide

  6. Android iOS

    View Slide

  7. Android iOS
    A1 A2 i1 i2

    View Slide

  8. NuConta

    View Slide

  9. Porque React Native?
    App iOS com funcionalidades atrasadas

    View Slide

  10. Porque React Native?
    App iOS com funcionalidades atrasadas
    WebApps não foram considerados

    View Slide

  11. Porque React Native?
    App iOS com funcionalidades atrasadas
    WebApps não foram considerados
    Solução tinha que ser nativa

    View Slide

  12. Porque React Native?
    App iOS com funcionalidades atrasadas
    WebApps não foram considerados
    Solução tinha que ser nativa
    Backoffice feito com ClojureScript + React

    View Slide

  13. S1
    S2
    S3
    CONTA
    CARTÃO
    REWARDS

    View Slide

  14. GraphQL

    View Slide

  15. GraphQL
    Linguagem de consulta de dados para a sua API

    View Slide

  16. GraphQL
    Linguagem de consulta de dados para a sua API
    Criada pelo Facebook em 2012
    (não é tão nova quanto pensamos… )

    View Slide

  17. GraphQL
    Linguagem de consulta de dados para a sua API
    Criada pelo Facebook em 2012
    (não é tão nova quanto pensamos… )
    Definição de schema (tipagem ✨)

    View Slide

  18. GraphQL
    Linguagem de consulta de dados para a sua API
    Criada pelo Facebook em 2012
    (não é tão nova quanto pensamos… )
    Definição de schema (tipagem ✨)
    Retorno dos dados totalmente previsíveis

    View Slide

  19. insomnia.rest

    View Slide

  20. View Slide

  21. GraphQL
    GraphQL
    (Lacinia)
    S1
    S2
    S3
    CONTA
    CARTÃO
    REWARDS

    View Slide

  22. NuConta
    react-test-render

    View Slide

  23. Dúvidas?
    http://sou.nu/vagasnu

    View Slide

  24. Obrigada!
    Kete Martins
    Marina Limeira

    View Slide