61
Aplicações Web Realtime

Aplicações Web Realtime

Embed Size (px)

DESCRIPTION

Talk at SCTI - UENF, Campos - RJ, Brazil - 04/11/2014 Medium: https://medium.com/@gabrielfgularte/understanding-realtime-web-apps-5aef47d51a45

Citation preview

Page 1: Aplicações Web Realtime

Aplicações Web

Realtime

Page 2: Aplicações Web Realtime

Gabriel Gularte@gabrielfgularte

Web Developer at Mentis

Diretor de Tecnologia (CTO) at EVIN

Page 3: Aplicações Web Realtime

Mentis [email protected]

mentisdating.com

Page 4: Aplicações Web Realtime

Mentis [email protected]

mentisdating.com.br

amoremcristo.com

Page 5: Aplicações Web Realtime

Mentis [email protected]

mentisdating.com.br

novasemocoes.com

Page 6: Aplicações Web Realtime

Mentis [email protected]

mentisdating.com.br

flertou.com

Page 7: Aplicações Web Realtime

[email protected]

evin.net.br

Page 8: Aplicações Web Realtime

[email protected]

evin.net.br

evin.net.br

Page 9: Aplicações Web Realtime

Mas o que é

Realtime?

Page 10: Aplicações Web Realtime

Mas o que é

Realtime?

● Experiência inovadora

Page 11: Aplicações Web Realtime

Mas o que é

Realtime?

● Experiência inovadora

● Super velocidade na resposta de uma interação

Page 12: Aplicações Web Realtime

Mas o que é

Realtime?

● Experiência inovadora

● Super velocidade na resposta de uma interação

● Coisas reagem de forma instantânea

Page 13: Aplicações Web Realtime

Mas o que é

Realtime?

● Experiência inovadora

● Super velocidade na resposta de uma interação

● Coisas reagem de forma instantânea

● Sensação

Page 14: Aplicações Web Realtime

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

Page 15: Aplicações Web Realtime

Aplicações

Realtime

Page 16: Aplicações Web Realtime

Aplicações

Realtime

Mobile

Page 17: Aplicações Web Realtime

Aplicações

Realtime

MobileDesktop

Page 18: Aplicações Web Realtime

Aplicações

Realtime

MobileDesktop

SmartTVs

Page 19: Aplicações Web Realtime

Aplicações

Realtime

MobileDesktop

Videogames

SmartTVs

Page 20: Aplicações Web Realtime

Aplicações

Realtime

Mobile

Web

Desktop

Videogames

SmartTVs

Page 21: Aplicações Web Realtime

Aplicações

Web Realtime

Websockets, Polling e Long Polling

Page 22: Aplicações Web Realtime

Web Realtime

Websockets

● HTML5 API

Page 23: Aplicações Web Realtime

Web Realtime

Websockets

● HTML5 API

● Especificação não está finalizada pelo W3C

Page 24: Aplicações Web Realtime

Web Realtime

Websockets

● HTML5 API

● Especificação não está finalizada pelo W3C

● Não funciona em navegadores antigos

Page 25: Aplicações Web Realtime

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

Page 26: Aplicações Web Realtime

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.

Page 27: Aplicações Web Realtime

caniuse.com/#feat=websockets

Can I Use

Websockets?

Page 28: Aplicações Web Realtime

trello.com

Showcase

Websockets

Page 29: Aplicações Web Realtime

zendesk.com.br

Showcase

Websockets

Page 30: Aplicações Web Realtime

socket.io

Frameworks

Websockets

Page 31: Aplicações Web Realtime

ws4py.readthedocs.org

Frameworks

Websockets

Page 32: Aplicações Web Realtime

socketo.me

Frameworks

Websockets

Page 33: Aplicações Web Realtime

Web Realtime

Polling

Page 34: Aplicações Web Realtime

Web Realtime

Polling

● Loop que consome dados periodicamente

Page 35: Aplicações Web Realtime

Web Realtime

Polling

● Loop que consome dados periodicamente

● Perde tempo em requests sem mudanças

Page 36: Aplicações Web Realtime

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

Page 37: Aplicações Web Realtime

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

Page 38: Aplicações Web Realtime

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

Page 39: Aplicações Web Realtime

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

Page 40: Aplicações 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

Page 41: Aplicações Web Realtime

Web Realtime

Long Polling

Page 42: Aplicações Web Realtime

Web Realtime

Long Polling

● Abre uma conexão e “blocka” ela

Page 43: Aplicações Web Realtime

Web Realtime

Long Polling

● Abre uma conexão e “blocka” ela

● Só “solta” a conexão quando há mudança ou chegou no limite

Page 44: Aplicações Web Realtime

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

Page 45: Aplicações Web Realtime

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

Page 46: Aplicações Web Realtime

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

Page 47: Aplicações Web Realtime

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

Page 48: Aplicações Web Realtime

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

Page 49: Aplicações Web Realtime

Exemplos de Apps Realtime

Page 50: Aplicações Web Realtime

Facebook

Messenge

r

Page 51: Aplicações Web Realtime

Google

Hangouts

Page 52: Aplicações Web Realtime

Slack

Page 53: Aplicações Web Realtime

Aplicações Web Realtime

Resumo

Page 54: Aplicações Web Realtime

Aplicações Web Realtime

Resumo● Nada é “realmente realtime”, tudo tem um tempo para acontecer

Page 55: Aplicações Web Realtime

Aplicações Web Realtime

Resumo● Nada é “realmente realtime”, tudo tem um tempo para acontecer

● Realtime é uma sensação

Page 56: Aplicações Web Realtime

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

Page 57: Aplicações Web Realtime

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?

Page 58: Aplicações Web Realtime

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

Page 59: Aplicações Web Realtime

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

Page 60: Aplicações Web Realtime

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

Page 61: Aplicações Web Realtime

Muito obrigado!

https://medium.com/@gabrielfgularte/understanding-realtime-web-apps-5aef47d51a45