Pipeline de qualidade em aplicações frontend

As aplicações que rodam no navegador, conhecidas como client-side ou frontend web, mudaram. Se tornaram grandes projetos que hoje demandam mais atenção para assuntos relacionados a arquitetura, integração contínua, publicação contínua e afins.

Durante algum tempo venho testando ferramentas e modos de integração que agora gostaria de compartilhar.

Nesta palestra, vamos conversar sobre como integrar novas features com qualidade, segurança e agilidade utilizando as ferramentas de CI e CD para o desenvolvimento frontend.

Transcript

1. Front End Software Engineer William Oliveira (@1ilhas)
2. Pipeline de qualidade em aplicações frontend
3. Precisão do design Responsividade Comportamento dos componentes Performance Segurança Qualidade em frontend
4. • 20 pessoas • 5 frontenders • Várias regiões • Fusos diferentes • Níveis de conhecimento Voluntariado
5. Arquitetura de software Bons processos Ferramentas Automações Garantias
6. Processos Codificação Integração Deploy
7. Integração Histórico do Git organizado Código padronizado Código testado Código seguro Interface homologada
8. Presentation Layer (components, views, pages) Business Layer (regras de negócio) Database Layer (API Integration, Application Storage) Arquitetura de software
9. Documentação Code Review Pair programming Bons processos
10. Frameworks e bibliotecas Linting Auto formatação Ferramentas
11. Baixar o repositório Instalar as dependências Configurar suas ferramentas (IDE, etc) Codificar Criar um commit Meter o push Fluxo de trabalho local
12. Não deixa passar mensagem de commit "ruim" Não deixa fazer um commit sem lint + prettier Husky
14. Nextjs + TypeScript Storybook { ES, TS }lint Stylelint Prettier Husky Shell Script Jest Ferramentas
15. GitHub templates (PR e issues) GitHub Workflows conventional PR dependabot-automerge ossar-analysis testes automatizados Dependabot Netlify Homologação no PR (build preview) Integração
22. GitHub Actions, funding, issue e pull request template e Dependabot. github.com/woliveiras/.github Template
23. Precisão do design - storybook, homologação no PR Responsividade - storybook, cypress, react-testing-library homologação no PR Comportamento dos componentes - storybook, cypress, react-testing-library homologação no PR Performance - auditorias via Netlify Segurança - auditorias via OSSAR Revisão
24. Front End Software Engineer William Oliveira (@1ilhas)
25. https://www.monterail.com/blog/2015/lets-talk-about-fe-qa https://www.perfecto.io/blog/comprehensive-guide-front-end-testing https://maddevs.io/frontend-development/qa-and-testing/ https://techbeacon.com/app-dev-testing/how-qa-can-build-quality-your-software-pi peline https://www.axelerant.com/blog/qa-checklist-testing-basic-frontend-elements https://www.redhat.com/architect/test-applications-cicd-pipeline https://joelhooks.com/jest-and-github-actions https://dev.to/dancurtis/ci-cd-pipeline-with-netlify-and-github-actions-bcm Referências