Offline-first Progressive Web Apps no BrazilJS 2016


A BrazilJS é sem dúvida nenhuma o maior evento de JavaScript, ou como o mesmo se intitula, a maior conferência de JavaScript do Universo. Esse ano, mais de 1.500 desenvolvedores vieram para a capital gaúcha presenciar palestras de altíssimo nível e fazer muito network.

Como já ficou comum na BrazilJS, o nível dos palestrantes foi altíssimo! Nesse post vou fazer um resumo sobre o assunto abordado na palestra “Offline first progressive web apps part II the next generation uncovered” apresentada por Jake Archibald. Jake uma das maiores referência sobre Service Workers, mostrou que aplicações SPA geralmente têm a renderização mais lenta e como podemos tentar resolver esse problema com streams.

JavaScript - BrazilJS

Além disso, Jake mostrou que é possível competir, e às vezes até ganhar, de apps nativos com foco em Offline First e usando Progressive Web Apps.

Offline First

Partindo do próprio nome do conceito, a definição básica sugere um foco no estado Offline de qualquer funcionalidade ou etapa da aplicação, seja no ambiente de execução, planejamento, desenvolvimento entre outros aspectos para concepção de uma aplicação web ou não, pois o objetivo real com isso é que independente de como for a experiência criada, o produto final não irá perder seus estados funcionais e comunicativos com o usuário caso não exista conexão.

gifrobo

Progressive Web App

Progressive Web App – PWA (aplicativo progressivo para a web) são experiências que combinam o melhor da web e o melhor de aplicativos, começa como uma simples aba no navegador e se torna “progressivamente mais app” à medida em que você engaja e interage com ele. Até chegar ao ponto onde basta você adicionar o Web App à sua página inicial e pronto: ele passa a adquirir funções que antes eram exclusivas de aplicativos nativos: geolocalização, notificações, uso offline, etc.

A PWA usa recursos modernos da web para oferecer uma experiência de usuário app-like. Eles evoluem a partir de páginas em abas do navegador para imersivos, aplicativos de nível superior, mantendo baixo atrito da web a cada momento.

É importante lembrar que a PWA funciona em todos os dispositivos, pois são carregados em navegadores.

Como o usuário constrói um relacionamento com esses aplicativos através do uso repetido, eles fazem com que carreguem muito mais rápido em conexões de redes lentas (graças ao Service Worker).

Service Workers

Service Workers é um tipo de Web Worker, que por sua vez é uma execução em background, ou seja, fora do runtime da aplicação, que inclui funcionalidades para se trabalhar com recursos Offline, mesmo que a etapa deste processo se inicie pelo meio Online.

Abaixo listamos as principais características do Progressive Web Apps:

  • Progressive – Funciona para todos os usuários, independentemente da escolha do navegador, porque eles são construídos com aprimoramento progressivo como um princípio central.
  • Responsive – Utilizar em qualquer dispositivo, desktop, celular, tablet, etc.
  • Connectivity independent – Melhorado com service workers para funcionar off-line ou em redes de baixa qualidade.
  • App-like – Usa o modelo de app-shell para fornecer navegações e interações de estilo app.
  • Fresh – Armazena em cache os dados mais recentes, com processos de service workers.
  • Safe – Servido via TLS para evitar espionagem e garantir que o conteúdo não será adulterado.
  • Discoverable – Sejam identificáveis como “aplicações” graças à manifesto do W3C e escopo de registro de service workers permitindo que os motores de busca possa encontrá-los.
  • Re-engageable – Fácil reengajamento através de recursos como notificações push.
  • Installable – Permitir aos usuários “manter” aplicativos que encontram mais útil em sua tela inicial, sem o incômodo de uma loja de aplicativos.
  • Linkable – Facilmente compartilhável via URL e não requer instalação.

Como podemos ver, Progressive Web Apps ainda é pouco utilizado e conhecido, mas já é um bom momento para brincar com as metodologias por trás deles e ver o quão bem elas podem se aplicar aos seus aplicativos web.

Para finalizar, gostaria de comentar que um dos pontos mais legais de ir a eventos desse porte é ficar por dentro de quais tendências de mercado tem mais possibilidade de sucesso nos próximos anos.

Abaixo, listamos alguns assuntos para ficarmos de olho de acordo com os assuntos debatidos nas palestras:
– Progressive Web Apps (Service/Web Workers)
– Programação Funcional e Reativa
– Diversidade em equipes
– JavaScript Universal (ou Isomórfico)
– Offline first
– Acessibilidade
– Performance
– Linked Data
– IoT – Internet das Coisas

Se você se interessou pelo assunto, pode acessar os slides da palestra que estão disponíveis no site de Jake Archibald. O vídeo da palestra também pode ser conferido no Youtube.

 

Fernando Silva
Últimos posts por Fernando Silva (exibir todos)

Comentários

comentário(s)

Categories