Frontend responsável: Técnicas com JavaScript para descarregar o Backend

DevParaná 30/05/2025

Transcript

1. FRONTEND FRONTEND RESPONSÁVEL RESPONSÁVEL COMEÇAR!!! TÉCNICAS COM JAVASCRIPT TÉCNICAS COM JAVASCRIPT PARA DESCARREGAR O BACKEND PARA DESCARREGAR O BACKEND
2. DISCLAIMER
3. GUILHERME AUGUSTO GUILHERME AUGUSTO ADS, DBA, GAME DEV ADS, DBA, GAME DEV Dev Gamer Guitar Player @NIKOLAYEVSK404 @NIKOLAYEVSK404
4. Unreal Engine 5
5. Phaser JS
6. FUNÇÃO DO FUNÇÃO DO FROINT-END? FROINT-END? PERGUNTA
7. Coletar e Validar Dados Gerenciar Estado Melhorar Performance Comunicar Backend UX Exibir Interface Resposta
9. MISSÃO MISSÃO BACKEND SOBRECARREGADO!!! CROP DE IMAGENS ENVIO DE ARQUIVOS GERAÇÃO DE RELATÓRIOS VALIDAÇÕES
10. FASE 1 FASE 1 CROP E RESIZE
11. Crop e Resize Corta e redimensiona imagem ANTES do envio Menos banda + menos CPU no backend Exemplo: canvas, cropperjs CONQUISTA: CROP NO FRONT!
12. FASE 2 FASE 2 GERAÇÃP DE PDF
13. Geração de PDF Relatórios gerados no browser Evita que o backend processe e armazene arquivos Exemplo: jspdf, pdf-lib CONQUISTA: PDF NO FRONT!
14. FASE 3 FASE 3 GERAÇÃO DE EXCEL
15. Geração de Excel Planilhas montadas no browser com SheetJS Backend não sofre gerando .xlsx pesado Exemplo: SheetJS (.xlsx) CONQUISTA: EXCEL NO FRONT!
16. FASE 4 FASE 4 VALIDAÇÕES
17. Validações Validar CPF/CNPJ, e-mails, etc no client Bate no backend apenas quando preciso Exemplo: Regex CONQUISTA: VALIDAÇÃO NO FRONT!
18. FASE 5 FASE 5 COMPRESSÃO
19. Compressão Comprime arquivos antes de enviar Ajuda a aliviar a rede e o processamento do backend Exemplos: browser-image-compression, JSZip CONQUISTA: COMPRESSÃO NO FRONT!
20. FASE EXTRA FASE EXTRA SUGESTÕES?
21. Cache Debounce Paginação CSS/JS .min Lazy Loading Banco de dados Sugestões?
22. Corte Resolução Formatação Compressão ERICK WENDEL Js
23. CHEFÃO CHEFÃO LIVE CODING https://frontend-responsa.web.app
24. Conclusão MISSÃO CONCLUÍDA Cada tarefa feita pelo front = menos carga para o backend Frontend moderno poderoso (não apenas estética) Faça o backend focar em se comunicar com o banco de dados
25. MUITO MUITO OBRIGADO!!! OBRIGADO!!! PERGUNTAS? DARK-WEB-STUDIO.WEB.APP DARK-WEB-STUDIO.WEB.APP