aplicações web realtime
DESCRIPTION
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-5aef47d51a45TRANSCRIPT
![Page 1: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/1.jpg)
Aplicações Web RealtimeSem mágicas e sem enrolação
![Page 2: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/2.jpg)
Gabriel GularteWeb Developer at Mentis
CTO at EVIN
@gabrielfgularte
![Page 3: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/3.jpg)
Como achamos que é...
![Page 4: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/4.jpg)
![Page 5: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/5.jpg)
![Page 6: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/6.jpg)
Como é na verdade...
![Page 7: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/7.jpg)
![Page 8: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/8.jpg)
Técnicas de realtime na webWebsockets, Polling e Long Polling
![Page 9: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/9.jpg)
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.
![Page 10: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/10.jpg)
http://caniuse.com/#feat=websockets
Websockets
![Page 11: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/11.jpg)
Websockets
http://www.slideshare.net
https://www.zendesk.com.br
![Page 12: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/12.jpg)
Websockets
http://socket.io
![Page 13: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/13.jpg)
Websockets
https://ws4py.readthedocs.org
![Page 14: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/14.jpg)
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 seuwebapp realtime
![Page 15: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/15.jpg)
Polling
![Page 16: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/16.jpg)
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 seuwebapp realtime
![Page 17: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/17.jpg)
Long PollingLong Polling
![Page 18: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/18.jpg)
Long PollingLong Polling
![Page 19: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/19.jpg)
Long PollingLong Polling
![Page 20: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/20.jpg)
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!
![Page 21: Aplicações Web Realtime](https://reader033.vdocuments.site/reader033/viewer/2022061209/548da8f1b479597e6a8b4a56/html5/thumbnails/21.jpg)
Muito obrigado!
https://github.com/gabrielfgularte/talks/tree/master/2014/frontendcarioca
https://medium.com/@gabrielfgularte/understanding-realtime-web-apps-5aef47d51a
45