Vistazo práctico de RxDB, la base de datos realtime

nodeJS ene. 11, 2020

Las aplicaciones en tiempo real vienen pegando muy fuerte en el ambiente del desarrollo, tal vez te ha tocado y ya tienes experiencia trabajando con esta tecnología, entonces sabes de que estamos hablando, si no así, no te preocupes en este post nos acercaremos un poco a ese tema pero utilizando RxDB, una base de datos en tiempo real para aplicaciones en javascript, vamos allá!

Lo primero que debes preguntarte es a que no referimos a aplicaciones en tiempo real. Pues bien es mas sencillo de entender de lo que piensas, básicamente son aplicaciones que tienen una comunicación bidireccional, dinámica y fluida entre el cliente y el servidor, por tanto la transmisión de datos entre estos dos actores debe ser inmediata.

Vamos con RxDB

Si miras a tu alrededor es común encontrar bases de datos relacionales, distribuidas, orientadas a objetos, orientadas a grafos y noSQL, en esta última categoría se encuentra RxDB, pues su propia página indica que esta hecha para aplicaciones en javascript como webs, aplicaciones híbridas y para nodeJS.

Todo esto es gracias su reactividad, es posible escuchar cambios de diversas consultas e incluso subscribirnos a cambios específicos, como por ejemplo la actualización de un solo campo.

A la práctica

Video de vistazo practico a RxDB - El dev sin site

Vamos a ver RxDB en acción, haremos un ejemplo con simplemente nodejs, por lo tanto no vamos a utilizar front solo nuestra terminal, bien, manos a la obra.

Instalación

Para instalar lo primero que debemos hacer es ejecutar los siguientes comando en la terminal:

Si usas npm:

npm install rxdb --save
npm install rxjs --save
Instalación de dependencias usando npm

Si usas yarn es muy similar:

yarn add rxdb --save
yasn add rxjs --save
Instalación de dependencias usando yarn

Necesitamos instalar las dependencias rxdb y rxjs, en tu package.json debe quedar de la siguiente forma:

RxDB y RxJS

Configurando una BD

Vamos a crear un archivo index.js, allí vamos a importar el paquete rxdb, de la siguiente forma:

const RxDB = require('rxdb');
Importando rxdb

La documentación oficial indica que hay que agregar un adaptador para conectarse a la base de datos, aquí tienes la lista completa, lo genial esto es que puede utilizarse en memoria, en el browser o en nodejs, para nuestro caso existe pouchdb-adapter-leveldb que debe ser agregado junto al paquete leveldown, considera que RxDB no es una base de datos autocontenida por tanto generará algunos archivos y carpetas dentro de nuestro sistema, bien, finalmente tu package.json ahora tendrá el siguiente aspecto:

Package.json de referencia

Una vez agregadas las nuevas dependencias, la configuración es simplemente añadir unas pocas líneas:

//...
RxDB.plugin(require('pouchdb-adapter-leveldb')); // plugins
const leveldown = require('leveldown');

const database = await RxDB.create({
    name: './eldevsinsiteDB', // nombre de base de datos
    adapter: leveldown // usamos adaptador
});
Configurando base de datos

En el código anterior ha agregado el plugin a RxDB y también se le asignó un nombre a la base de datos, ojo recuerda añadir la ruta a donde va a alojarse la base de datos, luego estamos indicando que el adaptador elegido es leveldown.

Definiendo un schema y creando una colección

Básicamente lo único que debemos hacer es agregar un objeto json, gracias al estándar json-schema, pero en pocas palabras es un clave-valor, miremos el siguiente código:

// ...
const userSchema = {
    title: 'user schema',
    version: 0,
    description: 'Some description',
    type: 'object',
    properties: {
        id: {
            type: 'string',
            primary: true
        },
        name: {
            type: 'string'
        },
        email: {
            type: 'string'
        }
    },
    required: ['id', 'email', 'name']
};
Definición del esquema user

Traduciendo lo que definimos fue:

  • Tiene "user schema" como título.
  • La versión es 0(cero por si no lo parece).
  • Agregamos alguna descripción.
  • Y las propiedades son un id(string, primario), name(string), email(string).
  • Los campos requeridos son id, email, name.

Para crear la colección es todavía mucho más sencillo, pues solo debemos asignarle un nombre, y pasarle el esquema previamente creado, de la siguiente manera:

//...
const collection = await database.collection({
    name: 'user', // nombre de coleccion
    schema: userSchema // esquema user
});
Colección de usuarios

Insertando datos a RxDB

Este paso es super sencillo, el insert es el mismo tal cual como lo haces en mongo db, pasándole el objeto que será almacenado:

setInterval(() => {
    collection.insert({
        id: `${Math.random()}-${Math.random()}`,
        name: 'fernando',
        email: 'jf.palacios.sz@gmail.com'
    });
    console.log('insert');
}, 2000);
Insertando datos cada 2 segundos

En nuestro caso, estamos utilizando la instancia de la colección para llamar a su función insert y crear un objeto cada 2 segundos, y por supuesto nos aseguramos de agregar un id aleatorio, recuerda que indicamos en el esquema que el id es primario, así nos evitamos de errores.

Momento de la subscripción (ojalá fuera a Netflix)

Finalmente el chiste de este ejemplo es porque queremos ver lo realtime, entonces para eso tenemos disponible subscripciones a eventos, por lo que debemos identificar la colección a la cual queremos escuchar, la siguiente linea nos permite escuchar cualquier evento de la colección que creamos en pasos anteriores:

collection.$.subscribe(changeEvent => console.dir(changeEvent));
Escuchando todos los eventos de la colección

Si necesitas escuchar eventos específicos, por supuesto que lo puedes hacer:

collection.insert$.subscribe(changeEvent => console.dir(changeEvent)); // al insertar
collection.update$.subscribe(changeEvent => console.dir(changeEvent)); // al actualizar
collection.remove$.subscribe(changeEvent => console.dir(changeEvent)); //al eliminar
Escuchando eventos específicos de la colección

Probando

Ahora si es momento de la prueba, para efectos del ejemplo vamos a ejecutar nuestro código dentro de una función asíncrona, de tal modo que quede así:

Encerrando el código en una función asíncrona

Ok definimos la función init, y luego hay que ejecutarla, solo colocate en tu terminal y ejecuta el archivo index.js, veremos la siguiente salida:

Funcionamiento de la subscripción a eventos

Nota que el primer listen(rojo) que colocamos es para escuchar todos los eventos, y el segundo(azul) solo para la inserción, ambos están pintando al objeto nuevo. Genial!

Tal como lo mencionamos antes, RxDB va a a generar carpetas para sus archivos de base de datos en la dirección que le asignaste, en nuestro caso lo generamos en la raíz del proyecto:

Carpetas de la base de datos creadas por RxDB

No se te ocurra tocarlas, porque como dice el video "si lo haces todo se va al carajo".

Y eso es todo por este post, si crees que te aportó valor, compártelo con para aportar a otros también, deja tu comentario porque amamos saber que piensas, y no olvides seguirnos en nuestras redes sociales, nos vemos en el siguiente post.

Fuente GIPHY

Fernando Palacios

¡Hoy es un gran día para hacer grandes cosas!

¡Genial! Te has suscrito con éxito.
¡Genial! Ahora, completa el checkout para tener acceso completo.
¡Bienvenido de nuevo! Has iniciado sesión con éxito.
Éxito! Su cuenta está totalmente activada, ahora tienes acceso a todo el contenido.