Jéssica é uma profissional com mais de 7 anos de experiência em desenvolvimento web e co-host de um podcast sobre programação. O documento aborda a construção de Progressive Web Apps (PWAs) utilizando React, suas características, benefícios e como criar uma aplicação de notícias utilizando essas tecnologias. Além disso, apresenta cases de sucesso que demonstram o aumento de conversões e crescimento de usuários ao adotar PWAs.

2. Quem é a Jéssica?
Trabalho há mais de 7 anos com
desenvolvimento Web;
Líder de desenvolvimento na
empresa onde trabalha;
Co-host do podcast PodProgramar;

3. Por que falar sobre PWA e React?

4. Uma ponte que
conecta diversas
aplicações.
O que é uma API?

5. O que é uma PWA?
É um acrônimo para Progressive
Web Apps, ou Aplicações
Web Progressivas.
Desenvolver com melhoria
progressiva é um paradigma em
que a aplicação deverá estar
disponível para todos.

6. PWA - Requisitos e Características
Deve usar HTTPS;
Deve ter Layout Responsivo;
Deve funcionar Offline ou em conexões lentas;
Deve ser Cross-Browser;
Deve ser possível compartilhar através de uma URL;
Deve permitir ao usuário adicionar um atalho;
Deve ter um Service Worker;

7. Service Worker?
Basicamente um arquivo javascript com instruções;
Atua como um proxy entre a aplicação web, o navegador e a
internet (quando disponível);
Principais funções:
- Criar experiências offline;
- Interceptar requisições de rede;
- Tomar medidas de acordo com a disponibilidade da rede;
- Atualizar ativos no servidor;

8. SPA
Aplicação de Página Única (Single-Page Application);
Usuário tem uma experiência próxima a de uma aplicação
desktop;
Um único carregamento de HTML + Javascript + CSS;
Os dados adicionais são carregados conforme
necessidade;

9. Por que criar uma PWA?
Desenvolver seguindo as melhores práticas de mercado;
Performance cria engajamento entre os usuários;
Conversão dos usuários;
Tudo em um único produto;

10. Cases de sucesso
76% aumento de conversões
30% em crescimento de usuários
ativos no Android
14% em crescimento de usuários
ativos no iOS
Fonte: https://developers.google.com/web/showcase/

11. Cases de Sucesso
Tempo de carregamento passou
de 11 segundos para apenas 4.
A versão PWA é 90% menor que
o APP nativo para Android.
Fonte:
https://developers.google.com/web/showcase/

12. Vamos falar de Web Components
São trechos de código HTML+CSS+Javascript
reaproveitáveis;
Existem ferramentas para facilitar a criação de
componentes:
Vue.js, React, Angular...

13. React?
Ferramenta especializada em criar componentes;
Criada pela equipe do Instagram antes da compra pelo
Facebook;
Trabalha com Virtual-DOM;

15. Por que utilizar React?
Popularidade e comunidade em crescimento;
Quase 110 mil stars no Github;
Curva de aprendizagem;
Material de apoio;
Escrever aplicações nativas com React Native;

16. Virtual-DOM?
Técnica conceitualmente simples, porém complexa de
aplicar;
Manipulação do objeto e não o DOM verdadeiro;
React facilita a manipulação e criação de
elementos DOM no javascript;

17. npm
Gerenciador de pacotes
para o Javascript;

18. Definição do APP
Feed de notícias;
Fonte de notícias: API do Hacker News;
Possibilidade de ver as notícias por categorias;
Utilização de cache para acesso offline;

19. Criando nossa PWA com React
create-react-app ultimas-noticias
npm install -g create-react-app

20. Estrutura de pastas
Ao executar o comando são gerados os
arquivos necessários para executar
um app React;
O service worker é gerado através do
arquivo registerServiceWorker.js,
porém só funciona em produção;

21. Editando o manifest.json
Onde são definidas as
características de aparência
do app;
O arquivo de manifest é
carregado no index.html na
pasta public;

22. Executando
npm start

23. Primeiras alterações
Editado o arquivo
public/index.html;
Adicionadas as logos;
Alterado o favicon;
Editado o arquivo
App.js;

24. Executando
npm start

25. Definição dos Componentes
Topo.jsx
Menu.jsx
Noticias.jsx

26. Criação dos componentes

27. React Route npm install react-router-dom

28. Componente Topo

29. Chamada do Componente Topo

30. Executando
npm start

31. Componente Menu

32. Chamando o componente Menu

33. Executando
npm start

34. Axios
npm install axios
Axios é um cliente HTTP utilizado para fazer a
conexão com APIs;

35. Componente Noticias

36. Componente Noticias

37. Chamando o componente Noticias

38. Executando

39. Salvando os dados no Local Storage (Cache)

40. Gerando a Build
npm run build
npm i serve -g
serve -s build

41. Lighthouse

42. Quer saber mais sobre PWA?
Livro: "Progressive Web Apps, construa aplicações
progressivas com React" do Guilherme Pontes
Podcast: PodProgramar #31 (Spotify)

43. Onde encontrar o código?
https://github.com/jessizanelato/ultimas-noticias

44. Onde me encontrar?
Twitter: @jessizanelato
E-mail: jessizanelato@gmail.com