Post on 28-Jan-2018
Vacinando mais de200 mil pessoas com ReactJS e GraphQL
Sebastian Ferrari | sebas@taller.net.brLucas Constantino | lucas@taller.net.br
Vacinação SESI SC+200 mil pessoasProjeto com o objetivo de gerenciar a compra e
aplicação de vacinas fornecidas pelo SESI SC.
Cadastro de Empresas
Controle de estoque
Controle de aplicação de
doses
Controle de pedidos
Gerenciamento de fatura
Gerenciamento de usuários
Domínios:
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
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
Por quê?● Ecossistema inovador e grande● Conceitos da P. Funcional● Cases de sucesso no mercado● Fácil de testar e de baixo custo
ReactJS
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
Por quê?● Única fonte da verdade● Controle unificado do estado● Conceitos da P. Funcional● Awesome Debugging \o/
Redux
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
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
Como?● Módulos são objetos simples
● Domínio de negócio separadoem módulos
Redux Boot
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
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
Recompose
Recompose
Recompose
Por quê?● Confiável, documentação
abrangente e comunidade ativa● Moularizável● Aprendizado rápido
React Routerreact-router@2.x
React Routerreact-router@2.x
Como?● “Plain route objects”● Combinado com o Webpack
chunks para agregação inteligente de bundles.
● Utilização com Recompose
React Routerreact-router@2.x
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
Como?● Webpack com o css-loader e
ExtractTextPlugin
● Classes únicas para os componentes
● Styleguide com variáveis
CSS Modules
Composição declarativa com CSS Modules
CSS Modules
problemalert !
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
Redux Formredux-form@5.x
Por quê?● Formulários reactivos● Lógica isolada da apresentação● Controle de estado
Redux Formredux-form@5.x
Como?● Conectar à store do Redux● Conectar ao component via reduxForm
HoC
Redux Formredux-form@5.x
Como conectar na store
Redux Formredux-form@5.x
Como conectar um formulário a um componente
Webpack &Babelwebpack@1.x
Por quê?● ES 7-8-9● Robustez● Altamente adaptável
Webpack &Babel webpack@1.x
Como?● Várias configs (dev, test, storybook, …)● Chunk de vendors para melhorar o
time-to-glass
Webpack &Babel webpack@1.x
Configurações do webpack
├──
├──
├──
├──
└──
Webpack &Babel webpack@1.x
Vendors chunk com webpack.DLLReferencePlugin
Ramdaramda
Por quê?● Testabilidade● Código descritivo● Desacoplamento
Ramda ramda
Como?● Composição de funções● Menos código● Programação funcional
Ramda
Exemplo ramda 1/3
Ramda
Exemplo ramda 1/3
Ramda
Exemplo ramda 1/3
Ramda
Exemplo ramda 1/3
GraphQLQuery language para a API
● Múltiplos recursos, uma única query;
● Adoção progressiva;
● API escalável.
GraphQL
Schema language Query language Result
GraphQL Como?
Apollo Stack
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
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
Apollo Clientapollo-client
Como?● Integração ao Redux● Resolução client-side● Apollo Client Dev Tools● Modularização com graphql-modules
Resolução de GraphQL queries no client-site
Apollo
Apollo
React Apolloreact-apollo
Conectar o client ao React. Substitui o Provider do Redux.
React Apolloreact-apollo
Conectar o uma GraphQL query a um componente.
Por quê?● Configuração mínima● Fácil adaptação● Rápido● Compatibilidade com React● Facilidade para mocking
Jest
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
problemalert !
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
… e mais !● Superagent
● Husky git hooks!
● Eslint
● Storybook
● Conducer
● Papaparse
● Memoizee
● Nightwatch
● Enzyme
● Rewire
● Redbox
● moment
Obrigado!… perguntas?
Sebastian Ferrari | sebas@taller.net.br