Talk at FrontEnd Carioca, Rio de Janeiro, Brazil - 27/09/2014 In this talk, I show how realtime works and how you can build a better web application using good techniques. Medium: https://medium.com/@gabrielfgularte/understanding-realtime-web-apps-5aef47d51a45

1. Aplicações Web Realtime
Sem mágicas e sem enrolação

2. Gabriel Gularte
Web Developer at Mentis
CTO at EVIN
@gabrielfgularte

3. Como achamos que
é...

6. Como é na verdade...

8. Técnicas de realtime na web
Websockets, Polling e Long Polling

9. Websockets
● Full-Duplex
● HTML5 API
● Especificação não está finalizada pelo W3C
● Não funciona em browsers antigos
Se você não precisa se preocupar com
navegadores antigos, use a vontade.

10. http://caniuse.com/#feat=websocket
s
Websockets

11. Websockets
http://www.slideshare.net https://www.zendesk.com.br

12. Websockets
http://socket.io

13. Websockets
https://ws4py.readthedocs.org

14. Polling
● Loop que consome dados periodicamente
● Perde tempo em requests sem mudanças e tráfego desnecessário
● Defasagem de tempo definido pelo delay do loop
● Funciona em todos os browsers
Péssima escolha para construir o seu
webapp realtime

15. Polling

16. Long Polling
● Uma única conexão até que haja mudança
● Poupa requests e tráfego de dados desnecessários
● Caso queira, ainda pode definir um tempo para timeout
● Funciona em todos os browsers
Melhor técnica para construir o seu
webapp realtime

17. Long Polllliing

18. Long Polllliing

19. Long Polllliing

20. Resumo
● Nada é "real realtime". Tudo tem um tempo para acontecer
● Realtime é somente uma sensação (nothing more then feelings)
● Websockets é API e Polling/Long Polling é técnica
● Use Websockets se não precisa dar suporte para browsers antigos
● Não use Polling, só é necessário pra entender a base do Long Polling
● Long Polling é como pescar, pesque mais!

21. Muito
obrigado!
https://github.com/gabrielfgularte/talks/tree/master/2014/frontendcarioca
https://medium.com/@gabrielfgularte/understanding-realtime-web-apps-5aef47d51a45