SlideShare uma empresa Scribd logo
Eu não posso acreditar que não é nativo!
Turbolinks 5
+
PWA
Turbolinks 5?
<body>
<head>
Uma página:
<body>
<head>
<body>
Replace
no
<body>
<head>
Merge
do
<head>
O que o Turbolinks faz:
<body>
<head>
Talk is cheap.
Show me
the code.
Linus Torvalds
Instalando
servidor de
arquivos estáticos
https://youtu.be/maX
wy36YAuA
Executando o
servidor de
arquivos estáticos
https://youtu.be/zGD
FSzOmRAc
Adicionando
novas
páginas/recursos
https://youtu.be/eKNx
jRVAJt0
Request - Response
https://youtu.be/PAu
TxowNQyM
Instalando e
habilitando o
Turbolinks
https://youtu.be/Bn4g
sJbMTKY
Curtiu?
https://www.youtube.com/watch?v=SWEts0rlez
A
Menos
é Mais
themasterapp.xyz
github.com/themasterapp
goo.gl/KsWujQ
goo.gl/BcGSgi
Progressive
enhancement?
É fazer um site funcionar em
qualquer navegador, sem prejudicar
os navegadores mais antigos e sem
deixar de usar os novos recursos
em navegadores novos.
if ('serviceWorker' in navigator) {
//...
}
PWA?
É um Web App, ou seja, um site com
recursos de aplicativos nativos,
como: instalação, notificação e conteúdo
off-line.
Recursos
Funciona
Off-line
Usando Service Workers, o
aplicativo pode funcionar até
quando o usuário está offline
Sempre
atualizado
Como está tudo na web, na
próxima vez que ele abrir o app
a nova versão já estará lá
Seguro Só funciona com HTTPS
Engajável Permite enviar Push
Notifications aos usuários
Instalável Podem ser adicionados à home
screen do smartphone
Instalável
Web App Install
Banners
Adaptativo
Responsivo
Se adapta (marckup e estilo)
em qualquer resolução de tela.
Linkável - Compartilhar
- Favoritar
"Você começa com uso
descompromissado da Web e vai
transformando progressivamente
em uma experiência de App."
by Sergio Lopes
Curtiu?
https://youtu.be/sH7dlRnuh-k
https://brasil.uxdesign.cc/o-que-são-progressive-web-apps-86e1b5306051
Talk is cheap.
Show me
the code.
Linus Torvalds
https://turbolinks.ysimplicity.io
https://github.com/ysimplicity/notification-server
https://github.com/ysimplicity
Conclusão
Quando vejo um sistema
que parece com um app,
se instala como um app,
e funciona como um app.
Então...
é um app!
Duck typing
TURBOLINKS_5.match?(
"Native Progressive Enhancement"
)
Obrigado
info@ysimplicity.com medium.com/@serradura
"Se quer ir rápido, vá sozinho.
Se quer ir longe, vá em grupo."
-- Provérbio africano

Mais conteúdo relacionado

Mais procurados

Otimização Client Side
Otimização Client SideOtimização Client Side
Otimização Client Side
metzen
 
Lançando versões em um clique - deploy contínuo
Lançando versões em um clique - deploy contínuoLançando versões em um clique - deploy contínuo
Lançando versões em um clique - deploy contínuo
Hélio Medeiros
 
Desmistificando web2py - #TDC2011
Desmistificando web2py - #TDC2011Desmistificando web2py - #TDC2011
Desmistificando web2py - #TDC2011
Bruno Rocha
 

Mais procurados (20)

Web debugging proxies
Web debugging proxiesWeb debugging proxies
Web debugging proxies
 
Os camaradas Grunt e Bower
Os camaradas Grunt e BowerOs camaradas Grunt e Bower
Os camaradas Grunt e Bower
 
Desenvolvendo para WordPress com Docker, Git e WP-CLI
Desenvolvendo para WordPress com Docker, Git e WP-CLIDesenvolvendo para WordPress com Docker, Git e WP-CLI
Desenvolvendo para WordPress com Docker, Git e WP-CLI
 
Hackeando facebook com wireshark e cookie injector
Hackeando facebook com wireshark e cookie injectorHackeando facebook com wireshark e cookie injector
Hackeando facebook com wireshark e cookie injector
 
Otimização Client Side
Otimização Client SideOtimização Client Side
Otimização Client Side
 
Como instalar o WordPress no seu computador
Como instalar o WordPress no seu computadorComo instalar o WordPress no seu computador
Como instalar o WordPress no seu computador
 
Iniciando com Yeoman, Grunt e Bower
Iniciando com Yeoman, Grunt e BowerIniciando com Yeoman, Grunt e Bower
Iniciando com Yeoman, Grunt e Bower
 
Vamos conversar sobre cache
Vamos conversar sobre cacheVamos conversar sobre cache
Vamos conversar sobre cache
 
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp SalvadorDicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
 
Lançando versões em um clique - deploy contínuo
Lançando versões em um clique - deploy contínuoLançando versões em um clique - deploy contínuo
Lançando versões em um clique - deploy contínuo
 
Ambiente de desenvolvimento para aplicações em WordPress com Vagrant, Compose...
Ambiente de desenvolvimento para aplicações em WordPress com Vagrant, Compose...Ambiente de desenvolvimento para aplicações em WordPress com Vagrant, Compose...
Ambiente de desenvolvimento para aplicações em WordPress com Vagrant, Compose...
 
Python e Golang - Parte 1
Python e Golang - Parte 1Python e Golang - Parte 1
Python e Golang - Parte 1
 
Desmistificando web2py - #TDC2011
Desmistificando web2py - #TDC2011Desmistificando web2py - #TDC2011
Desmistificando web2py - #TDC2011
 
Hackeando facebook com wireshark e cookie injector
Hackeando facebook com wireshark e cookie injectorHackeando facebook com wireshark e cookie injector
Hackeando facebook com wireshark e cookie injector
 
De 1 a 1.000.00 de usuários
De 1 a 1.000.00 de usuáriosDe 1 a 1.000.00 de usuários
De 1 a 1.000.00 de usuários
 
Alta Performance de Aplicações PHP com Nginx
Alta Performance de Aplicações PHP com NginxAlta Performance de Aplicações PHP com Nginx
Alta Performance de Aplicações PHP com Nginx
 
Open
OpenOpen
Open
 
Como funciona a internet
Como funciona a internetComo funciona a internet
Como funciona a internet
 
Node js - Javascript Server Side
Node js - Javascript Server SideNode js - Javascript Server Side
Node js - Javascript Server Side
 
Uma breve história sobre o tempo com Socket.io e Node.js
Uma breve história sobre o tempo com Socket.io e Node.jsUma breve história sobre o tempo com Socket.io e Node.js
Uma breve história sobre o tempo com Socket.io e Node.js
 

Destaque

Destaque (8)

Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Programação reativa com RxJS e Angular
Programação reativa com RxJS e AngularProgramação reativa com RxJS e Angular
Programação reativa com RxJS e Angular
 
iOS View Coordinators
iOS View CoordinatorsiOS View Coordinators
iOS View Coordinators
 
Agile iOS
Agile iOSAgile iOS
Agile iOS
 
App coordinators in iOS
App coordinators in iOSApp coordinators in iOS
App coordinators in iOS
 
Progressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficadaProgressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficada
 
O testador esta morto!
O testador esta morto!O testador esta morto!
O testador esta morto!
 

Turbolinks 5 + PWA (Progressive Web Apps)