Slides da palestra "Testando aplicações PWA com Lighthouse" apresentada no TDC 2017 | São Paulo - Trilha DevTest. Lighthouse é uma ferramenta open source desenvolvida pelo Google que permite realizar testes e validações em uma aplicação web. O resultado mostra se a aplicação é uma PWA (implementa todos os itens do PWA Checklist do Google), se a performance e a acessibilidade da aplicação está boa, além de analisar o uso de boas práticas no desenvolvimento de aplicações web modernas. Nesta talk veremos como implementar o Lighthouse nos testes de uma aplicação PWA.

1. Globalcode – Open4education
Trilha – DevTest
Jefferson Martins de Andrade
GitHub/Twitter: @jeffersondev

2. Globalcode – Open4education
TESTANDO APLICAÇÕES PWA
COM LIGHTHOUSE
Trilha DevTest

3. Globalcode – Open4education
Agenda
O que é
Como utilizar
O que ele testa
Arquitetura
Integrações

4. Globalcode – Open4education
O que é Lighthouse
Testes em aplicações web (PWA)
Desenvolvido pelo Google
Opensource e Ativo
Boa documentação
Extensível

5. Globalcode – Open4education
Como utilizar o Lighthouse
Google Chrome Canary
Extensão Google Chrome
CLI (pacote npm)

6. Globalcode – Open4education
O que o Lighthouse testa

7. Globalcode – Open4education
Categoria PWA
Baseado no Google PWA Checklist
14 verificações
HTTPs
Web App Manifest
Service Worker
...

8. Globalcode – Open4education
Categoria Performance

9. Globalcode – Open4education
Categoria Performance
Imagens otimizadas
Tamanho e tempo de carregamento de js
Quantidade de nós no DOM renderizado
...

10. Globalcode – Open4education
Categoria Acessibilidade
Elementos bem estruturados
Utilização correta de atributos
Atributos ARIA
Contraste de cores
...

11. Globalcode – Open4education
Melhores práticas
APIs depreciadas
Uso correto de cache
Solicitar permissões no carregamento da página
Paste em input de senhas
...

12. Globalcode – Open4education
DEMOS

13. Globalcode – Open4education
ARQUITETURA LIGHTHOUSE

14. Globalcode – Open4education

15. Globalcode – Open4education
INTEGRAÇÕES

16. Globalcode – Open4education
Calibre
https://calibreapp.com/

17. Globalcode – Open4education
WebPageTest
https://www.webpagetest.org/
Projeto iniciado pelo AOL em 2008
Atualmente mantido pelo Google
Opensource

18. Globalcode – Open4education
CLI
Gulp
Webpack Plugin
Integração com Mocha
Configurável
lighthouse --config-path=custom-config.js

19. Globalcode – Open4education
DEMO

20. Obrigado!