SlideShare uma empresa Scribd logo
Progressive Web Apps e o
futuro do Frontend
Raphael Moraes
DevFest Campinas
04/11/2017
Raphael Moraes
Engenheiro de Computação
26 anos
Palmeirense
Star Wars/ Guia do Mochileiro / Doutor Estranho
raphael.lsmoraes@gmail.com
Engenheiro de Frontend - Movile
2
Problematização
3
80%
do tempo do usuário é gasto em seu top 3 de aplicativos (não se iluda, o seu
app não vai estar ali).
4
From Google Progressive Web App Training 5
From Google Chrome Dev Summit ‘17 6
1Bi
From Google Progressive Web App Training 7
PWA
8
O que é Progressive Web App?
9Progressive Web Apps e o futuro do frontend
Progressive web app são experiências que
combinam o melhor de dois mundos,
aplicações nativas e páginas web.
10Citado em Chrome Dev Summit ‘17
PWA
É UM CONCEITO MODULAR
11Progressive Web Apps e o futuro do Frontend
Análise e escolha o que mais se adequa a seu
projeto e negócio para trazer valor a seu
produto.
12Progressive Web Apps e o futuro do Frontend
Behavior Driven Model
Ágil Integrado
Confiável Cativante
13Progressive Web Apps e o futuro do Frontend
Behavior Driven Model
Ágil Integrado
Confiável Cativante
São experiências web tendo todo o alcance da internet a
apenas um clique.
Não há instalações!
É possível utilizar todo o poder de um app moderno!
14Progressive Web Apps e o futuro do Frontend
Behavior Driven Model
Ágil Integrado
Confiável Cativante
Dão a sensação que são parte nativa do seu mobile.
15Progressive Web Apps e o futuro do Frontend
Behavior Driven Model
Ágil Integrado
Confiável Cativante
São confiáveis, isso significa que mesmo não estando
conectado será possível carregar e utilizar a aplicação em
qualquer situação.
16Progressive Web Apps e o futuro do Frontend
Behavior Driven Model
Ágil Integrado
Confiável
Retém o usuário em sua aplicação
Cativante
17Progressive Web Apps e o futuro do Frontend
PWA Checklist
https://developers.google.com/web/progressive-web-apps/checklist
18Progressive Web Apps e o futuro do Frontend
Lighthouse (Google Chrome Audit)
19
Progressive Web Apps e o futuro do
Frontend
PWA
Core Concepts
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Performance
● UX
● Muitas outras API’s
20
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
● Notification API
○ Suportado pelo Chrome, Moz, Opera e
Safari.
○ Cria e configura as notificações;
○ Gerencia as ações;
● Push API
○ Somente suportado pelo Chrome;
○ Gerencia o evento de push (envio e
subscrição);
21
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
Service Worker
Provê confiabilidade em um universo offline, bem
como tratamententos para push notifications e
atualizações assíncronas, trazendo o mundo “nativo” à
web.
22
23
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
Add to Home Screen
Ainda na linha da confiabilidade, provê ao usuario um
acesso rápido as paginas de grande acesso,
aumentando o engajamento para com o PWA.
24
25
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
HTTPS
Sempre utilize HTTPS em seu PWA!
26
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
Desempenho
Tarefas simples fazem a diferença!
● Otimize seus assets;
● Converta o seu monolítico em chunks menores;
● Pense no First time visitor (Retenção!!!);
27
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
UX
Simplicidade e usabilidade são as palavras chaves no
mundo mobile!
28
● Push Notification
● Service Worker
● Add to home screen
● HTTPS
● Desempenho
● UX
● Muitas outras API’s
Progressive Web Apps e o futuro do Frontend
PWA
Core Concepts
API’s 2016/2017+
● WebShare API
● WebVR API
● Credential Management API
● Budget API
● WebUSB API
● Payment API
● ...
29Progressive Web Apps e o futuro do Frontend
PWA StarterKit
Coleção de bibliotecas fornecidas pela
Google para a criação de um Service
Worker.
Vue tem um template de pwa embutido em
seu command-line;
Polymer App toolbox traz uma
coleção de componentes,
ferramentas e templates Tem como objetivo transformar toda
e qualquer aplicação em um PWA
de “fábrica”
30Progressive Web Apps e o Futuro do Frontend
PWA?
Futuro do Frontend
31Progressive Web Apps e o futuro do Frontend
Ser frontend é viver no Bleeding Edge da
tecnologia:
https://whatwebcando.today/
32Progressive Web Apps e o futuro do Frontend
Dúvidas?
Feedbacks, por favor!
raphael.lsmoraes@gmail.com
in/raphael-moraes-26951821/
Muito Obrigado!

Mais conteúdo relacionado

Mais procurados

Desenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapDesenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGap
Mayron Cachina
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
Stefan Horochovec
 
MVPConf - Azure Functions
MVPConf - Azure FunctionsMVPConf - Azure Functions
MVPConf - Azure Functions
CDS
 
React Native - Produtividade e eficiência no desenvolvimento mobile
React Native - Produtividade e eficiência no desenvolvimento mobileReact Native - Produtividade e eficiência no desenvolvimento mobile
React Native - Produtividade e eficiência no desenvolvimento mobile
Dev PP
 
[#DevCast] Quero Desenvolver para phonegap, e agora? O que eu faço?
[#DevCast] Quero Desenvolver para phonegap, e agora? O que eu faço?[#DevCast] Quero Desenvolver para phonegap, e agora? O que eu faço?
[#DevCast] Quero Desenvolver para phonegap, e agora? O que eu faço?
Mayron Cachina
 
São Paulo MuleSoft Meetup - Unwired API Led & Custom Polices
São Paulo MuleSoft Meetup - Unwired API Led & Custom PolicesSão Paulo MuleSoft Meetup - Unwired API Led & Custom Polices
São Paulo MuleSoft Meetup - Unwired API Led & Custom Polices
Guilherme Pereira Silva
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5
Rafael Sakurai
 
SESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidSESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao Android
Rafael Sakurai
 
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Cássio Nandi Citadin
 
7Masters - PWA - Publishing using Universal Windows Apps
7Masters - PWA - Publishing using Universal Windows Apps7Masters - PWA - Publishing using Universal Windows Apps
7Masters - PWA - Publishing using Universal Windows Apps
Gustavo Bellini Bigardi
 
Desenvolvimento Mobile: Híbrido x Nativo
Desenvolvimento Mobile: Híbrido x NativoDesenvolvimento Mobile: Híbrido x Nativo
Desenvolvimento Mobile: Híbrido x Nativo
Letticia Nicoli
 
Abra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/CordovaAbra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/Cordova
Gustavo Costa
 
Desenvolvendo Aplicativos na Secretaria de Assuntos Legislativos do Ministéri...
Desenvolvendo Aplicativos na Secretaria de Assuntos Legislativos do Ministéri...Desenvolvendo Aplicativos na Secretaria de Assuntos Legislativos do Ministéri...
Desenvolvendo Aplicativos na Secretaria de Assuntos Legislativos do Ministéri...
Josafá Filho
 
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web AppsGoogle IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
João Vitor Paes de Barros do Ca
 
Conhecendo o PhoneGap
Conhecendo o PhoneGapConhecendo o PhoneGap
Conhecendo o PhoneGap
Cristiano Gomes
 
TDC2018SP | Trilha .Net - Passado, Presente e Futuro do .NET
TDC2018SP | Trilha .Net - Passado, Presente e Futuro do .NETTDC2018SP | Trilha .Net - Passado, Presente e Futuro do .NET
TDC2018SP | Trilha .Net - Passado, Presente e Futuro do .NET
tdc-globalcode
 
São Paulo MuleSoft Meetups - DevOps
São Paulo MuleSoft Meetups - DevOpsSão Paulo MuleSoft Meetups - DevOps
São Paulo MuleSoft Meetups - DevOps
Guilherme Pereira Silva
 
Phonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emuladorPhonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emulador
Afonso Fernandes
 
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
Fernando Henrique Bonfim Moreno del Rio
 
Hello world hybrid apps oportunidades com ionic framework v2
Hello world hybrid apps  oportunidades com ionic framework v2Hello world hybrid apps  oportunidades com ionic framework v2
Hello world hybrid apps oportunidades com ionic framework v2
Ricardo Netto - MCP, MSP
 

Mais procurados (20)

Desenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGapDesenvolvendo para Android com PhoneGap
Desenvolvendo para Android com PhoneGap
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 
MVPConf - Azure Functions
MVPConf - Azure FunctionsMVPConf - Azure Functions
MVPConf - Azure Functions
 
React Native - Produtividade e eficiência no desenvolvimento mobile
React Native - Produtividade e eficiência no desenvolvimento mobileReact Native - Produtividade e eficiência no desenvolvimento mobile
React Native - Produtividade e eficiência no desenvolvimento mobile
 
[#DevCast] Quero Desenvolver para phonegap, e agora? O que eu faço?
[#DevCast] Quero Desenvolver para phonegap, e agora? O que eu faço?[#DevCast] Quero Desenvolver para phonegap, e agora? O que eu faço?
[#DevCast] Quero Desenvolver para phonegap, e agora? O que eu faço?
 
São Paulo MuleSoft Meetup - Unwired API Led & Custom Polices
São Paulo MuleSoft Meetup - Unwired API Led & Custom PolicesSão Paulo MuleSoft Meetup - Unwired API Led & Custom Polices
São Paulo MuleSoft Meetup - Unwired API Led & Custom Polices
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5
 
SESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao AndroidSESTINFO 2011 Apresentacao Android
SESTINFO 2011 Apresentacao Android
 
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
Desenvolvimento de aplicativos Mobile com HTML5 e Javascript com Phonegap (Te...
 
7Masters - PWA - Publishing using Universal Windows Apps
7Masters - PWA - Publishing using Universal Windows Apps7Masters - PWA - Publishing using Universal Windows Apps
7Masters - PWA - Publishing using Universal Windows Apps
 
Desenvolvimento Mobile: Híbrido x Nativo
Desenvolvimento Mobile: Híbrido x NativoDesenvolvimento Mobile: Híbrido x Nativo
Desenvolvimento Mobile: Híbrido x Nativo
 
Abra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/CordovaAbra sua cabeça, apps híbridos - PhoneGap/Cordova
Abra sua cabeça, apps híbridos - PhoneGap/Cordova
 
Desenvolvendo Aplicativos na Secretaria de Assuntos Legislativos do Ministéri...
Desenvolvendo Aplicativos na Secretaria de Assuntos Legislativos do Ministéri...Desenvolvendo Aplicativos na Secretaria de Assuntos Legislativos do Ministéri...
Desenvolvendo Aplicativos na Secretaria de Assuntos Legislativos do Ministéri...
 
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web AppsGoogle IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
 
Conhecendo o PhoneGap
Conhecendo o PhoneGapConhecendo o PhoneGap
Conhecendo o PhoneGap
 
TDC2018SP | Trilha .Net - Passado, Presente e Futuro do .NET
TDC2018SP | Trilha .Net - Passado, Presente e Futuro do .NETTDC2018SP | Trilha .Net - Passado, Presente e Futuro do .NET
TDC2018SP | Trilha .Net - Passado, Presente e Futuro do .NET
 
São Paulo MuleSoft Meetups - DevOps
São Paulo MuleSoft Meetups - DevOpsSão Paulo MuleSoft Meetups - DevOps
São Paulo MuleSoft Meetups - DevOps
 
Phonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emuladorPhonegap autorefresh - app direto no celular sem emulador
Phonegap autorefresh - app direto no celular sem emulador
 
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
PhoneGap - Desenvolvimento mobile multiplataforma - SECCOMP 2014
 
Hello world hybrid apps oportunidades com ionic framework v2
Hello world hybrid apps  oportunidades com ionic framework v2Hello world hybrid apps  oportunidades com ionic framework v2
Hello world hybrid apps oportunidades com ionic framework v2
 

Semelhante a Pwa e o futuro do frontend

Do MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVCDo MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
Janderson Silva
 
API management: um aliado para construção de APIs
API management: um aliado para construção de APIsAPI management: um aliado para construção de APIs
API management: um aliado para construção de APIs
Rafael de Paula Souza
 
Transformando o site da Magnetis em PWA
Transformando o site da Magnetis em PWATransformando o site da Magnetis em PWA
Transformando o site da Magnetis em PWA
Luís Felipe Souza
 
BDD on Mobile: Utilizando Cucumber e Appium para executar testes automatizado...
BDD on Mobile: Utilizando Cucumber e Appium para executar testes automatizado...BDD on Mobile: Utilizando Cucumber e Appium para executar testes automatizado...
BDD on Mobile: Utilizando Cucumber e Appium para executar testes automatizado...
minastestingconference
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Sérgio Souza Costa
 
Opções de Backends para seus apps móveis: Análise e Arquiteturas
Opções de Backends para seus apps móveis: Análise e ArquiteturasOpções de Backends para seus apps móveis: Análise e Arquiteturas
Opções de Backends para seus apps móveis: Análise e Arquiteturas
Jose Papo, MSc
 
Repensando o ESB: sua arquitetura SOA, usando APIs
Repensando o ESB: sua arquitetura SOA, usando APIsRepensando o ESB: sua arquitetura SOA, usando APIs
Repensando o ESB: sua arquitetura SOA, usando APIs
Fábio Rosato
 
Progressive Web Apps [pt_BR]
Progressive Web Apps [pt_BR]Progressive Web Apps [pt_BR]
Progressive Web Apps [pt_BR]
Evandro Santos
 
E so mais um campinho na tela
E so mais um campinho na telaE so mais um campinho na tela
E so mais um campinho na tela
Vandre Ramos, MSc, MBA, CSM
 
SharePoint Framework - Uma plataforma aberta e conectada
SharePoint Framework - Uma plataforma aberta e conectadaSharePoint Framework - Uma plataforma aberta e conectada
SharePoint Framework - Uma plataforma aberta e conectada
Lambda3
 
Roadmap - Rodney Repullo
Roadmap - Rodney RepulloRoadmap - Rodney Repullo
Roadmap - Rodney Repullo
Magic Software Brasil
 
Desenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionicDesenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionic
Universidade Federal Rural do Semi Arido
 
Transição do desenvolvimento web para apps - o caminho suave
Transição do desenvolvimento web para apps - o caminho suaveTransição do desenvolvimento web para apps - o caminho suave
Transição do desenvolvimento web para apps - o caminho suave
Renan Moreira de Oliveira
 
O papel do desenvolvedor front end
O papel do desenvolvedor front endO papel do desenvolvedor front end
O papel do desenvolvedor front end
Romário J. Santos
 
Mobile Ria Para Aplicacoes Para Negocios
Mobile Ria Para Aplicacoes Para NegociosMobile Ria Para Aplicacoes Para Negocios
Mobile Ria Para Aplicacoes Para Negocios
Rodney Repullo
 
Desenvolvimento web e mobile ifce
Desenvolvimento web e mobile   ifceDesenvolvimento web e mobile   ifce
Desenvolvimento web e mobile ifce
Adriano Patrick Cunha
 
Cloud iot novos requisitos software
Cloud iot novos requisitos softwareCloud iot novos requisitos software
Cloud iot novos requisitos software
Roberto C. Mayer
 
Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan B...
Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan B...Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan B...
Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan B...
E-Commerce Brasil
 
2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android
Messias Batista
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
Ruan Carvalho
 

Semelhante a Pwa e o futuro do frontend (20)

Do MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVCDo MVP ao PWA, melhorando o engajamento com cliente na CVC
Do MVP ao PWA, melhorando o engajamento com cliente na CVC
 
API management: um aliado para construção de APIs
API management: um aliado para construção de APIsAPI management: um aliado para construção de APIs
API management: um aliado para construção de APIs
 
Transformando o site da Magnetis em PWA
Transformando o site da Magnetis em PWATransformando o site da Magnetis em PWA
Transformando o site da Magnetis em PWA
 
BDD on Mobile: Utilizando Cucumber e Appium para executar testes automatizado...
BDD on Mobile: Utilizando Cucumber e Appium para executar testes automatizado...BDD on Mobile: Utilizando Cucumber e Appium para executar testes automatizado...
BDD on Mobile: Utilizando Cucumber e Appium para executar testes automatizado...
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Opções de Backends para seus apps móveis: Análise e Arquiteturas
Opções de Backends para seus apps móveis: Análise e ArquiteturasOpções de Backends para seus apps móveis: Análise e Arquiteturas
Opções de Backends para seus apps móveis: Análise e Arquiteturas
 
Repensando o ESB: sua arquitetura SOA, usando APIs
Repensando o ESB: sua arquitetura SOA, usando APIsRepensando o ESB: sua arquitetura SOA, usando APIs
Repensando o ESB: sua arquitetura SOA, usando APIs
 
Progressive Web Apps [pt_BR]
Progressive Web Apps [pt_BR]Progressive Web Apps [pt_BR]
Progressive Web Apps [pt_BR]
 
E so mais um campinho na tela
E so mais um campinho na telaE so mais um campinho na tela
E so mais um campinho na tela
 
SharePoint Framework - Uma plataforma aberta e conectada
SharePoint Framework - Uma plataforma aberta e conectadaSharePoint Framework - Uma plataforma aberta e conectada
SharePoint Framework - Uma plataforma aberta e conectada
 
Roadmap - Rodney Repullo
Roadmap - Rodney RepulloRoadmap - Rodney Repullo
Roadmap - Rodney Repullo
 
Desenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionicDesenvolvimento de aplicativo utilizando o framework ionic
Desenvolvimento de aplicativo utilizando o framework ionic
 
Transição do desenvolvimento web para apps - o caminho suave
Transição do desenvolvimento web para apps - o caminho suaveTransição do desenvolvimento web para apps - o caminho suave
Transição do desenvolvimento web para apps - o caminho suave
 
O papel do desenvolvedor front end
O papel do desenvolvedor front endO papel do desenvolvedor front end
O papel do desenvolvedor front end
 
Mobile Ria Para Aplicacoes Para Negocios
Mobile Ria Para Aplicacoes Para NegociosMobile Ria Para Aplicacoes Para Negocios
Mobile Ria Para Aplicacoes Para Negocios
 
Desenvolvimento web e mobile ifce
Desenvolvimento web e mobile   ifceDesenvolvimento web e mobile   ifce
Desenvolvimento web e mobile ifce
 
Cloud iot novos requisitos software
Cloud iot novos requisitos softwareCloud iot novos requisitos software
Cloud iot novos requisitos software
 
Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan B...
Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan B...Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan B...
Auditório de Soluções (15/08): PWA - O Futuro dos Aplicativos Mobile - Ivan B...
 
2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android2017 08-11 - Androidos V - Minicurso - Introdução ao android
2017 08-11 - Androidos V - Minicurso - Introdução ao android
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
 

Último

Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ismael Ash
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
Ismael Ash
 
Apresentação sobre Deep Web e anonimização
Apresentação sobre Deep Web e anonimizaçãoApresentação sobre Deep Web e anonimização
Apresentação sobre Deep Web e anonimização
snerdct
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
Faga1939
 
Aula combustiveis mais utilizados na indústria
Aula combustiveis mais utilizados na indústriaAula combustiveis mais utilizados na indústria
Aula combustiveis mais utilizados na indústria
zetec10
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
ronaldos10
 

Último (6)

Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
 
Apresentação sobre Deep Web e anonimização
Apresentação sobre Deep Web e anonimizaçãoApresentação sobre Deep Web e anonimização
Apresentação sobre Deep Web e anonimização
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
 
Aula combustiveis mais utilizados na indústria
Aula combustiveis mais utilizados na indústriaAula combustiveis mais utilizados na indústria
Aula combustiveis mais utilizados na indústria
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
 

Pwa e o futuro do frontend

  • 1. Progressive Web Apps e o futuro do Frontend Raphael Moraes DevFest Campinas 04/11/2017
  • 2. Raphael Moraes Engenheiro de Computação 26 anos Palmeirense Star Wars/ Guia do Mochileiro / Doutor Estranho raphael.lsmoraes@gmail.com Engenheiro de Frontend - Movile 2
  • 4. 80% do tempo do usuário é gasto em seu top 3 de aplicativos (não se iluda, o seu app não vai estar ali). 4
  • 5. From Google Progressive Web App Training 5
  • 6. From Google Chrome Dev Summit ‘17 6 1Bi
  • 7. From Google Progressive Web App Training 7 PWA
  • 8. 8 O que é Progressive Web App?
  • 9. 9Progressive Web Apps e o futuro do frontend Progressive web app são experiências que combinam o melhor de dois mundos, aplicações nativas e páginas web.
  • 10. 10Citado em Chrome Dev Summit ‘17 PWA É UM CONCEITO MODULAR
  • 11. 11Progressive Web Apps e o futuro do Frontend Análise e escolha o que mais se adequa a seu projeto e negócio para trazer valor a seu produto.
  • 12. 12Progressive Web Apps e o futuro do Frontend Behavior Driven Model Ágil Integrado Confiável Cativante
  • 13. 13Progressive Web Apps e o futuro do Frontend Behavior Driven Model Ágil Integrado Confiável Cativante São experiências web tendo todo o alcance da internet a apenas um clique. Não há instalações! É possível utilizar todo o poder de um app moderno!
  • 14. 14Progressive Web Apps e o futuro do Frontend Behavior Driven Model Ágil Integrado Confiável Cativante Dão a sensação que são parte nativa do seu mobile.
  • 15. 15Progressive Web Apps e o futuro do Frontend Behavior Driven Model Ágil Integrado Confiável Cativante São confiáveis, isso significa que mesmo não estando conectado será possível carregar e utilizar a aplicação em qualquer situação.
  • 16. 16Progressive Web Apps e o futuro do Frontend Behavior Driven Model Ágil Integrado Confiável Retém o usuário em sua aplicação Cativante
  • 17. 17Progressive Web Apps e o futuro do Frontend PWA Checklist https://developers.google.com/web/progressive-web-apps/checklist
  • 18. 18Progressive Web Apps e o futuro do Frontend Lighthouse (Google Chrome Audit)
  • 19. 19 Progressive Web Apps e o futuro do Frontend PWA Core Concepts ● Push Notification ● Service Worker ● Add to home screen ● HTTPS ● Performance ● UX ● Muitas outras API’s
  • 20. 20 ● Push Notification ● Service Worker ● Add to home screen ● HTTPS ● Desempenho ● UX ● Muitas outras API’s Progressive Web Apps e o futuro do Frontend PWA Core Concepts ● Notification API ○ Suportado pelo Chrome, Moz, Opera e Safari. ○ Cria e configura as notificações; ○ Gerencia as ações; ● Push API ○ Somente suportado pelo Chrome; ○ Gerencia o evento de push (envio e subscrição);
  • 21. 21 ● Push Notification ● Service Worker ● Add to home screen ● HTTPS ● Desempenho ● UX ● Muitas outras API’s Progressive Web Apps e o futuro do Frontend PWA Core Concepts Service Worker Provê confiabilidade em um universo offline, bem como tratamententos para push notifications e atualizações assíncronas, trazendo o mundo “nativo” à web.
  • 22. 22
  • 23. 23 ● Push Notification ● Service Worker ● Add to home screen ● HTTPS ● Desempenho ● UX ● Muitas outras API’s Progressive Web Apps e o futuro do Frontend PWA Core Concepts Add to Home Screen Ainda na linha da confiabilidade, provê ao usuario um acesso rápido as paginas de grande acesso, aumentando o engajamento para com o PWA.
  • 24. 24
  • 25. 25 ● Push Notification ● Service Worker ● Add to home screen ● HTTPS ● Desempenho ● UX ● Muitas outras API’s Progressive Web Apps e o futuro do Frontend PWA Core Concepts HTTPS Sempre utilize HTTPS em seu PWA!
  • 26. 26 ● Push Notification ● Service Worker ● Add to home screen ● HTTPS ● Desempenho ● UX ● Muitas outras API’s Progressive Web Apps e o futuro do Frontend PWA Core Concepts Desempenho Tarefas simples fazem a diferença! ● Otimize seus assets; ● Converta o seu monolítico em chunks menores; ● Pense no First time visitor (Retenção!!!);
  • 27. 27 ● Push Notification ● Service Worker ● Add to home screen ● HTTPS ● Desempenho ● UX ● Muitas outras API’s Progressive Web Apps e o futuro do Frontend PWA Core Concepts UX Simplicidade e usabilidade são as palavras chaves no mundo mobile!
  • 28. 28 ● Push Notification ● Service Worker ● Add to home screen ● HTTPS ● Desempenho ● UX ● Muitas outras API’s Progressive Web Apps e o futuro do Frontend PWA Core Concepts API’s 2016/2017+ ● WebShare API ● WebVR API ● Credential Management API ● Budget API ● WebUSB API ● Payment API ● ...
  • 29. 29Progressive Web Apps e o futuro do Frontend PWA StarterKit Coleção de bibliotecas fornecidas pela Google para a criação de um Service Worker. Vue tem um template de pwa embutido em seu command-line; Polymer App toolbox traz uma coleção de componentes, ferramentas e templates Tem como objetivo transformar toda e qualquer aplicação em um PWA de “fábrica”
  • 30. 30Progressive Web Apps e o Futuro do Frontend PWA? Futuro do Frontend
  • 31. 31Progressive Web Apps e o futuro do Frontend Ser frontend é viver no Bleeding Edge da tecnologia: https://whatwebcando.today/
  • 32. 32Progressive Web Apps e o futuro do Frontend Dúvidas? Feedbacks, por favor! raphael.lsmoraes@gmail.com in/raphael-moraes-26951821/ Muito Obrigado!