Aplicações Web Realtime

Aplicações Web

Realtime

Gabriel Gularte@gabrielfgularte

Web Developer at Mentis

Diretor de Tecnologia (CTO) at EVIN

Mentis Datingcontato@mentisdating.com

mentisdating.com

Mentis Datingcontato@mentisdating.com

mentisdating.com.br

amoremcristo.com

Mentis Datingcontato@mentisdating.com

mentisdating.com.br

novasemocoes.com

Mentis Datingcontato@mentisdating.com

mentisdating.com.br

flertou.com

EVINcontato@evin.net.br

evin.net.br

EVINcontato@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

A narrative technique, whereby events are depicted as occurring entirely within the span of, and at the same rate as the depiction.“

Pedia, The

Wiki

Aplicações

Realtime

Aplicações

Realtime

Mobile

Aplicações

Realtime

MobileDesktop

Aplicações

Realtime

MobileDesktop

SmartTVs

Aplicações

Realtime

MobileDesktop

Videogames

SmartTVs

Aplicações

Realtime

Mobile

Web

Desktop

Videogames

SmartTVs

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.

caniuse.com/#feat=websockets

Can I Use

Websockets?

trello.com

Showcase

Websockets

zendesk.com.br

Showcase

Websockets

socket.io

Frameworks

Websockets

ws4py.readthedocs.org

Frameworks

Websockets

socketo.me

Frameworks

Websockets

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

Tim

elin

e

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

Tim

elin

e

Request #1

Client #2

Request #1 - New data

Response #1 - OkResponse #1 - New

data!

Blo

ckin

g

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