Vue & Firestore
¿Qué vamos a hacer?
En este artículo vamos a crear una aplicación web para gestionar una lista de artículos. Estos artículos se guardarán en una base de datos sin necesidad de desarrollar un Backend, visualizando los cambios en tiempo real. El Frontend se va a desarrollar en JavaScript con Vue y la base de datos va a estar alojada en Firestore, comentando mi experiencias con estas tecnologías y por qué las recomiendo.
¿Cuándo debería desarrollar una aplicación en tiempo real?
Cuando se comienza a plantear la arquitectura de una aplicación web, es obligatorio pensar cual va a ser el principal propósito de nuestra aplicación y cómo van a interactuar nuestros usuarios, es decir, es distinto hacer una aplicación e-commerce en la que se listan artículos (por ejemplo Amazon), la cual puede funcionar mediante polling o simplemente listando los artículos después de realizar ciertas acciones, a un gestor de archivos (Confluence o Google Drive), que debe estar continuamente comprobando y realizando acciones sin que el usuario tenga que hacer nada.
Por tanto, si tus usuarios tienen que poder ver cambios en la web sin tener que refrescar ni navegar, posiblemente la mejor opción es que la aplicación funcione en tiempo real.
Arquitectura dirigida a eventos
Las aplicaciones en tiempo real deben seguir una Arquitectura orientada a eventos, siendo un evento toda aquella acción que cambie el estado de la aplicación. En nuestra aplicación, los eventos pueden ser hacer clic sobre el botón de crear un artículo, cerrar el formulario o enviarlo, pero también pueden generarse eventos en la edición, creación y eliminación de un artículo. Cuando algunos de estos eventos se produce, cambia el estado de la aplicación y por tanto han de realizarse ciertas operaciones por consecuencia.
¿Qué es Vue?
Este Framework JavaScript reactivo está creciendo muchísimo y se podría decir que todo se debe a su sencillez, a la gran comunidad que se está formando y a todas las herramientas que se están desarrollando con y para él.
Al tener tanta popularidad, su uso es muy diverso: se pueden desarrollar simples aplicaciones webs SPA, aplicaciones renderizadas en servidor (con Nuxt.js) para poder posicionarlas mediante SEO, aplicaciones móviles híbridas, etc.
¿Qué es Cloud Firestore?
Cloud Firestore es la siguiente versión de la base de datos de Firebase, antes llamada “Firebase Realtime Database”. Es una base de datos de documentos NoSQL rápida, completamente administrada, sin servidor y nativa de la nube que simplifica el almacenamiento, la sincronización y la consulta de datos para sus aplicaciones móviles, web e IoT a escala global.
Firestore comunica los cambios con la web mediante WebSockets, de esta forma, todos los cambios se envían de inmediato a todos los clientes (tanto web como móviles) que tengan estos WebSockes abiertos.
¿Por qué utilizar Firestore?
Firestore es una de las herramientas que proporciona Firebase (producto de Google). Si eliges Firestore para alojar los datos de tu aplicación, puedes tener toda tu aplicación desplegada en Firebase, por ejemplo: guardar los datos de la aplicación en Firestore, desplegando el proyecto Front con Firebase Hosting (este incluso te proporciona un certificado SSL con Let’s Encrypt), alojando ficheros estáticos en Storage y gestionando los usuarios con Firebase Authentication.
Además, con Firebase también pueden recogerse analíticas de forma gratuita con Google Analytics y enviar notificaciones mediante Firebase Cloud Messaging (por el momento sólo disponible en aplicaciones móviles) entre otras muchas funcionalidades. También da soporte offline a móviles y aplicaciones web.
Otro punto a destacar son los precios, ya que no es fácil superar los recursos gratuitos ofrecidos.
Crear un proyecto Vue
Utilizamos el CLI de Vue para crear un proyecto con la configuración que se necesite.
npm install -g @vue/cli
# OR
yarn global add @vue/clivue create <nombre-del-proyecto>
Con la versión del cli v3.5.0, realiza una breve pero completa serie de preguntas para configurar el entorno del proyecto (librerías, preprocesadores, linters, etc.). Estas son las configuraciones seleccionadas en este caso.
Arrancar el proyecto y abrir la aplicación en localhost:8080.
cd vue-firestore
npm run serveYo utilizo Visual Studio Code, con el plugin Vetur y vscode-icons, por tanto el scaffolding del proyecto se vería así.
Después de aplicar diseños, lógica en el estado y algunas funcionalidades, la aplicación quedaría de la siguiente forma, en el momento inicial en el cual no existe ningún artículo.
Integración con Firestore
Crea un proyecto Firebase
Abrir la consola de Firebase y crear un proyecto nuevo. En el siguiente paso, habilitar Google Analytics si se quiere, en este caso no lo vamos a hacer.
Cuando termine de crearse, clicar en “Continuar” y acceder a la sección Database.
Clicar en Crear base de datos. En este artículo seleccionamos la opción modo de prueba, pero es importante recalcar que esto no es seguro ya que no están configuradas las reglas de la base de datos con las que se define los patrones de seguridad para acceder a las colecciones y documentos de la base de datos.
Cuando termine la creación, deberá aparecer algo así:
Configuración del proyecto Vue
Para realizar la conexión del proyecto Frontend con la base de datos, hay que instalar la librería que proporciona Google para trabajar con Firebase. Nos dirigimos al proyecto Vue y ejecutamos el siguiente comando:
npm install --save firebase"firebase": "^7.2.1" // Versión utilizada en el ejemplo
Además, es necesario crear una aplicación Web en el proyecto de Firebase para obtener unas credenciales necesarias para la conexión a la aplicación, y por tanto a la base de datos. Acceder a Project Overview, clicar en
Se introduce el nombre de la nueva aplicación web (no se puede modificar el ID que se genera utilizando el nombre, pero se pueden crear cuantas aplicaciones se quiera), apareciendo esto:
En el siguiente paso aparecerá la configuración necesaria, con los siguientes datos:
Por seguridad, estas credenciales no se deben subir al repositorio si este es público, ya que cualquiera podría conectarse a la aplicación Firebase, en este caso se ha colocado en un fichero que se incluye en .gitignore.
En el fichero main.js de la aplicación Vue, se inicializa la aplicación Firebase con la configuración anterior.
Si se quiere que los datos que han sido consultados antes de perder la conexión de internet se visualicen, es decir, que se cacheen los datos solicitados y la aplicación pueda funcionar en modo offline, se añade la siguiente configuración después del paso anterior:
Después, guardamos la conexión en el store, para poder acceder directamente a la BBDD desde un getter del store de Vuex en cualquier parte de la aplicación.
Leyendo y escribiendo datos
Una vez tenemos conectado el proyecto Vue con la BBDD, podemos empezar a leer y escribir datos en ella. Para ello nos dirigimos a la sección Database en nuestro proyecto Firebase.
Dado que el modelo de datos de Firestore es NoSQL, los datos se almacenan en documents, los cuales se organiza en collections. Esto se crearía así:
Ahora, en cualquier componente o vista del proyecto Vue, podemos leer los datos de la siguiente forma:
Con esto, cuando se añada/modifique/elimine algún artículo de la collection, este watch se lanzará, ejecutando el código correspondiente.
En el siguiente GIF, se edita un dato directamente desde la BBDD y se visualiza en el Front sin hacer nada.
En este GIF se crea un artículo desde el Front y automáticamente se crea el documento en la BBDD.
Mi experiencia con Firebase
Antes de concluir el artículo, me gustaría repasar algunos puntos importantes que pueden servirte de ayuda como introducción a Firebase.
- Cuando se establece una conexión a una collection, es mejor que se traten los cambios sobre esta con changes, tal y como hemos visto en el ejemplo, porque de lo contrario, si existen muchos datos puede llegar a penalizar el rendimiento ya que se están manejando todos los documentos a la vez sin distinguir cuales han sido added|removed|modified y cuáles no.
- Los índices utilizados para las queries encarecen los gastos de funcionamiento del almacenamiento y a su vez el tamaño del almacenamiento, procura tener cuidado en la forma de organizar las collections.
- Cuando se cree el proyecto Firebase, es importante marcar la Cloud resource location más cercana a la mayoría de usuarios que usarán tu aplicación ya que esto luego no puede cambiarse.
- Firebase está adaptando todas sus features para aplicaciones webs, ya que desde el principio estaba más enfocada a las aplicaciones móviles, así que ¡calma!, aún quedan muchas features por llegar a la web.
Conclusiones
Si necesitas crear una aplicación en tiempo real, escalable, rápida y barata, sin duda esta es una de las mejores opciones. Además, es una opción con tecnologías recientes y que están creciendo y creando gran comunidad.
Si quieres utilizar el proyecto que hemos desarrollado en este artículo, puedes descargarlo en mi GitHub, pero recuerda que deberás añadir la configuración de firebase que comentamos antes.
¡Anímate y pásate al REAL TIME!
