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...
Mas o que é 
Realtime? 
● Experiência inovadora 
● Super velocidade na resposta de uma interação 
● Coisas reagem de forma...
Realtime é uma 
Sensação 
are depicted as occurring entirely within the 
span of, and at the same rate as the 
depiction. ...
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...
Web Realtime 
Websockets 
● HTML5 API 
● Especificação não está finalizada pelo W3C 
● Não funciona em navegadores antigos...
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...
Web Realtime 
Polling 
● Loop que consome dados periodicamente 
● Perde tempo em requests sem mudanças 
● Tráfego de dados...
Web Realtime 
Polling 
● Loop que consome dados periodicamente 
● Perde tempo em requests sem mudanças 
● Tráfego de dados...
Web Realtime 
Polling 
● Loop que consome dados periodicamente 
● Perde tempo em requests sem mudanças 
● Tráfego de dados...
Web Realtime 
Polling 
Client #1 Server 
Timeline 
Request #1 
Response #1 - No data 
Request #2 
Response #1 - New 
data!...
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 limit...
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limit...
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limit...
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limit...
Web Realtime 
Long Polling 
● Abre uma conexão e “blocka” ela 
● Só “solta” a conexão quando há mudança ou chegou no limit...
Web Realtime 
Long Polling 
Client #1 Server 
Timeline 
Request #1 
Client #2 
Request #1 - New data 
Blocking 
Response #...
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çã...
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensaçã...
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensaçã...
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensaçã...
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensaçã...
Aplicações Web Realtime 
Resumo 
● Nada é “realmente realtime”, tudo tem um tempo para acontecer 
● Realtime é uma sensaçã...
Muito obrigado! 
https://medium.com/@gabrielfgularte/understanding-realtime-web-apps-5aef47d51a45
Próximos SlideShares
Carregando em…5
×

Aplicações Web Realtime

327 visualizações

Publicada em

Talk at SCTI - UENF, Campos - RJ, Brazil - 04/11/2014

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

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
327
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aplicações Web Realtime

  1. 1. Aplicações Web Realtime
  2. 2. Gabriel Gularte @gabrielfgularte Web Developer at Mentis Diretor de Tecnologia (CTO) at EVIN
  3. 3. Mentis Dating contato@mentisdating.com mentisdating.com
  4. 4. Mentis Dating contato@mentisdating.com mentisdating.com.br amoremcristo.com
  5. 5. Mentis Dating contato@mentisdating.com mentisdating.com.br novasemocoes.com
  6. 6. Mentis Dating contato@mentisdating.com mentisdating.com.br flertou.com
  7. 7. EVIN contato@evin.net.br evin.net.br
  8. 8. EVIN contato@evin.net.br evin.net.br evin.net.br
  9. 9. Mas o que é Realtime?
  10. 10. Mas o que é Realtime? ● Experiência inovadora
  11. 11. Mas o que é Realtime? ● Experiência inovadora ● Super velocidade na resposta de uma interação
  12. 12. Mas o que é Realtime? ● Experiência inovadora ● Super velocidade na resposta de uma interação ● Coisas reagem de forma instantânea
  13. 13. Mas o que é Realtime? ● Experiência inovadora ● Super velocidade na resposta de uma interação ● Coisas reagem de forma instantânea ● Sensação
  14. 14. 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
  15. 15. Aplicações Realtime
  16. 16. Aplicações Realtime Mobile
  17. 17. Aplicações Realtime Mobile Desktop
  18. 18. Aplicações Realtime Mobile Desktop SmartTVs
  19. 19. Aplicações Realtime Mobile Desktop SmartTVs Videogames
  20. 20. Aplicações Realtime Desktop Mobile Web SmartTVs Videogames
  21. 21. Aplicações Web Realtime Websockets, Polling e Long Polling
  22. 22. Web Realtime Websockets ● HTML5 API
  23. 23. Web Realtime Websockets ● HTML5 API ● Especificação não está finalizada pelo W3C
  24. 24. Web Realtime Websockets ● HTML5 API ● Especificação não está finalizada pelo W3C ● Não funciona em navegadores antigos
  25. 25. 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
  26. 26. 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.
  27. 27. Can I Use Websockets? caniuse.com/#feat=websockets
  28. 28. Showcase Websockets trello.com
  29. 29. Showcase Websockets zendesk.com.br
  30. 30. Frameworks Websockets socket.io
  31. 31. Frameworks Websockets ws4py.readthedocs.org
  32. 32. Frameworks Websockets socketo.me
  33. 33. Web Realtime Polling
  34. 34. Web Realtime Polling ● Loop que consome dados periodicamente
  35. 35. Web Realtime Polling ● Loop que consome dados periodicamente ● Perde tempo em requests sem mudanças
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. Web Realtime Long Polling
  42. 42. Web Realtime Long Polling ● Abre uma conexão e “blocka” ela
  43. 43. Web Realtime Long Polling ● Abre uma conexão e “blocka” ela ● Só “solta” a conexão quando há mudança ou chegou no limite
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. Web Realtime Long Polling Client #1 Server Timeline Request #1 Client #2 Request #1 - New data Blocking Response #1 - New Response #1 - Ok data!
  49. 49. Exemplos de Apps Realtime
  50. 50. Facebook Messenge r
  51. 51. Google Hangouts
  52. 52. Slack
  53. 53. Aplicações Web Realtime Resumo
  54. 54. Aplicações Web Realtime Resumo ● Nada é “realmente realtime”, tudo tem um tempo para acontecer
  55. 55. Aplicações Web Realtime Resumo ● Nada é “realmente realtime”, tudo tem um tempo para acontecer ● Realtime é uma sensação
  56. 56. 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
  57. 57. 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?
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. Muito obrigado! https://medium.com/@gabrielfgularte/understanding-realtime-web-apps-5aef47d51a45

×