O impacto das PWAs no desenvolvimento de apps

Gabriel Teodoro — Wed, 31 Jul 2024 14:51:09 +0000

Progressive Web Apps (PWAs) têm se destacado como uma abordagem poderosa para combinar as melhores características das aplicações web e das aplicações móveis nativas. Com a capacidade de oferecer uma experiência de usuário rápida, confiável e engajadora, as PWAs são uma escolha popular para muitos desenvolvedores que buscam alcançar um público amplo, independentemente do dispositivo ou plataforma.

O que são PWAs?

Progressive Web Apps são aplicações web que utilizam tecnologias modernas para proporcionar uma experiência nativa aos usuários. Elas são:

Progressivas: Funcionam para todos os usuários, independentemente do navegador escolhido, pois são construídas com aprimoramento progressivo como princípio fundamental.
Responsivas: Adaptam-se a diferentes tamanhos de tela e dispositivos, oferecendo uma experiência consistente e otimizada.
Conectadas: Utilizam Service Workers para funcionar offline ou em conexões de rede instáveis.
Seguras: Servidas via HTTPS para garantir que o conteúdo não seja interceptado e manipulado.
Engajadoras: Podem ser instaladas diretamente no dispositivo do usuário, permitindo acesso rápido e direto, sem necessidade de passar pela loja de aplicativos.

Benefícios das PWAs

Desenvolver PWAs oferece diversas vantagens, incluindo:

Acessibilidade: Ampliam o alcance da aplicação para uma base de usuários mais ampla, incluindo dispositivos com conexões de internet mais lentas.
Economia de espaço: Não ocupam espaço significativo no dispositivo do usuário, como as aplicações nativas.
Atualizações automáticas: As atualizações são aplicadas automaticamente, proporcionando uma experiência sempre atualizada.
SEO amigável: São facilmente indexáveis por mecanismos de busca, melhorando a visibilidade online da aplicação.

Tecnologias e Práticas Recomendadas

Para desenvolver uma PWA eficaz, é importante considerar:

Manifesto Web: Criação de um manifesto web (manifest.json) para descrever a aplicação, incluindo nome, ícone, cores temáticas e outras informações relevantes para a instalação na tela inicial dos dispositivos móveis.
Service Workers: Implementação de Service Workers para gerenciar o cache e oferecer funcionalidade offline.
Responsividade: Garantia de que a aplicação seja totalmente responsiva, utilizando media queries e técnicas de design responsivo.
Segurança: Garantia de que a aplicação seja servida via HTTPS para proteger os dados dos usuários e garantir a integridade das informações.

Como usamos no Tino esse recurso?

Tinhamos aqui no Tino uma dúvida sobre o interesse do usuário a baixar ou utilizar algum aplicativo, utilizamos o PWA como um recurso rápido e barato para experimentar essa hipótese.

Primeiro implementamos as configurações mínimas para o PWA funcionar e com uma boa experiência para instalação, infelizmente somente para android é possível criar uma experiência mais fluida onde um botão na tela permite executar o processo de instalar o App.

Algumas semanas depois mais de 30% dos nossos acessos já eram através do PWA instalado no celular dos nossos usuários, comprovando assim um forte interesse a adoção e uso de um App, guiando nossas escolhas de produto por impacto e valor gerado.

Conclusão

Desenvolver aplicações PWA permite aos desenvolvedores oferecer uma experiência de usuário de alta qualidade que combina o melhor das aplicações web e nativas. Ao adotar as melhores práticas e tecnologias modernas, é possível criar PWAs que não apenas atendem, mas superam as expectativas dos usuários em termos de desempenho, confiabilidade e usabilidade.

Este caminho de desenvolvimento não apenas melhora a acessibilidade e a experiência do usuário, mas também simplifica o processo de distribuição e manutenção da aplicação em diferentes plataformas e dispositivos.

Reduzindo o tempo da pipeline em x3 vezes

Gabriel Teodoro — Tue, 18 Jun 2024 17:56:29 +0000

Nesse texto, tenho como objetivo compartilhar a nossa estratégia para diminuir o tempo que nossa pipeline de CI/CD demorava para ser executada, essa estratégia pode ser aplicada independente do framework ou biblioteca.

Esse artigo usará um projeto de front-end que demorava 15 minutos para ter sua pipeline concluída. Iremos considerar a pipeline com: Autenticação no NPM, Instalação de bibliotecas, Lint de arquivos e tipagem, Build, Deploy, Testes (E2E, Unitários e Integrados).

O que você encontrará nesse artigo?

Importância de reduzirmos o tempo de nossas pipelines
Estratégia para redução de tempo de execução
Referências a documentação de ferramentas que estamos utilizando

Antes de começar

O projeto front-end que vamos usar roda com React e Webpack inicialmente
Essa estratégia não é uma bala de prata, só aplicamos ela depois de 3 anos no nosso monolito front-end, evite fazer otimizações prematuras em seu projeto
Pode ser aplicado para projetos de diferentes contextos, porém é necessário analisar se a etapa de build faz sentido ser modificada

Por que eu preciso me preocupar com o tempo da pipeline?

Impacto na entrega de valor - Uma pipeline demorada afeta de maneira significativa a entrega de valor para o usuário, causando falta de eficiência em disponibilizar recursos ou correções para o usuário.
Escalabilidade - Quanto mais o projeto cresce, mais a sua pipeline vai demorar para ser concluída. Em algum momento será mais custoso esperar a pipeline ser concluída do que desenvolver a solução.
Colaboração - Em um time com muitos engenheiros, uma pipeline demorada vai causar um grande gargalo de entregas. Onde um engenheiro irá fazer o merge de uma Pull Request e os outros precisaram rodar a pipeline novamente por conta da mudança. Com a pipeline demorada, isso vai gerar um grande gargalo e vai ficar quase que impossível de se entregar novas soluções.
Otimização de custos - A maioria das ferramentas cobram por tempo de execução da pipeline, quanto mais a sua pipeline demorar maior será o custo final.

Encontrando os gargalos dentro da nossa pipeline

Com a imagem abaixo, podemos analisar o tempo que cada etapa leva para completar a execução de nossa pipeline.

Paralelizando nossa pipeline

Nesse projeto estamos usando o Cloud Build da GCP, com isso não conseguimos ter etapas paralelas dentro de um único trigger. Para isso vamos criar dois novos triggers, um para os testes unitários e outro para os testes integrados, dessa forma eles vão rodar de forma paralela e já irá causar uma redução considerável em nossa pipeline.

Reduzindo o tempo de 15 minutos para 7 minutos.

É importante notar que não vamos conseguir paralelizar os testes E2E, por que eles dependem da etapa de deploy, que depende da etapa de build.

Aprimorando os resultados

Uma forma de aprimorarmos o nosso resultado é melhorando o tempo de build, nesse projeto estávamos usando React com Webpack, com isso o tempo de build levava 3 minutos. Para solucionarmos isso, analisamos algumas ferramentas do mercado e optamos por usar o Vite. Você pode encontrar mais informações sobre o Vite aqui.

Aplicando o Vite em nosso projeto, conseguimos obter esse resultado:

Referências

https://cloud.google.com/build?hl=en
https://vitejs.dev/guide/why.html

DEV Community: Gabriel Teodoro