O documento descreve um projeto para gerenciar a vacinação de mais de 200 mil pessoas usando ReactJS e GraphQL. O projeto permite o cadastro de empresas, controle de estoque e aplicação de doses, emissão de faturas e gerenciamento de usuários. Tecnologias como Redux, Redux Form, React Router e CSS Modules foram utilizadas para desenvolver a interface reativa enquanto GraphQL foi usado para a camada de API.

1. Vacinando mais de
200 mil pessoas com
ReactJS e GraphQL
Sebastian Ferrari | sebas@taller.net.br
Lucas Constantino | lucas@taller.net.br

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. 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. 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. 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. 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. 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. Por quê?
● Única fonte da verdade
● Controle unificado do estado
● Conceitos da P. Funcional
● Awesome Debugging o/
Redux

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. 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. Como?
● Módulos são objetos simples
● Domínio de negócio separado
em módulos
Redux Boot

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

15. Recompose

16. Recompose

17. Por quê?
● Confiável, documentação
abrangente e comunidade ativa
● Moularizável
● Aprendizado rápido
React Router
react-router@2.x

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. React Router
react-router@2.x

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. Como?
● Webpack com o css-loader e
ExtractTextPlugin
● Classes únicas para os componentes
● Styleguide com variáveis
CSS Modules

22. Composição declarativa com CSS Modules
CSS Modules

23. problem
alert !

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. Redux Form
redux-form@5.x
Por quê?
● Formulários reactivos
● Lógica isolada da apresentação
● Controle de estado

26. Redux Form
redux-form@5.x
Como?
● Conectar à store do Redux
● Conectar ao component via reduxForm
HoC

27. Redux Form
redux-form@5.x
Como conectar na store

28. Redux Form
redux-form@5.x
Como conectar um formulário a um
componente

29. Webpack &
Babel
webpack@1.x
Por quê?
● ES 7-8-9
● Robustez
● Altamente adaptável

30. Webpack &
Babel
webpack@1.x
Como?
● Várias configs (dev, test, storybook, …)
● Chunk de vendors para melhorar o
time-to-glass

31. Webpack &
Babel
webpack@1.x
Configurações do webpack
├──
├──
├──
├──
└──

32. Webpack &
Babel
webpack@1.x
Vendors chunk com webpack.DLLReferencePlugin

33. Ramda
ramda
Por quê?
● Testabilidade
● Código descritivo
● Desacoplamento

34. Ramda
ramda
Como?
● Composição de funções
● Menos código
● Programação funcional

35. Ramda
Exemplo ramda 1/3

36. Ramda
Exemplo ramda 1/3

37. Ramda
Exemplo ramda 1/3

38. Ramda
Exemplo ramda 1/3

39. GraphQL
Query language para a API
● Múltiplos recursos, uma única query;
● Adoção progressiva;
● API escalável.

40. GraphQL
Schema language Query language Result

41. GraphQL Como?
Apollo Stack

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. 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. Apollo Client
apollo-client
Como?
● Integração ao Redux
● Resolução client-side
● Apollo Client Dev Tools
● Modularização com graphql-modules

45. Resolução de GraphQL queries no client-site
Apollo

46. Apollo

47. React Apollo
react-apollo
Conectar o client ao React. Substitui o Provider do
Redux.

48. React Apollo
react-apollo
Conectar o uma GraphQL query a um componente.

49. Por quê?
● Configuração mínima
● Fácil adaptação
● Rápido
● Compatibilidade com React
● Facilidade para mocking
Jest

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. problem
alert !

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. … e mais !
● Superagent
● Husky git hooks!
● Eslint
● Storybook
● Conducer
● Papaparse
● Memoizee
● Nightwatch
● Enzyme
● Rewire
● Redbox
● moment

54. Time

55. Materiais
sobre
os assuntos
blog.taller.net.br

63. Obrigado!
… perguntas?
Sebastian Ferrari | sebas@taller.net.br