Usando GraphQL para reduzir complexidade no front e no back

Talk apresentada no meetup da ReactBr - React #19 - Especial React na Nextel

https://www.meetup.com/ReactJS-SP/events/247655954/?_xtd=gatlbWFpbF9jbGlja9oAJDE2ZWQ0ZWViLThmZjQtNDZjNi05MmE5LTNmNDNhOGEyMmRlMQ&_af=event&_af_eid=247655954&https=on

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