SlideShare uma empresa Scribd logo
1 de 52
Baixar para ler offline
A WEB MODERNA
GO WEB! 1
Sobre nós
Waldemar Neto @waldemarnt
http://walde.co/
Lucas Lago @lucaslago
https://twitter.com/bender_lago
2
A TENDÊNCIA É WEB
3
Crescimento dos smartphones4
Onde a web se encaixa nas tecnologias emergentes?
Iot smart* Write once
Sistemas
enterprise
Jogos/Entr
eterimento
5
Voltando no tempo...
6
Quem usava browsers?
7
8
O que é exatamente um Browser e como ele funciona9
Interface de usuário10
Estrutura
Fonte: html5rocks
11
Rendering engines12
Fluxo de renderização13
Os desafios da web
14
Latência e baixo consumo de rede15
Websockets e Server Sent Events (SSE)
HTTP SOCKET SSE
16
Desenvolvendo para diferentes ambientes
17
APPs nativas
ESCREVE TESTA COMPILA
ESCREVE TESTA COMPILA
ESCREVE TESTA COMPILA
ESCREVE TESTA PUBLICA
18
APPs hibridas
COMPILA
COMPILA
COMPILA
ESCREVE TESTA
PUBLICA
19
Compilando para desktop
HTML
CSS
JS
20
APPs Híbridas conhecidas para desktop21
Compilando para mobile
HTML
CSS
C#
javascript
22
APPs mobile híbridas conhecidas23
24
Progressive Web Apps (PWA)
Antes Depois
25
O que é uma PWA?
Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model.
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
Re-engageable - Makes re-engagement easy through features like push notifications.
Installable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store.
Linkable - Easily share via URL, does not require complex installation.
26
Abrir a loja
Buscar App
Clicar em
instalar
Aceitar
permissões
Download
Usar!
100
80
64
51
40
32
http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
27
Sem
permissões!!
Sem instalar
nada!
Experiência na
hora!
28
29
Carregar URL
Usar!
Aceitar
Permissões
Instalar Service
Worker
Add
Homescreen
...
Offline ready!
30
Carregar URL
Usar!
Aceitar
Permissões
Instalar Service
Worker
Add
Homescreen
...
Abrir a loja
Buscar App
Clicar em
instalar
Aceitar
permissões
Download
Usar!
Offline ready!
31
Carregar URL
Usar!
Aprimoramento
progressivo...
O Service Worker inicia o
"Aprimoramento Progressivo"
enquanto o usuário interage com a
página...
// index.html
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(reg) {
console.log('Service Worker Registration succeeded: ' + JSON.stringify(reg));
})
.catch(function(error) {
console.log('Service Worker Registration failed with: ' + error);
})
}https://github.com/lucaslago/catnap
Download to
client
Install
Activate
// sw.js
self.addEventListener('install', function(event) {
event.waitUntil(caches.open('catnap')
.then(function(cache) {
return cache.addAll([
'/index.html',
'/video/cat.mp4',
'/audio/music.mp3',
'/css/style.css'
]);
})
);
});
https://github.com/lucaslago/catnap
Register SW
Com o Service Worker registrado e ativo
você passa a ter controle sobre request,
responses e cache.
34
Uma vez ativo, podemos interceptar
requests, inclusive para recursos
cross-origin!
● Controle sobre requests
● Controle sobre response
● Controle sobre cache
self.addEventListener('fetch', function(event) {
console.log(event.request.url);
console.log(event.request.method);
console.log(event.request.headers);
});
// Interceptando requests e respondendo com texto
self.addEventListener('fetch', function(event) {
event.respondWith(new Response('oii :)', { statusCode: 200 });
});
● Controle sobre requests
● Controle sobre response
● Controle sobre cache
self.addEventListener('fetch', function(event) {
event.respondWith(caches.match(event.request)
// Ver se existe no cache antes
.then(function(response) {
return response ? response : fetch(event.request);
})
);
});
Vamos adicionar nosso web app na home screen...
<link rel="manifest" href="manifest.json">
{
"short_name": "Catnap",
"name": "Catnap",
"display": "fullscreen",
"orientation": "portrait",
"icons": [
{
"src": "/images/icon-150.png",
"sizes": "150x150",
"type": "image/png"
}
],
"start_url": "/",
"theme_color": "#454343",
"background_color": "#454343"
}
Aparenta ser um app nativo no seu smartphone, não?
37
Vamos aprimorar as capacidades e pedir por
permissões de push notification ao usuário...
Notification.requestPermission(function(result) {
if(result === 'denied') {
console.log('Permissão negada');
} else if(result === 'default') {
console.log('Permissão fechada');
} else {
console.log('Permissão garantida! Notificações aeee!');
}
});
Você está no controle de quando permissões são requisitadas.
38
Push notifications
self.addEventListener('push', function(event) {
var data = e.data.json();
var message = data.message;
var title = data.title;
return new Notification(title, {
body: message,
Icon: 'images/notification-icon.png'
});
});
39 Seu
servidor
GCM
Acorda o
Service Worker
40
41
42
43
E agora?
ImplementadoImplementandoConsiderando
45
Tradicionalmente...
Hoje, na maioria dos
casos...
Mundo perfeito
http://www.businessinsider.com/how-many-apps-people-download-per-month-2014-8
Discoverability46
47 PWAs não precisam de "rearquitetura"!
48
Você nunca é velho demais para tentar algo novo!
O FUTURO É OPEN SOURCE
49
Javascript em todo o lugar!50
Empresas trabalhando junto51
Valeu!
Perguntas? @bender_lago - @waldemarnt

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Node.js e Express
Node.js e ExpressNode.js e Express
Node.js e Express
 
Comércio Eletrônico - Criando sua loja virtual
Comércio Eletrônico - Criando sua loja virtualComércio Eletrônico - Criando sua loja virtual
Comércio Eletrônico - Criando sua loja virtual
 
It's Javascript Time
It's Javascript TimeIt's Javascript Time
It's Javascript Time
 
AMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps ModernasAMP Roadshow SP 2019 - Web Apps Modernas
AMP Roadshow SP 2019 - Web Apps Modernas
 
Hybrid app phonegap angular ionic
Hybrid app   phonegap angular ionicHybrid app   phonegap angular ionic
Hybrid app phonegap angular ionic
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Guia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devsGuia prático de desenvolvimento front-end para django devs
Guia prático de desenvolvimento front-end para django devs
 
Ionic Framework - Configuração do ambiente e a criação da primeira APP
Ionic Framework - Configuração do ambiente e a criação da primeira APPIonic Framework - Configuração do ambiente e a criação da primeira APP
Ionic Framework - Configuração do ambiente e a criação da primeira APP
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicação
 
Mini curso - Ionic Framework
Mini curso - Ionic FrameworkMini curso - Ionic Framework
Mini curso - Ionic Framework
 
O melhor da monitoração de web performance
O melhor da monitoração de web performanceO melhor da monitoração de web performance
O melhor da monitoração de web performance
 
JavaCE Conference 2012: ExtJS 4 + VRaptor
JavaCE Conference 2012: ExtJS 4 + VRaptorJavaCE Conference 2012: ExtJS 4 + VRaptor
JavaCE Conference 2012: ExtJS 4 + VRaptor
 
Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013
 
Browser Mobile - Chrome
Browser Mobile - ChromeBrowser Mobile - Chrome
Browser Mobile - Chrome
 
Realidade Virtual com Tecnologias Web
Realidade Virtual com Tecnologias WebRealidade Virtual com Tecnologias Web
Realidade Virtual com Tecnologias Web
 
Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
 
Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
WordCamp Rio de Janeiro 2016 - Vinícius Lourenço | Lojas Virtuais Descomplica...
 
Chromium: o navegador que mudou o mundo
Chromium: o navegador que mudou o mundoChromium: o navegador que mudou o mundo
Chromium: o navegador que mudou o mundo
 

Semelhante a Tchelinux: Go Web!

Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Leonardo Balter
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 
Surpreenda-se com o Silverlight 3
Surpreenda-se com o Silverlight 3Surpreenda-se com o Silverlight 3
Surpreenda-se com o Silverlight 3
Rodrigo Kono
 
Composição e Integração de Sistemas em 2013
Composição e Integração de Sistemas em 2013Composição e Integração de Sistemas em 2013
Composição e Integração de Sistemas em 2013
Leandro Silva
 
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
INdT
 
Surpreenda-se com o Silverlight 3
Surpreenda-se com o Silverlight 3Surpreenda-se com o Silverlight 3
Surpreenda-se com o Silverlight 3
Rodrigo Kono
 

Semelhante a Tchelinux: Go Web! (20)

O poder das Progressive Web Apps
O poder das Progressive Web AppsO poder das Progressive Web Apps
O poder das Progressive Web Apps
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
Aprendendo a programar &lt;3
Aprendendo a programar &lt;3Aprendendo a programar &lt;3
Aprendendo a programar &lt;3
 
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebNovo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open Web
 
12 Factor App Docker na Cloud e outras buzzwords
12 Factor App Docker na Cloud e outras buzzwords12 Factor App Docker na Cloud e outras buzzwords
12 Factor App Docker na Cloud e outras buzzwords
 
ASP.NET 5, MVC 6 e além
ASP.NET 5, MVC 6 e alémASP.NET 5, MVC 6 e além
ASP.NET 5, MVC 6 e além
 
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
 
WebAssembly além da Web - Casos de Uso em IoT
WebAssembly além da Web - Casos de Uso em IoTWebAssembly além da Web - Casos de Uso em IoT
WebAssembly além da Web - Casos de Uso em IoT
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
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...
 
Aplicações Realtime em Android | Fisl 15 | GuMobileRS
Aplicações Realtime em Android | Fisl 15 | GuMobileRSAplicações Realtime em Android | Fisl 15 | GuMobileRS
Aplicações Realtime em Android | Fisl 15 | GuMobileRS
 
Desenvolvedor mobile precisa aprender Web
Desenvolvedor mobile precisa aprender Web Desenvolvedor mobile precisa aprender Web
Desenvolvedor mobile precisa aprender Web
 
A Nova Web
A Nova WebA Nova Web
A Nova Web
 
Surpreenda-se com o Silverlight 3
Surpreenda-se com o Silverlight 3Surpreenda-se com o Silverlight 3
Surpreenda-se com o Silverlight 3
 
Worklight exemplo
Worklight exemploWorklight exemplo
Worklight exemplo
 
Composição e Integração de Sistemas em 2013
Composição e Integração de Sistemas em 2013Composição e Integração de Sistemas em 2013
Composição e Integração de Sistemas em 2013
 
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
 
Surpreenda-se com o Silverlight 3
Surpreenda-se com o Silverlight 3Surpreenda-se com o Silverlight 3
Surpreenda-se com o Silverlight 3
 
Mod06 licao01-apostila
Mod06 licao01-apostilaMod06 licao01-apostila
Mod06 licao01-apostila
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 

Último

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Dirceu Resende
 

Último (6)

Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdfConcurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdf
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdf
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 

Tchelinux: Go Web!