Vacinando mais de 200 mil pessoas com ReactJS e GraphQL
-
Upload
taller-negocio-digitais -
Category
Software
-
view
664 -
download
0
Transcript of Vacinando mais de 200 mil pessoas com ReactJS e GraphQL
![Page 1: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/1.jpg)
Vacinando mais de200 mil pessoas com ReactJS e GraphQL
Sebastian Ferrari | [email protected] Constantino | [email protected]
![Page 2: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/2.jpg)
Vacinação SESI SC+200 mil pessoasProjeto com o objetivo de gerenciar a compra e
aplicação de vacinas fornecidas pelo SESI SC.
![Page 3: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/3.jpg)
Cadastro de Empresas
Controle de estoque
Controle de aplicação de
doses
Controle de pedidos
Gerenciamento de fatura
Gerenciamento de usuários
Domínios:
![Page 4: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/4.jpg)
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
![Page 5: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/5.jpg)
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
![Page 6: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/6.jpg)
Por quê?● Ecossistema inovador e grande● Conceitos da P. Funcional● Cases de sucesso no mercado● Fácil de testar e de baixo custo
ReactJS
![Page 7: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/7.jpg)
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 containerssem componente
ReactJS
![Page 8: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/8.jpg)
Por quê?● Única fonte da verdade● Controle unificado do estado● Conceitos da P. Funcional● Awesome Debugging \o/
Redux
![Page 9: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/9.jpg)
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
![Page 10: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/10.jpg)
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
![Page 11: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/11.jpg)
Como?● Módulos são objetos simples
● Domínio de negócio separadoem módulos
Redux Boot
![Page 12: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/12.jpg)
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
![Page 13: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/13.jpg)
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
![Page 14: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/14.jpg)
Recompose
![Page 15: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/15.jpg)
Recompose
![Page 16: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/16.jpg)
Recompose
![Page 17: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/17.jpg)
Por quê?● Confiável, documentação
abrangente e comunidade ativa● Moularizável● Aprendizado rápido
React [email protected]
![Page 18: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/18.jpg)
React [email protected]
Como?● “Plain route objects”● Combinado com o Webpack
chunks para agregação inteligente de bundles.
● Utilização com Recompose
![Page 19: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/19.jpg)
React [email protected]
![Page 20: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/20.jpg)
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
![Page 21: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/21.jpg)
Como?● Webpack com o css-loader e
ExtractTextPlugin
● Classes únicas para os componentes
● Styleguide com variáveis
CSS Modules
![Page 22: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/22.jpg)
Composição declarativa com CSS Modules
CSS Modules
![Page 23: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/23.jpg)
problemalert !
![Page 24: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/24.jpg)
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
![Page 25: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/25.jpg)
Redux [email protected]
Por quê?● Formulários reactivos● Lógica isolada da apresentação● Controle de estado
![Page 30: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/30.jpg)
Webpack &Babel [email protected]
Como?● Várias configs (dev, test, storybook, …)● Chunk de vendors para melhorar o
time-to-glass
![Page 33: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/33.jpg)
Ramdaramda
Por quê?● Testabilidade● Código descritivo● Desacoplamento
![Page 34: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/34.jpg)
Ramda ramda
Como?● Composição de funções● Menos código● Programação funcional
![Page 35: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/35.jpg)
Ramda
Exemplo ramda 1/3
![Page 36: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/36.jpg)
Ramda
Exemplo ramda 1/3
![Page 37: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/37.jpg)
Ramda
Exemplo ramda 1/3
![Page 38: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/38.jpg)
Ramda
Exemplo ramda 1/3
![Page 39: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/39.jpg)
GraphQLQuery language para a API
● Múltiplos recursos, uma única query;
● Adoção progressiva;
● API escalável.
![Page 40: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/40.jpg)
GraphQL
Schema language Query language Result
![Page 41: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/41.jpg)
GraphQL Como?
Apollo Stack
![Page 42: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/42.jpg)
Apollo Clientapollo-client
Por quê?● Interface network customizável● Normalização de dados
backend != client● Redução de complexidade● Adoção progressiva● Cache inteligente● Debugging
![Page 43: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/43.jpg)
Apollo Clientapollo-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
![Page 44: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/44.jpg)
Apollo Clientapollo-client
Como?● Integração ao Redux● Resolução client-side● Apollo Client Dev Tools● Modularização com graphql-modules
![Page 45: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/45.jpg)
Resolução de GraphQL queries no client-site
Apollo
![Page 46: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/46.jpg)
Apollo
![Page 47: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/47.jpg)
React Apolloreact-apollo
Conectar o client ao React. Substitui o Provider do Redux.
![Page 48: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/48.jpg)
React Apolloreact-apollo
Conectar o uma GraphQL query a um componente.
![Page 49: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/49.jpg)
Por quê?● Configuração mínima● Fácil adaptação● Rápido● Compatibilidade com React● Facilidade para mocking
Jest
![Page 50: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/50.jpg)
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
![Page 51: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/51.jpg)
problemalert !
![Page 52: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/52.jpg)
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
![Page 53: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/53.jpg)
… e mais !● Superagent
● Husky git hooks!
● Eslint
● Storybook
● Conducer
● Papaparse
● Memoizee
● Nightwatch
● Enzyme
● Rewire
● Redbox
● moment
![Page 64: Vacinando mais de 200 mil pessoas com ReactJS e GraphQL](https://reader035.fdocument.pub/reader035/viewer/2022081801/5a6dc3107f8b9a8b2b8b4f0b/html5/thumbnails/64.jpg)