O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin - David Robert
Transferir como PPTX, PDF0 gostou735 visualizações
O documento explora o uso de Progressive Web Apps (PWAs) e as perspectivas para o desenvolvimento mobile com React Native e Kotlin. Destaca a importância de PWAs em proporcionar uma experiência rápida e confiável aos usuários, utilizando recursos como service workers e notificações por push. Além disso, discute as vantagens e desafios do uso de React Native e Kotlin para o desenvolvimento de aplicativos móveis, incluindo compatibilidade e melhorias de desempenho.
O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin - David Robert
- 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