Vacinando mais de 200 mil pessoas com ReactJS e GraphQL

610 visualizações

Publicada em

Talk realizada no FloripaJS meetup por Sebastian Ferrari e Lucas Constantinto mostrando nosso case de sucesso no projeto de Vacinação da FIESC.

Publicada em: Software
  • Seja o primeiro a comentar

Vacinando mais de 200 mil pessoas com ReactJS e GraphQL

  1. 1. Vacinando mais de 200 mil pessoas com ReactJS e GraphQL Sebastian Ferrari | sebas@taller.net.br Lucas Constantino | lucas@taller.net.br
  2. 2. Vacinação SESI SC +200 mil pessoas Projeto com o objetivo de gerenciar a compra e aplicação de vacinas fornecidas pelo SESI SC.
  3. 3. Cadastro de Empresas Controle de estoque Controle de aplicação de doses Controle de pedidos Gerenciamento de fatura Gerenciamento de usuários Domínios:
  4. 4. Time line Gerenciamento de usuários Cadastro de Empresas Controle de estoque Controle de aplicação de doses Gerenciamento de fatura Cadastro de pedidos Gerenciamento de pedidos
  5. 5. Time line Gerenciamento de usuários Cadastro de Empresas Controle de estoque Controle de aplicação de doses Gerenciamento de fatura em produção Cadastro de pedidos Gerenciamento de pedidos
  6. 6. Por quê? ● Ecossistema inovador e grande ● Conceitos da P. Funcional ● Cases de sucesso no mercado ● Fácil de testar e de baixo custo ReactJS
  7. 7. Como? ● Atua na camada de tema do Drupal servindo estáticos (SPA) ● Divisão entre Componentes, Containers e Pages (híbrido); 28 classes vs. 80 stateless ● Connectors são containers sem componente ReactJS
  8. 8. Por quê? ● Única fonte da verdade ● Controle unificado do estado ● Conceitos da P. Funcional ● Awesome Debugging o/ Redux
  9. 9. Como? ● Maior parte do uso foi através de outras bibliotecas ● Foram exceções o uso direto, reducers, middlewares, etc... ● Modularização através do redux-boot ● Debugging com a extensão DevTools Redux
  10. 10. Por quê? ● Módulos feitos de reducers, middlewares e enhancers. ● Abstração da inicialização da store assíncrona. ● Lógica interoperável Redux Boot
  11. 11. Como? ● Módulos são objetos simples ● Domínio de negócio separado em módulos Redux Boot
  12. 12. Por quê? ● Normalização de propriedades ● Computação e lógica de forma funcional e declarativa e fora do componente. ● Facilita o uso de componentes funcionais sem estado. Recompose
  13. 13. Como? ● Composição de funções que retornam componentes (HoCs) ● Utilizado em componentes e containers ● Utilização de: withState e withHandlers ● HoCs customizados: withProp, hideProp, copyProp e withParamsAsProps Recompose
  14. 14. Recompose
  15. 15. Recompose
  16. 16. Recompose
  17. 17. Por quê? ● Confiável, documentação abrangente e comunidade ativa ● Moularizável ● Aprendizado rápido React Router react-router@2.x
  18. 18. React Router react-router@2.x Como? ● “Plain route objects” ● Combinado com o Webpack chunks para agregação inteligente de bundles. ● Utilização com Recompose
  19. 19. React Router react-router@2.x
  20. 20. Por quê? ● CSS local como padrão e global como exceção. ● Reutilização declarativa (composes) ● Diminui a complexidade do CSS ● Idiomático e amigável entre o time. CSS Modules
  21. 21. Como? ● Webpack com o css-loader e ExtractTextPlugin ● Classes únicas para os componentes ● Styleguide com variáveis CSS Modules
  22. 22. Composição declarativa com CSS Modules CSS Modules
  23. 23. problem alert !
  24. 24. Onde guardar variáveis ou estilos globais ? ● Pasta local_modules com o styleguide, icones e fontes. Configuração modulesDirectories no Webpack Bibliotecas de CSS global como react-widgets ? ● Importação do CSS global no componente. Dois loaders com escopamentos local e global. CSS Modules
  25. 25. Redux Form redux-form@5.x Por quê? ● Formulários reactivos ● Lógica isolada da apresentação ● Controle de estado
  26. 26. Redux Form redux-form@5.x Como? ● Conectar à store do Redux ● Conectar ao component via reduxForm HoC
  27. 27. Redux Form redux-form@5.x Como conectar na store
  28. 28. Redux Form redux-form@5.x Como conectar um formulário a um componente
  29. 29. Webpack & Babel webpack@1.x Por quê? ● ES 7-8-9 ● Robustez ● Altamente adaptável
  30. 30. Webpack & Babel webpack@1.x Como? ● Várias configs (dev, test, storybook, …) ● Chunk de vendors para melhorar o time-to-glass
  31. 31. Webpack & Babel webpack@1.x Configurações do webpack ├── ├── ├── ├── └──
  32. 32. Webpack & Babel webpack@1.x Vendors chunk com webpack.DLLReferencePlugin
  33. 33. Ramda ramda Por quê? ● Testabilidade ● Código descritivo ● Desacoplamento
  34. 34. Ramda ramda Como? ● Composição de funções ● Menos código ● Programação funcional
  35. 35. Ramda Exemplo ramda 1/3
  36. 36. Ramda Exemplo ramda 1/3
  37. 37. Ramda Exemplo ramda 1/3
  38. 38. Ramda Exemplo ramda 1/3
  39. 39. GraphQL Query language para a API ● Múltiplos recursos, uma única query; ● Adoção progressiva; ● API escalável.
  40. 40. GraphQL Schema language Query language Result
  41. 41. GraphQL Como? Apollo Stack
  42. 42. Apollo Client apollo-client Por quê? ● Interface network customizável ● Normalização de dados backend != client ● Redução de complexidade ● Adoção progressiva ● Cache inteligente ● Debugging
  43. 43. Apollo Client apollo-client Por quê? ● Interface network customizável ● Normalização de dados backend != client ● Redução de complexidade ● Adoção progressiva ● Cache inteligente. ● Debugging ● Gerido pela comunidade :) Diferente do Relay
  44. 44. Apollo Client apollo-client Como? ● Integração ao Redux ● Resolução client-side ● Apollo Client Dev Tools ● Modularização com graphql-modules
  45. 45. Resolução de GraphQL queries no client-site Apollo
  46. 46. Apollo
  47. 47. React Apollo react-apollo Conectar o client ao React. Substitui o Provider do Redux.
  48. 48. React Apollo react-apollo Conectar o uma GraphQL query a um componente.
  49. 49. Por quê? ● Configuração mínima ● Fácil adaptação ● Rápido ● Compatibilidade com React ● Facilidade para mocking Jest
  50. 50. Como? ● Utilização do Enzyme ● Componentes e testes vivem juntos ● Funcionalidade de SnapShot ● Automocking e helpers para funções Stubs ou Spies. ● Testes assíncronos ou com timeouts Jest
  51. 51. problem alert !
  52. 52. Alias do Webpack ? ● Jest precisa saber resolver alias de paths. Configuração moduleNameMapper no arquivo jest.config.json Integrar com CSS Modules ? ● Processador custom para utilizar configurações do Webpack Stubs das classes de CSS usando a biblioteca identity-obj-proxy Jest
  53. 53. … e mais ! ● Superagent ● Husky git hooks! ● Eslint ● Storybook ● Conducer ● Papaparse ● Memoizee ● Nightwatch ● Enzyme ● Rewire ● Redbox ● moment
  54. 54. Time
  55. 55. Materiais sobre os assuntos blog.taller.net.br
  56. 56. Obrigado! … perguntas? Sebastian Ferrari | sebas@taller.net.br

×