0

ReactJS y Firebase, cómo mantener vistas actualizadas en tiempo real

1953Puntos

hace 5 años

ReactJS hace un excelente trabajo manejando nuestra visualización de forma dinámica. Pero para hacer cosas realmente útiles necesitamos persistencia y sincronización con datos remotos; y Firebase es la herramienta ideal para hacerlo. Se trata de un servicio backend que almacena y sincroniza datos de manera inmediata. Fue adquirido por Google el año pasado y es extremadamente fácil de integrar con ReactJS. Para entender mejor cómo se integran Firebase y ReactJS tengamos en mente tres cosas:

  1. Cada vez que el state de un elemento cambia se ejecuta render() de forma automática. Es decir, al recibir nuevos datos del backend en un state, se vuelve a calcular el Virtual DOM.
  2. Firebase, al recibir datos nuevos, envía una notificación en tiempo real con los cambios.
  3. Firebase y ReactJS están optimizados para manejar datos en formato JSON.
ReactFire

Esto quiere decir que si enlazamos el state que maneja los datos de entrada con Firebase, cada vez que ocurra un cambio ReactJS volverá a calcular el Virtual DOM; manteniendo nuestra vista actualizada en tiempo real. Para agregar un nuevo dato, basta con enviarlo directamente a Firebase. Una vez recibidos los cambios, este actualizará los datos y ReactJS se encargará de calcular las modificaciones necesarios en el DOM para mostrar los nuevos datos. Retomando nuestro ejemplo anterior, sólo necesitamos agregar una forma de incluir los datos nuevos. Esto quiere decir que necesitamos un nuevo input.

ReactFire

Para lograrlo, sólo necesitamos agregar el input para el static de nuestro ejemplo. Le asignaremos un ID y, para saber cuando el usuario presiona enter, le asignaremos el evento onKeyPress y un callback al que llamaremos sendNewElement.

render: function(){ return (

<div><inputid="userInput"type="text"placeholder="Filtrar..."onchange="{this.updateUserInput}"><simplelistsimplelist="{this.state.simpleList}"userinput="{this.state.userInput}/"><inputid="newElement"type="text"placeholder="+"onkeypress="{this.sendNewElement}"classname="fav"></simplelist></div>

)}

Para cambiar el backend, lo primero que tenemos que hacer es quitar jQuery y reemplazarlo por la librería de Firebase y la de ReactFire. Esta última no es obligatoria, pero nos provee un mixin que facilita aún más el usar Firebase en ReactJS. [html] [/html] Para ajustar el ejemplo al modelo, vamos a colocar el state en el elemento raiz SimpleFilterableList. Recordemos que la idea es mantener al mínimo los Stateful Components. Es buen momento para agregar el mixin de ReactFire. Este nos permite enlazar nuestra base de datos con un state, usando el comando .bindAsArray(), al que le vamos a dar la ruta de nuestra aplicación de Firebase y el state que deseamos enlazar. Debemos agregar “mixins: [ReactFireMixin]” en los elementos en los que deseemos usarlo. Para hacer esto, es importante que crees previamente una aplicación de Firebase desde la consola web. El proceso es muy sencillo y Firebase te permite hacerlo de forma gratuita con una restricción de hasta 50 conexiones máximo. Más que suficiente para crear y testear aplicaciones nuevas. Como un plus, Firebase incluye un servicio de hosting gratuito basado en NodeJS. En lo personal me encanta, pues basta con instalar las herramientas de Firefox en NodeJS y correr el comando **firebase deploy**cuando deseemos actualizar la aplicación. El servicio nos incluye un sub-dominio gratuito en .firebaseapp.com o si tenemos un dominio propio, podemos asignarlo sin costo extra. No te preocupes si no deseas abrir una cuenta en Firebase para este ejemplo, puedes usar sin problemas la base de datos de este ejemplo para experimentar. Usa esta URL.

var SimpleFilterableList = React.createClass({ mixins: [ReactFireMixin], componentDidMount: function() { this.bindAsArray(new Firebase("https://platzi-realtimelist.firebaseio.com/"), "simpleList"); } });

Como usamos .bindAsArray() y le asignamos el nombre simpleList, crear el callback sendNewElement será muy fácil. Primero obtenemos esa referencia de Firebase usando this.firebaseRefs['simpleList']; y para agregar una nuevo elemento al array, basta con usar .push() y dar agregar un nuevo objeto JSON. Debemos ingresar los datos del usuario revisando el ID que usamos en el input. Firebase le agrega al objeto un ID de forma automática; por lo que tampoco te tienes que preocupar por ese detalle.

[ReactFire]

sendNewElement es llamado por el evento onKeyPress por lo que podemos acceder al nombre de la tecla en key.key. En nuestro caso, solo nos interesa la tecla Enter por lo que haremos una validación con un simple if cada vez que se presione una tecla con este campo activo.

sendNewElement: function(key){ if (key.key == "Enter"){ this.firebaseRefs['simpleList'].push({ row: document.getElementById('newElement').value }); document.getElementById('newElement').value = ''; }; }

Como podemos ver en el código, cuando tengamos el input seleccionado y se presione la tecla Enter, se enviará una copia del contenido de newElement a Firebase y se borrará el contenido del input. Cuando se recibe un nuevo elemento, automáticamente se reciben los nuevos datos en el state simpleList; y ReactJS inmediatamente reconstruye el VDOM, calcula las diferencias con el DOM y realiza los cambios pertinentes. Puedes ver el código completo en GitHub. El demo tiene algunos detalles extra, entre ellos, si abres la consola paralelo al ejemplo, podrás ver paso a paso lo que está pasando.

ReactFire

Tanto Firebase como ReactJS tienen muy baja latencia. Por esta razón, si se usan en conjunto pueden construir aplicaciones web en tiempo real con un excelente performance. Incluso manejando grandes listas de datos que cambian constantemente en tiempo real. Así que si tu proyecto tiene estas características, ReactFire es una opción interesante. Y si quieres aprender más acerca de React.js y cómo combinarlo con otros servicios como FireBase, no te pierdas el Curso Profesional de React.js en Platzi.

Cesar
Cesar
@reicek

1953Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2
0
9Puntos

Muchas gracias por la información amigo, me sirvió de mucho. Solo tengo una duda, puedo integrar estas tecnologías sin problema a PHP a frameworks específicamente como Codeigniter o Laravel?