DEMO

Saludos, buen señor. Hoy vamos a aprender a hacer un widget del tiempo usando RxJS, pero antes hay que saber que es RxJs y que es la programación reactiva. RxJs es una librería para JavaScript para la creación de programas asíncronos (No esperamos, el programa no pregunta si una operación en concreto se ha completado, sólo comprueba si ha llegado algún mensaje) basados en eventos. La programación reactiva es un paradigma de la programación que se basa en los flujos de datos y a la propagación de los datos. La programación reactiva aprovecha las ventajas del patrón Iterator y las ventajas del patrón Observer. Es posible escribir sentencias del estilo filtrar, ordenar, seleccionar, etc; sobre eventos. La diferencia es que la consulta es evaluada conforme llegan los datos. Uno puede evaluar datos en tiempo real.

Bien, vamos a aprovechar las ventajas de la programación reactiva para el desarrollo web.

Creación del widget

Para la creación de nuestro widget vamos a utilizar la API de OpenWheaterMap, para ello lo primero que tenemos que hacer es registrarnos en su página oficial:  

http://openweathermap.org/current

En la sección API Keys es donde encontraremos nuestra clave para nuestro widget. Lo primero que tenemos que hacer es añadir la declaración de nuestra API Key y la url de la API, para ello añadimos lo siguiente dentro de la sección script de nuestro código html:

const API_KEY = "SUSTITUYE_ESTO_POR_TU_API_KEY";
const API_URL = `http://api.openweathermap.org/data/2.5/weather?appid=${API_KEY}`;
appid=${API_KEY}`;

El siguiente paso es seleccionar los dos elementos DOM de nuestro html con los que vamos a interactuar, el texto de la temperatura y el input donde introducimos la localización:

var weatherText = document.querySelector('#weather');
var searchInput = document.querySelector('#location-input');

Una vez hecho esto toca recoger la información y mandársela a la API con una petición HTTP, para ello utilizamos una función RxJS llamada Rx.Observable.fromEvent() en conjunción de un debounce de 50mms, que se encargará de registrar un nuevo evento 500ms después del evento anterior. Tras esto mapeamos la información y se la enviamos a la API como sigue:

var searchInputSource = Rx.Observable.fromEvent(searchInput, 'keyup').debounce(500);

var requestOnFindStream = searchInputSource.map(ev => {
    return API_URL + "&q=" + ev.target.value;
});


function convertToCelsius(kelvin) {
 return (kelvin - 273.15).toFixed(1);
}

Invocamos la función flatMap() para crear un nuevo stream a partir de una cadena de strings. Por último queda subscribirse al observable y convertir la temperatura a grados Celsius de esta manera:

var responseStream = requestOnFindStream
            .flatMap(requestUrl => {
                return Rx.Observable.fromPromise($.getJSON(requestUrl));
            })
            .map(response => convertToCelsius(response.main.temp))
            .startWith(0);

responseStream.subscribe(temp => {
            weatherText.innerHTML = `${temp} °C`;
  });

ejemplo de rxjs

Para terminar puedes consultar la DEMO del resultado final.