SlideShare una empresa de Scribd logo
1 de 61
Descargar para leer sin conexión
Aplicações Web 
Realtime
Gabriel Gularte 
@gabrielfgularte 
Web Developer at Mentis 
Diretor de Tecnologia (CTO) at EVIN
Mentis Dating 
contato@mentisdating.com 
mentisdating.com
Mentis Dating 
contato@mentisdating.com 
mentisdating.com.br 
amoremcristo.com
Mentis Dating 
contato@mentisdating.com 
mentisdating.com.br 
novasemocoes.com
Mentis Dating 
contato@mentisdating.com 
mentisdating.com.br 
flertou.com
EVIN 
contato@evin.net.br 
evin.net.br
EVIN 
contato@evin.net.br 
evin.net.br 
evin.net.br
Mas o que é 
Realtime?
Mas o que é 
Realtime? 
● Experiência inovadora
Mas o que é 
Realtime? 
● Experiência inovadora 
● Super velocidade na resposta de uma interação
Mas o que é 
Realtime? 
● Experiência inovadora 
● Super velocidade na resposta de uma interação 
● Coisas reagem de forma instantânea
Mas o que é 
Realtime? 
● Experiência inovadora 
● Super velocidade na resposta de uma interação 
● Coisas reagem de forma instantânea 
● Sensação
Realtime é uma 
Sensação 
are depicted as occurring entirely within the 
span of, and at the same rate as the 
depiction. “ 
A narrative technique, whereby events 
Pedia, The 
Wiki
Aplicações 
Realtime
Aplicações 
Realtime 
Mobile
Aplicações 
Realtime 
Mobile 
Desktop
Aplicações 
Realtime 
Mobile 
Desktop 
SmartTVs
Aplicações 
Realtime 
Mobile 
Desktop 
SmartTVs 
Videogames
Aplicações 
Realtime 
Desktop 
Mobile 
Web 
SmartTVs 
Videogames
Aplicações 
Web Realtime 
Websockets, Polling e Long Polling
Web Realtime 
Websockets 
● HTML5 API
Web Realtime 
Websockets 
● HTML5 API 
● Especificação não está finalizada pelo W3C
Web Realtime 
Websockets 
● HTML5 API 
● Especificação não está finalizada pelo W3C 
● Não funciona em navegadores antigos
Web Realtime 
Websockets 
● HTML5 API 
● Especificação não está finalizada pelo W3C 
● Não funciona em navegadores antigos 
● Não oferece suporte a todos navegadores mobile
Web Realtime 
Websockets 
● HTML5 API 
● Especificação não está finalizada pelo W3C 
● Não funciona em navegadores antigos 
● Não oferece suporte a todos navegadores mobile 
Se você não precisa se preocupar com 
navegadores antigos, use a vontade.
Can I Use 
Websockets? 
caniuse.com/#feat=websockets
Showcase 
Websockets 
trello.com
Showcase 
Websockets 
zendesk.com.br
Frameworks 
Websockets 
socket.io
Frameworks 
Websockets 
ws4py.readthedocs.org
Frameworks 
Websockets 
socketo.me
Web Realtime 
Polling
Web Realtime 
Polling 
● Loop que consome dados periodicamente
Web Realtime 
Polling 
● Loop que consome dados periodicamente 
● Perde tempo em requests sem mudanças
Web Realtime 
Polling 
● Loop que consome dados periodicamente 
● Perde tempo em requests sem mudanças 
● Tráfego de dados desnecessários na rede do client
Web Realtime 
Polling 
● Loop que consome dados periodicamente 
● Perde tempo em requests sem mudanças 
● Tráfego de dados desnecessários na rede do client 
● Defasagem de tempo definido pelo delay do loop
Web Realtime 
Polling 
● Loop que consome dados periodicamente 
● Perde tempo em requests sem mudanças 
● Tráfego de dados desnecessários na rede do client 
● Defasagem de tempo definido pelo delay do loop 
● Funciona em todos os browsers
Web Realtime 
Polling 
● Loop que consome dados periodicamente 
● Perde tempo em requests sem mudanças 
● Tráfego de dados desnecessários na rede do client 
● Defasagem de tempo definido pelo delay do loop 
● Funciona em todos os browsers 
Péssima escolha para construir uma 
aplicação web realtime
Web Realtime 
Polling 
Client #1 Server 
Timeline 
Request #1 
Response #1 - No data 
Request #2 
Response #1 - New 
data! 
Client #2 
Request #1 - New data 
Response #1 - Ok
Web Realtime 
Long Polling
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limite
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limite 
● O limite pode ser o default do HTTP ou sobrescrito
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limite 
● O limite pode ser o default do HTTP ou sobrescrito 
● Poupa infinitos requests que não trazem dado algum
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limite 
● O limite pode ser o default do HTTP ou sobrescrito 
● Poupa infinitos requests que não trazem dado algum 
● Funciona em todos os browsers
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limite 
● O limite pode ser o default do HTTP ou sobrescrito 
● Poupa infinitos requests que não trazem dado algum 
● Funciona em todos os browsers 
A melhor forma de garantir que sua aplicação 
atenda o maior número de usuários
Web Realtime 
Long Polling 
Client #1 Server 
Timeline 
Request #1 
Client #2 
Request #1 - New data 
Blocking 
Response #1 - New Response #1 - Ok 
data!
Exemplos de Apps Realtime
Facebook 
Messenge 
r
Google 
Hangouts
Slack
Aplicações Web Realtime 
Resumo
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensação
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensação 
● Desenvolver aplicações realtime pra web é como pescar
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensação 
● Desenvolver aplicações realtime pra web é como pescar 
● Como você gostaria de pescar?
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensação 
● Desenvolver aplicações realtime pra web é como pescar 
● Como você gostaria de pescar? 
● Falamos de técnicas de Polling e Long Polling
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensação 
● Desenvolver aplicações realtime pra web é como pescar 
● Como você gostaria de pescar? 
● Falamos de técnicas de Polling e Long Polling 
● Falamos do Websockets como uma API nativa do HTML
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensação 
● Desenvolver aplicações realtime pra web é como pescar 
● Como você gostaria de pescar? 
● Falamos de técnicas de Polling e Long Polling 
● Falamos do Websockets como uma API nativa do HTML 
● A maior inteligência do realtime acontece no lado do server
Muito obrigado! 
https://medium.com/@gabrielfgularte/understanding-realtime-web-apps-5aef47d51a45

Más contenido relacionado

Similar a Aplicações Web Realtime

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 -...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 -...E-Commerce Brasil
 
Minicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTIMinicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTImarcochella
 
Django Channels - Aplicações real time com Django
Django Channels - Aplicações real time com DjangoDjango Channels - Aplicações real time com Django
Django Channels - Aplicações real time com DjangoPaula Grangeiro
 
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 CVCJanderson Silva
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
TDC Floripa 2018 - Metralhando sua API
TDC Floripa 2018 - Metralhando sua APITDC Floripa 2018 - Metralhando sua API
TDC Floripa 2018 - Metralhando sua APIEdlaine Zamora
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPFlávio Lisboa
 
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScriptCarlos Santos
 
Integração com webservices usando MVC e mágica
Integração com webservices usando MVC e mágicaIntegração com webservices usando MVC e mágica
Integração com webservices usando MVC e mágicaLeocadio Tiné
 
Desenvolvimento de aplicações assíncronas, orientadas a eventos e poliglotas ...
Desenvolvimento de aplicações assíncronas, orientadas a eventos e poliglotas ...Desenvolvimento de aplicações assíncronas, orientadas a eventos e poliglotas ...
Desenvolvimento de aplicações assíncronas, orientadas a eventos e poliglotas ...Rodrigo Peleias
 
TDC2018SP | Trilha Modern Web - Blazor - C# rodando no navegador padrao, sem ...
TDC2018SP | Trilha Modern Web - Blazor - C# rodando no navegador padrao, sem ...TDC2018SP | Trilha Modern Web - Blazor - C# rodando no navegador padrao, sem ...
TDC2018SP | Trilha Modern Web - Blazor - C# rodando no navegador padrao, sem ...tdc-globalcode
 
Big data e globo.com - Uma visão sobre a cultura de dados
Big data e globo.com - Uma visão sobre a cultura de dadosBig data e globo.com - Uma visão sobre a cultura de dados
Big data e globo.com - Uma visão sobre a cultura de dadosRenan Moreira de Oliveira
 
Apresentação sie ir-2014
Apresentação sie ir-2014Apresentação sie ir-2014
Apresentação sie ir-2014Renan Moreira
 
Ux for Developers - Build Better Products
Ux for Developers - Build Better ProductsUx for Developers - Build Better Products
Ux for Developers - Build Better ProductsPedro Marques
 

Similar a Aplicações Web Realtime (20)

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 -...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 -...
 
Minicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTIMinicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTI
 
Django Channels - Aplicações real time com Django
Django Channels - Aplicações real time com DjangoDjango Channels - Aplicações real time com Django
Django Channels - Aplicações real time com Django
 
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
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Metralhando sua API
Metralhando sua APIMetralhando sua API
Metralhando sua API
 
TDC Floripa 2018 - Metralhando sua API
TDC Floripa 2018 - Metralhando sua APITDC Floripa 2018 - Metralhando sua API
TDC Floripa 2018 - Metralhando sua API
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHP
 
ASP.NET Signal R - Glauco Godoi
ASP.NET Signal R - Glauco GodoiASP.NET Signal R - Glauco Godoi
ASP.NET Signal R - Glauco Godoi
 
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript
 
Integração com webservices usando MVC e mágica
Integração com webservices usando MVC e mágicaIntegração com webservices usando MVC e mágica
Integração com webservices usando MVC e mágica
 
TDC 2015 Florianopolis
TDC 2015 FlorianopolisTDC 2015 Florianopolis
TDC 2015 Florianopolis
 
Desenvolvimento de aplicações assíncronas, orientadas a eventos e poliglotas ...
Desenvolvimento de aplicações assíncronas, orientadas a eventos e poliglotas ...Desenvolvimento de aplicações assíncronas, orientadas a eventos e poliglotas ...
Desenvolvimento de aplicações assíncronas, orientadas a eventos e poliglotas ...
 
Construindo um sistema distribuido usando rest
Construindo um sistema distribuido usando restConstruindo um sistema distribuido usando rest
Construindo um sistema distribuido usando rest
 
TDC2018SP | Trilha Modern Web - Blazor - C# rodando no navegador padrao, sem ...
TDC2018SP | Trilha Modern Web - Blazor - C# rodando no navegador padrao, sem ...TDC2018SP | Trilha Modern Web - Blazor - C# rodando no navegador padrao, sem ...
TDC2018SP | Trilha Modern Web - Blazor - C# rodando no navegador padrao, sem ...
 
Introdução ao TDD
Introdução ao TDDIntrodução ao TDD
Introdução ao TDD
 
Big data e globo.com - Uma visão sobre a cultura de dados
Big data e globo.com - Uma visão sobre a cultura de dadosBig data e globo.com - Uma visão sobre a cultura de dados
Big data e globo.com - Uma visão sobre a cultura de dados
 
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
 
Apresentação sie ir-2014
Apresentação sie ir-2014Apresentação sie ir-2014
Apresentação sie ir-2014
 
Ux for Developers - Build Better Products
Ux for Developers - Build Better ProductsUx for Developers - Build Better Products
Ux for Developers - Build Better Products
 

Aplicações Web Realtime