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