David Robert, CTO da Elo7, fala sobre "O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin" no Fórum E-Commerce Brasil 2017. Saiba mais em https://www.ecommercebrasil.com.br/forum2017/

1. O uso de PWA e o futuro do
desenvolvimento mobile com React Native e
Kotlin
David Robert - Elo7

2. David Robert
linkedin.com/in/davidrober
t
davidrobert@gmail.com
• Mestre em Inteligência Artificial -
USP
• Graduado em Ciência da
Computação - PUC/SP
• Oficial da Arma de Comunicações
- Exército Brasileiro
• +16 anos trabalhando com
desenvolvimento de software
• CTO @ Elo7

3. 3
marketplace de produtos fora de série

4. Elo7
Android
Talk7
Android
Elo7
Web Mobile
Mobile
Arquitetura Mobile
Elo7
iOS
Talk7
iOS
Talk7
Web Mobile

5. Web Mobile

6. ❏Confiável - Carrega instantaneamente mesmo em condições de
rede incertas
❏Rápido - Responde rapidamente às interações do usuário com
animações suaves e sem intermitência de scroll
❏Cativante - Experiência de usuário imersiva como se fosse um
aplicativo nativo
PWA - Progressive Web Apps

7. ❏ Os service workers são responsáveis por
habilitar o PWA para carregar
instantaneamente, independentemente do
estado da rede
❏ Service workers são como um proxy do
lado do cliente e com poder de controlar
o cache, podendo eliminar a dependência
da rede, garantindo uma experiência
instantânea e confiável para os usuários
Progressive Web Apps
Confiável

8. ❏ 53% dos usuários abandonam um
site quando demora mais de 3
segundos para carregar!
❏ E uma vez carregados, os
usuários esperam que eles sejam
rápidos
Progressive Web Apps
Rápido

9. Os PWAs são instaláveis e não tem a
necessidade de uma loja de aplicativos.
Oferece uma experiência full screen
imersiva, além da possibilidade re-engajar
usuários com push notifications
O Web App Manifest permite o controle
como o aplicativo aparece e como ele é
lançado, podendo especificar os ícones, a
página carregada quando o aplicativo é
iniciado, orientação da tela entre outros
Progressive Web Apps
Cativante

10. Progressive Web Apps
Service Workers
Script que o navegador executa em segundo plano separado da página da Web
❏ JavaScript Worker
❏ Proxy de rede programável, permitindo controlar como as solicitações de
rede da página são tratadas
❏ Encerrado quando ocioso e reiniciado quando necessário novamente
Exemplos de recursos:
➔ notificações por push
➔ sincronização eam segundo plano

11. Progressive Web Apps
Desempenho
• Otimizar eficiência do conteúdo
• Caminho crítico de renderização
• Desempenho da renderização
• Largura de banda pequena e
latência alta

12. Progressive Web Apps
Desempenho
• Otimizar eficiência do conteúdo
• Caminho crítico de renderização
• Desempenho da renderização
• Largura de banda pequena e
latência alta

13. Progressive Web Apps
Desempenho
• Otimizar eficiência do conteúdo
• Caminho crítico de renderização
• Desempenho da renderização
• Largura de banda pequena e
latência alta

14. Progressive Web Apps
Desempenho
• Otimizar eficiência do conteúdo
• Caminho crítico de renderização
• Desempenho da renderização
• Largura de banda pequena e
latência alta

15. Progressive Web Apps
Desempenho
• Otimizar eficiência do conteúdo
• Caminho crítico de renderização
• Desempenho da renderização
• Largura de banda pequena e
latência alta
• Push (enviar) recursos críticos
para a rota do URL inicial.
• Render (renderizar) a rota inicial.
• Pre-cache (armazenar em cache)
as demais rotas.
• Lazy-load (carregar com atraso) e
criar demais rotas de acordo com
a ação do usuário.

16. Progressive Web Apps
Manifesto de Aplicativos Web
❏ Simplifique o fluxo de acesso — os usuários
podem fazer novo acesso automaticamente
em um site, mesmo que a sessão tenha
expirado
❏ Permite acesso em um toque — um seletor
de contas nativos é exibido, eliminando o
formulário de acesso por senha
❏ Armazena credenciais — pode armazenar
uma combinação de nome de usuário e senha
ou até dados de conta universal

17. Progressive Web Apps
Notificações e Push na Web
❏ As notificações por push na
web permitem que os usuários
aceitem atualizações dos sites
❏ O push se baseia em service
workers
❏ Push é invocado quando um
servidor fornece informações a
um service worker
❏ Notificação é a ação de um
service worker ou script de
página web de exibir
informações a um usuário

18. Progressive Web Apps
Push Web no Elo7
❏ Conversão web mobile ~0.9
❏ Conversão com push web ~2.5

19. Native Mobile

20. Elo7
Android
Talk7
Android
Elo7
Web Mobile
Mobile
Arquitetura Mobile
Elo7
iOS
Talk7
iOS
Talk7
Web Mobile

30. Mobile
React Native
React Native
Framework para construir aplicativos nativos

31. React Native
Javascript library para construção de interfaces

32. React Native
Javascript library para construção de interfaces

33. React Native
Vantagens
❏ Compartilhamento de código entre
plataformas
❏ Arquitetura bem mais próxima do que é
utilizado na web
❏ Mais performático que webview

34. React Native
Pontos de Atenção
❏ Outra linguagem de programação - JavaScript
❏ Framework novo - versão beta
❏ Dependência do Facebook em acompanhar
evolução das plataformas
❏ Algumas partes do aplicativo vão continuar
sendo nativo (Java ou Swift)
❏ Aumento do tamanho dos aplicativos

35. React Native
Próximas Etapas
❏ Ampliar a utilização de React
❏ Começar a utilização de React nos
aplicativos comprador Android - Elo7
1. iOS Talk7 - 22.3 MB
2. Android Talk7 - 30 MB
3. iOS Elo7 (sem react) - 24.5 MB
4. Android Elo7 (sem react) - 20 MB

36. Kotlin
Nova linguagem oficial para desenvolvimento
Android nativo
Mobile
Kotlin

37. ❏ Linguagem de programação estaticamente tipada que roda
na JVM
❏ Funcional e Orientada a Objetos
❏ Lançada em 2011 pela JetBrains
❏ Em 2012 se tornou open source
❏ A versão 1.0 foi lançada em 2016
❏ No IO'17 Google anuncia suporte oficial do Kotlin no
desenvolvimento Android
Kotlin
O que é

38. ❏ Novas capacidades que ainda não há no Java como:
❏ Null safety
❏ Funções estendidas
❏ Lambdas
❏ Imutabilidade
❏ Muitas outras aqui
❏ 100% interoperável com Java, gerando bytecode da JVM
❏ Curva de aprendizado bem baixa para quem vem do Java
Kotlin
Vantagens
Fonte: http://www.androidpro.com.br/kotlin

39. ❏ App maior pois o Kotlin tem sua própria biblioteca que é
adicionada ao aplicativo
❏ Tempo de compilação com Gradle mais lento que Java
Kotlin
Desvantagens
Fonte: http://www.androidpro.com.br/kotlin

40. ❏ É possível ter código Java e Kotlin em um mesmo
aplicativo, estes códigos podem inclusive referenciar e
usar um ao outro
❏ O Google implementou funcionalidades no Android Studio
para facilitar a interoperabilidade, como por exemplo,
copiar código Java e ao colar, é automaticamente
transformado em Kotlin
Kotlin
A migração

41. Por onde começar

42. Mão na Massa
• https://developers.google.com/web/progressive-web-apps
• https://facebook.github.io/react-native
• https://kotlinlang.org

43. David Robert
linkedin.com/in/davidrober
t
david.robert@elo7.com
Obrigado!