Embed Size (px)
Citation preview
O uso de PWA e o futuro do desenvolvimento mobile comReact Native e Kotlin
David Robert - Elo7
David Robertlinkedin.com/in/[email protected]
❏ 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
marketplace de produtos fora de série
Elo7Android
Talk7Android
Elo7Web Mobile
MobileArquitetura Mobile
Elo7iOS
Talk7iOS
Talk7Web Mobile
Web Mobile
❏ 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
OfflineLocal Storage
localStorage.setItem("bgcolor", "red")
var currentColor = localStorage.getItem("bgcolor")
localStorage.removeItem("bgcolor")
❏ Amplo suporte nos navegadores❏ Sincrono❏ Limite de capacidade de armazenamento
OfflineApplication Cache CACHE MANIFEST
# 2017-06-27:v2
CACHE:
favicon.ico
index.html
agenda.html
inscricoes.html
css/main.css
js/main.js
images/logo.png
NETWORK:
*
<html manifest="appcache.manifest">
Progressive Web AppsService Workers
Script que o navegador executa em segundo plano separado da página da Web
❏ Proxy de rede programável
❏ Encerrado quando ocioso e reiniciado quando necessário novamente
❏ Pode estar executando mesmo que todas as abas do site estejam fechadas no navegador!
❏ Assíncrono - Uso intenso de Promise
Exemplos de recursos:
➔ notificações por push ➔ sincronização em segundo plano
Progressive Web AppsService Workers & Cache Storage
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('front7').then(function(cache) {
return cache.addAll([
"favicon.ico",
"index.html",
"agenda.html",
"inscricoes.html",
"css/main.css",
"js/main.js",
"images/logo.png"]);
})
);
});
Progressive Web AppsService Workers & Cache Storage
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response){
return response || fetch(event.request.clone());
})
);
});
❏ 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 AppsConfiável
❏ 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 AppsRápido
PWAs podem ser 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, podendo especificar os ícones, a página carregada quando o aplicativo é iniciado, orientação da tela entre outros
Progressive Web AppsCativante
Progressive Web AppsDesempenho
❏ Otimizar eficiência do conteúdo❏ Caminho crítico de renderização❏ Largura de banda pequena e
latência alta❏ PRPL (push, render, pre-cache e
lazy-load)❏
Progressive Web AppsDesempenho
❏ Otimizar eficiência do conteúdo❏ Caminho crítico de renderização❏ Largura de banda pequena e
latência alta❏ PRPL (push, render, pre-cache e
lazy-load)❏
Progressive Web AppsDesempenho
❏ Otimizar eficiência do conteúdo❏ Caminho crítico de renderização❏ Largura de banda pequena e
latência alta❏ PRPL (push, render, pre-cache e
lazy-load)
Progressive Web AppsDesempenho
❏ Otimizar eficiência do conteúdo❏ Caminho crítico de renderização❏ Largura de banda pequena e
latência alta❏ PRPL (sigla para push, render,
pre-cache e lazy-load)❏
➔ 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.
Progressive Web AppsNotificações e Push na Web
❏ As notificações por push na web permitem que os usuários aceitem atualizações dos sites
❏ 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
Progressive Web AppsPush Web no Elo7
❏ Conversão web mobile ~0.9❏ Conversão com push web ~2.5
Native Mobile
Elo7Android
Talk7Android
Elo7Web Mobile
MobileArquitetura Mobile
Elo7iOS
Talk7iOS
Talk7Web Mobile
MobileReact Native
React NativeFramework para construir aplicativos nativos
ReactReactJS & React Native
React NativeReactJS
VS
ReactReactJS & React Native
javascript library frameworkReact NativeReactJS
VS
Características
❏ Mobile Web App
❏ HTML5 app
❏ App híbrido
❏
React Native
❏ Indistinguível de apps feitos com Objective-C, Swift, Java ou Kotlin
❏ Permite mesclar com código nativo
❏
React NativeVantagens
❏ Compartilhamento de código entre plataformas
❏ Arquitetura bem mais próxima do que é utilizado na web
❏ Mais performático que webview
React NativePontos 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
Alguns aplicativos que já utilizamReact Native
React NativePróximas Etapas no Elo7
❏ Ampliar a utilização de React
❏ Começar a utilização de React nos aplicativos comprador Android - Elo7
1. iOS Talk7 - 22.3 MB2. Android Talk7 - 30 MB3. iOS Elo7 (sem react) - 24.5 MB4. Android Elo7 (sem react) - 20 MB
KotlinNova linguagem oficial para desenvolvimento
Android nativo
MobileKotlin
KotlinHello World
package hello
fun main(args: Array<String>) {
println("Hello World!")
}
❏ 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
KotlinCaracterísticas
KotlinCaracterísticas
Conciso Seguro FerramentasAmigáveis
Conciso
POJO com getters, setters, equals(), hashCode(), toString() e copy() em uma linha:
Filtrar uma lista usando expressões lambda:
Singleton? Criando um objeto:
data class Customer(val name: String, val email: String, val company: String)
val positiveNumbers = list.filter { it > 0 }
object ThisIsASingleton {
val companyName: String = "JetBrains"
}
NullPointerExceptions:
Erros com tipos nulos:
Auto Cast:
Seguro
var output: String
output = null // Compilation error
val name: String? = null // Nullable type
println(name.length()) // Compilation error
fun calculateTotal(obj: Any) {
if (obj is Invoice)
obj.calculateTotal()
}
Android Studio
FerramentasAmigáveis
❏ 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 baixa para quem vem do Java
KotlinVantagens
❏ App maior pois o Kotlin tem sua própria biblioteca que é adicionada ao aplicativo
❏ Tempo de compilação com Gradle mais lento que Java
KotlinDesvantagens
❏ É 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
❏ Não é necessário reescrever aplicativos em Kotlin!
KotlinMigração
Por onde começar
Mão na Massa
➔ https://developers.google.com/web/progressive-web-apps
➔ https://facebook.github.io/react-native
➔ https://kotlinlang.org
➔ https://www.alura.com.br
➔ http://engenharia.elo7.com.br
![[Kotlin勉強会] Hello Kotlinの次におさえたいKotlinの勘所](https://img.dokumen.tips/doc/110x75/5a6485ec7f8b9a46568b4ac7/kotlin-hello-kotlinkotlin.jpg)
