Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de...
Transcript of Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de...
![Page 1: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/1.jpg)
CAIO INCAU
@iCaioIncau@caioincau
Coordenador de Engenharia na Wirecard
![Page 2: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/2.jpg)
ARQUITETURA DE UM TIME FRONT-END DE ALTA PERFORMANCE
A EXPERIÊNCIA DA WIRECARD
![Page 3: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/3.jpg)
VAMOS INVESTIR EM USABILIDADE E CRIAR UM SISTEMA NOVO.
Diretoria da Wirecard
![Page 4: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/4.jpg)
SISTEMA ANTERIOR
▸ Ruby on Rails
▸ JQuery (pelo menos três versões)
▸ Bootstrap
▸ Super acoplado e pouca coisa era reusável
![Page 5: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/5.jpg)
O QUE ESTÁ APLICAÇÃO IRIA PRECISAR?
▸ Manipular dados sensíveis
▸ Alta escalabilidade
▸ Suporte cross browser
▸ Tempo curto para um projeto grande
▸ Fácil de reusar e incrementar os componentes
▸ Doze equipes de back-end gerando insumo para o projeto
![Page 6: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/6.jpg)
ESTRUTURA DA TALK
▸ Processos e práticas da equipe enxuta
▸ Arquitetura Front-End simples e escalável
▸ Deploy, build e otimizações
![Page 7: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/7.jpg)
ESTRUTURA DA EQUIPE
▸ 2 UX Designers
▸ 2 UI Designers
▸ 4 Front-ends
▸ 1 QA
▸ 1 PO
![Page 8: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/8.jpg)
FOCO NO PROCESSO
![Page 9: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/9.jpg)
TRANSPARÊNCIA DO WIP
![Page 10: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/10.jpg)
TRIPLE DIAMOND PROCESS
![Page 11: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/11.jpg)
QA É UM PROCESSO, NÃO UM PAPEL
![Page 12: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/12.jpg)
"SIMPLICIDADE É O ÚLTIMO GRAU DE SOFISTICAÇÃO",
Leonardo da Vinci
![Page 13: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/13.jpg)
DADA A PREMISSA DE MANTER A STACK SIMPLES, QUAL FRAMEWORK FAZ MAIS SENTIDO PARA NÓS?
![Page 14: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/14.jpg)
VUE.JS
▸ Suporta IE9
▸ Curva de aprendizado pequena
▸ Melhor performance
▸ Boa documentação
▸ Framework progressivo
▸ Open Source
▸ Comunidade super ativa
![Page 15: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/15.jpg)
APESAR DA SIMPLICIDADE DO FRAMEWORK, COMEÇOU A FICAR COMPLICADO LIDAR COM DADOS NA APLICAÇÃO…
![Page 16: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/16.jpg)
VUEX
▸ Implementação baseada em Flux
▸ Zero config
▸ Todos os dados da aplicação centralizados em um lugar
▸ Fácil acesso a dados, cache e time-travel
![Page 17: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/17.jpg)
AS RESPOSTAS DA APIS NÃO ERAM CONCISAS…
![Page 18: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/18.jpg)
GRAPHQL
▸ Mais de 30 APIs, precisávamos padronizar
▸ Mais uma camada de cache
▸ Redução do tráfego de dados, podíamos pegar somente o necessário
▸ Melhor controle sobre as respostas
▸ Mais resiliente
![Page 19: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/19.jpg)
GRAPHQL
![Page 20: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/20.jpg)
GRAPHQL É RESILIENTE “ATÉ DEMAIS”, PRECISAMOS CAPTURAR OS ERROS E ATUAR SOBRE ELES…
![Page 21: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/21.jpg)
SENTRY
▸ Monitoramento de erros real time
▸ Agimos antes dos usuários reportarem os erros
▸ Maior facilidade de debugar
▸ Seis linhas de código capturam os erros da aplicação toda.
![Page 22: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/22.jpg)
Raven.config(`https://${KEY}@sentry.io/${APP}`) .addPlugin(RavenVue, Vue) .install();
Vue.config.errorHandler = (err, vm, info) => { Raven.captureException(err) }
CÓDIGO SENTRY
![Page 23: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/23.jpg)
PRECISAMOS DE TESTES PARA GARANTIR QUE ESTES ERROS NÃO VOLTEM ACONTECER, ALÉM DE PREVINIR NOVOS…
![Page 24: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/24.jpg)
JEST E CYPRESS
▸ Jest para testes unitários, integração fácil, pouca configuração
▸ Cypress para testes exploratórios, testes feitos em JS pela própria equipe de dev
▸ Qualidade como um processo, QAs escrevem critérios de aceite e ajudam no roteiro de testes, mas qualidade é obrigação de todos
![Page 25: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/25.jpg)
BUILD
![Page 26: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/26.jpg)
WEBPACK
▸ Build customizável
▸ Otimizações nativas out of the box
▸ Diferentes builds por ambiente
▸ Code-split fácil
▸ Remove código inutilizado
▸ Build com suporte a browsers mais antigos(Babel)
![Page 27: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/27.jpg)
DOCKER
▸ Maior facilidade de desenvolvimento
▸ Podemos pegar exatamente a imagem que está em produção
▸ Facilita o deploy do GraphQL, dado que usamos o ECS e podemos escalar com facilidade
![Page 28: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/28.jpg)
CI E DEPLOY
![Page 29: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/29.jpg)
CIRCLE CI
▸ Fácil de configurar
▸ Podemos aproveitar a imagem docker que já criamos
▸ Garante os testes
▸ Usamos CD, merge na master, deploy para ambiente de integração, adicionou tag, vai para produção
![Page 30: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/30.jpg)
PARA ONDE VÃO OS ASSETS GERADOS ?
![Page 31: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/31.jpg)
AMAZON S3
▸ Fácil escalar
▸ Barato
▸ Simples de configurar, quase um copy e paste de arquivos
▸ 99,999999999% (11 9s) de disponibilidade
![Page 32: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/32.jpg)
AMAZON CLOUDFRONT
▸ Baixa Latência
▸ Alta velocidade de transferência
▸ Configuração em poucos clicks pelo painel da Amazon
![Page 33: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/33.jpg)
E PARA ONDE VAI O GRAPHQL?
![Page 34: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/34.jpg)
AMAZON ECS
▸ Altamente escalável
▸ Alta performance
▸ Deploy integrado no CI através de command lines
▸ Monitoria grátis e clara
▸ Se recupera sozinho de falhas
![Page 35: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/35.jpg)
DÚVIDAS?
![Page 36: Coordenador de Engenharia na Wirecard @iCaioIncau @caioincau · VUE.JS Suporta IE9 Curva de aprendizado pequena Melhor performance Boa documentação Framework progressivo](https://reader035.fdocumentos.com/reader035/viewer/2022062307/5fc6101f37c4580a2b6dd6f6/html5/thumbnails/36.jpg)
OBRIGADO