O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin

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

David Robert
linkedin.com/in/davidrobert
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
marketplace de produtos fora de série

Elo7
Android
Talk7
Android
Elo7
Web Mobile
Mobile
Arquitetura Mobile
Elo7
iOS
Talk7
iOS
Talk7
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

Offline
Local Storage
localStorage.setItem("bgcolor", "red")
var currentColor = localStorage.getItem("bgcolor")
localStorage.removeItem("bgcolor")
❏ Amplo suporte nos navegadores
❏ Sincrono
❏ Limite de capacidade de armazenamento

Offline
Application 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 Apps
Service 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

Service 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"]);
})
);
});

Service 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
Confiá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
Rá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
Cativante

Desempenho
❏ 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)
❏

Desempenho
latência alta
❏ PRPL (push, render, pre-cache e
lazy-load)

Desempenho
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.

Notificaçõ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

Push Web no Elo7
❏ Conversão web mobile ~0.9
❏ Conversão com push web ~2.5

Mobile
React Native
React Native
Framework para construir aplicativos nativos

React
ReactJS & React Native
React NativeReactJS
VS

React
ReactJS & React Native
javascript library framework
React 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 Native
Vantagens
❏ Compartilhamento de código entre
plataformas
❏ Arquitetura bem mais próxima do que é
utilizado na web
❏ Mais performático que webview

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

Alguns aplicativos que já utilizam
React Native

React Native
Pró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 MB
2. Android Talk7 - 30 MB
3. iOS Elo7 (sem react) - 24.5 MB
4. Android Elo7 (sem react) - 20 MB

Kotlin
Nova linguagem oficial para desenvolvimento
Android nativo
Mobile
Kotlin

Kotlin
Hello 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
Kotlin
Características

Kotlin
Características
Conciso Seguro
Ferramentas
Amigá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
Ferramentas
Amigá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
Kotlin
Vantagens

❏ 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

❏ É 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!
Kotlin
Migração

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

David Robert
linkedin.com/in/davidrobert
david.robert@elo7.com
Obrigado!

O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin

Semelhante a O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin (20)

Mais de David Robert Camargo de Campos

Mais de David Robert Camargo de Campos (16)

Último

Último (7)

O uso de PWA e o futuro do desenvolvimento mobile com React Native e Kotlin