Aplicaciones web real-time

Libre Conference

LSL - UTN-FRA

31 de octubre de 2015

Gabriel Montes

@gab_montes

Aplicaciones web real-time

Real-time

Gmail

Google Docs

Facebook Messenger

Cloud9

Actualizaciones automáticas

Botones

Latencia

Spinners

Conexión

Actualizaciones optimistas

Responsiveness

Percepción

Reconexión

Redes móviles

Dispositivos móviles

Conciliación

Conflictos

Deltas

Real-time

Actualización automática

Latencia

Experiencia vs. Implementación

Herramientas

HTTP

Consulta/Respuesta

Cliente/Servidor

XHR

OWA

XMLHttpRequest

AJAX

Polling

Actualización automática

~~Latencia~~

Push

Servidor > Cliente

Comet

Conexiones HTTP

Recursos

WebSocket

TCP

Upgrade

Mensajes

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

Ventajas

Tráfico

Recursos

Performance

Riesgos

Proxies

Redes móviles

Redes corporativas

Soporte

Chrome 4 / 16

Firefox 4 / 11

IE 10

iOS 4.3 / 6

Android 4.4

Stack tecnológico

JavaScript / Node.JS + Socket.IO

Java / Jetty/Netty

.Net / SignalR

Phyton / Tornado

Ruby / Faye

PHP / Ratchet

Pusher

Meteor

Firebase

Node.JS + Socket.IO

Express + AngularJS

Node.JS

JavaScript (V8)

Basado en eventos

I/O no bloqueante

https://nodejs.org/

Socket.IO

Bidireccional

WebSocket

JSONP/XHR polling

Reconexión

Multiplexado

// Servidor
io.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

// Cliente
socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
});

http://socket.io/

AngularJS

SPA

MVC / MV*

<div>
  <label>Nombre:</label>
  <input type="text" ng-model="vm.name" placeholder="Ingrese su nombre">
  <hr>
  <h1 ng-show="vm.name">¡Hola {{vm.name}}!</h1>
</div>

https://angularjs.org/