Artículo original escrito por Michael Bagley
Artículo original How to Add a Serverless Database to your React Projects
Traducido y adaptado por Rafael D. Hernandez

React sigue siendo una de las librerías de Javascript de front-end más populares. De acuerdo con la Encuesta anual de desarrolladores de Stack Overflow, React es la libreria front end más popular para crear interfaces y el segundo framework web más popular en general.

Aún más impresionante es que su popularidad sigue creciendo año tras año.

¿Cómo es que React sigue siendo tan popular (y buscado) entre los desarrolladores cuando tantos competidores han intentado destronarlo en los últimos años?

La respuesta completa a esa pregunta puede ser muy técnica, así que haré todo lo posible para que sea breve y claro.

En primer lugar, el DOM virtual de React es rápido y eficiente. En segundo lugar, la sintaxis declarativa JSX es fácil de aprender y presenta patrones de programación que los desarrolladores encuentran familiares.

Estos beneficios hacen que React sea ideal para una variedad de tipos de aplicaciones. Además, los individuos y los equipos pequeños siguen eligiendo React para sus aplicaciones web.

Un requisito común para las aplicaciones web modernas es una base de datos de backend para servir y consultar datos en tiempo real. La implementación tradicional de una base de datos de backend a menudo puede ser bastante precaria e ineficaz en términos de costos.

Afortunadamente, en los últimos cinco años, la tecnología sin servidor ha pasado a la vanguardia del desarrollo de aplicaciones modernas.

En este contexto, sin servidor significa que el desarrollador no tiene que configurar y administrar un servidor real para alojar su base de datos y otros servicios de backend. Más bien, utilizan un proveedor seguro para alojar su backend y conectarse a él directamente desde el código de la aplicación front-end. No hay necesidad de preocuparse por la escalabilidad y los sistemas.

Esta arquitectura de aplicaciones es relativamente nueva, pero es rentable y aumenta drásticamente la productividad. Estos beneficios se adaptan bien a quienes utilizan React para crear aplicaciones de producción modernas. Además, servicios como Easybase han creado librerías sin servidor creadas específicamente para componentes React con estado.

Este artículo demostrará lo fácil que es usar la librería easybase-react para implementar una base de datos sin servidor con estado en un nuevo proyecto de React. El siguiente ejemplo será una aplicación sencilla para tomar notas, pero la arquitectura sin servidor tiene el potencial de optimizar todo tipo de aplicaciones.

Tabla de contenidos:

  • Cómo Inicializar el Proyecto y los Componentes de React
  • Cómo Configurar la Base de datos sin Servidor
  • Arreglo de base de datos mutable

Cómo inicializar el proyecto y los componentes de React

Para crear un nuevo proyecto de React, voy a usar la popular biblioteca create-react-app (asegúrate de tener el nodo instalado en tu máquina).

Para aquellos que no estén familiarizados con la configuración manual de un proyecto de React, sugiero usar esta biblioteca, ya que creará un proyecto en blanco configurado correctamente.

Ejecuta el siguiente comando donde deseas crear tu nuevo proyecto:

npx create-react-app serverless-database-app

Una vez que se complete, instalemos la librería sin servidor:

cd serverless-database-app && npm install easybase-react

Finalmente, podemos comenzar el proyecto:

npm run start

Tu aplicación se abrirá automáticamente en tu navegador predeterminado. El componente raíz que ves está en src/App.js y aquí es donde se realizarán los principales cambios.

Antes de entrar en el proveedor sin servidor, voy a simplificar el código en App.js. Tendremos dos componentes: App y Notas. App.js ahora se verá de la siguiente manera:

import './App.css';

function App() {
  return (
    <div className="App" style={{ display: "flex", justifyContent: "center" }}>
      <Notes />
    </div>
  );
}

function Notas() {
  const backendData = [
    { title: "Grocery List", description: "Milk, Soup, Bread", createdat: "01-18-2021" },
    { title: "Math Homework", description: "Remember to finish question 8-10 before monday", createdat: "12-01-2020" },
    { title: "Call James", description: "Ask him about the company party.", createdat: "12-30-2020" }
  ]

  const noteRootStyle = {
    border: "2px #0af solid",
    borderRadius: 9,
    margin: 20,
    backgroundColor: "#efefef",
    padding: 6
  };

  return (
    <div style={{ width: 400 }}>
      {backendData.map(ele => 
        <div style={noteRootStyle}>
          <h3>{ele.title}</h3>
          <p>{ele.description}</p>
          <small>{ele.createdat}</small>
        </div>
      )}
    </div>
  )
}

export default App;

Agregué algunos datos de ejemplo llamados datos de backend, pero reemplazaremos esto con una base de datos en tiempo real en el siguiente paso. Aquí hay una captura de pantalla de mi implementación actual para referencia:

serverless React example before database

En aras de la brevedad, el estilo de esta aplicación será muy rudimentario. ¡Pero definitivamente debes darle a tu propia aplicación un aspecto y una sensación única!

Cómo configurar la base de datos sin servidor

Hay muchos proveedores de backend sin servidor en general (AWS, Google Cloud, etc.). Existe variación entre la funcionalidad de estos proveedores. Algunos son más adecuados, tal vez, para aplicaciones móviles, procesamiento en paralelo o aprendizaje automático, etc.

Voy a usar Easybase porque su plataforma cuenta con una librería específica de React que está construida para aplicaciones sin servidor. A continuación veremos qué tan rápido y fácil se configura este paquete en código.

He utilizado esta plataforma para múltiples proyectos y, con mucho, los aspectos más valiosos de easybase-react son el almacenamiento en caché automático de sesiones y la obtención segura de datos. Implementar estos módulos manualmente es una gran molestia y puede ser un proyecto completo dentro de sí mismo.

Para empezar, vamos a hacer dos cambios en App.js. Primero, usemos el paquete easybase-react que instalamos anteriormente agregando una línea de importación a la parte superior de la App.js. Traigamos EasybaseProvider y useEasybase.

En segundo lugar, envuelve el componente Notes en el componente EasybaseProvider.

App.js ahora debe verse de la siguiente manera. Teng en cuenta que también traje el hook useEffect de React.

import './App.css';
import { EasybaseProvider, useEasybase } from 'easybase-react';
import { useEffect } from 'react';

function App() {
  return (
    <div className="App" style={{ display: "flex", justifyContent: "center" }}>
      <EasybaseProvider>
        <Notes />
      </EasybaseProvider>
    </div>
  );
}

// ...

El componente EasybaseProvider dará a todos los componentes hijos acceso válido al hook useEasybase, una vez que pasemos la configuración requerida.

EasybaseProvider tiene una propiedad llamada ebconfig, que es un único archivo que auténtica y asegura todas las conexiones desde nuestro proyecto React.

Así es como podemos obtener un token ebconfig asociado a una tabla de datos personalizada:

  • Inicia sesión en Easybase o crea una cuenta gratuita
  • Abre el diálogo Crear tabla (Create Table) a través del botón ' + ' en el grupo de botones inferior izquierdo
  • Asigna un nombre a su tabla y crea columnas que se correspondan con las del arreglo de ejemplo (título, descripción, creado en)
Easybase React create table

Voy a agregar manualmente las filas de ejemplo del arreglo backendData para referencia, pero este paso no es necesario.

Easybase React adding row to Notes App
  • Navega a la pestaña Integrar y crea una nueva integración de React
Easybase React add integration
  • En el cajón derecho, habilita el Modo Activo, el Modo de prueba y los Permisos de lectura y escritura. A después, descarga el token de React y haz clic en Guardar en la parte superior derecha
Easybase React integration edit 1
Easybase React integration edit 2
  • Coloca el recién descargado archivo ebconfig.js dentro de la carpeta src/ de tu proyecto
├── README.md
├── node_modules/
├── package.json
├── public/
└── src/
    ├── ebconfig.js   <---
    ├── App.css
    ├── App.js
    ├── index.css
    ├── index.js
    └── ...
  • Finalmente, importa este archivo en App.js y pásalo como el prop ebconfig de EasybaseProvider así:
import './App.css';
import { EasybaseProvider, useEasybase } from 'easybase-react';
import { useEffect } from 'react';
import ebconfig from './ebconfig';

function App() {
  return (
    <div className="App" style={{ display: "flex", justifyContent: "center" }}>
      <EasybaseProvider ebconfig={ebconfig}>
        <Notes />
      </EasybaseProvider>
    </div>
  );
}

// ...

Así como así, nuestro proyecto está configurado para la funcionalidad sin servidor. Todo lo que queda por hacer es utilizar las funciones proporcionadas por el hook de useEasybase, que haremos en la siguiente sección.

Si tu proyecto va a manejar usuarios individuales con autenticación de inicio de sesión segura, use la pestaña Proyectos en lugar de una simple integración de React.

Arreglo de base de datos mutable

Ahora que hemos configurado correctamente nuestro backend, los componentes hijos de EasybaseProvider pueden acceder al hook useEasybase. Este hook proporciona las funciones esenciales necesarias para acceder a nuestros datos remotos.

Comencemos por traer tres funciones; configureFramce, sync y Frame, en nuestro componente Notes con const { Frame, sync, configureFrame } = useEasybase ();.

Cuando nuestro componente se monta por primera vez, queremos configurar nuestro Frame para obtener las primeras 10 entradas de nuestra applicacion de base de datos, NOTES. Frame actúa como un arreglo de base de datos con estado en la que la sincronización de llamadas normalizará los cambios locales con los cambios en la base de datos del backend.

function Notes() {
  const { Frame, sync, configureFrame } = useEasybase();

  useEffect(() => {
    configureFrame({ tableName: "NOTES APP", limit: 10 });
    sync();
  }, []);

  const noteRootStyle = {
    border: "2px #0af solid",
    borderRadius: 9,
    margin: 20,
    backgroundColor: "#efefef",
    padding: 6
  };

  return (
    <div style={{ width: 400 }}>
      {Frame().map(ele => 
        <div style={noteRootStyle}>
          <h3>{ele.title}</h3>
          <p>{ele.description}</p>
          <small>{String(ele.createdat).slice(0, 10)}</small>
        </div>
      )}
    </div>
  )
}

Sync manejará automáticamente los procesos de backend necesarios. Y lo que es más importante, volverá a renderizar nuestro componente con los datos nuevos en Frame.

Si reconstruimos nuestra aplicación, las nuevas notas mostradas serán las mismas presentes en nuestra tabla de datos. ¡Felicidades, estás usando una base de datos sin servidor!

Vamos a divertirnos un poco más agregando un botón que empujará una nueva nota a Easybase y renderizará su aplicación en consecuencia.

Crea un nuevo componente llamado NewNoteBotton. Obten las funciones de sync y las funciones de Frame del hook useEasybase.

Voy a colocar este botón en la parte superior izquierda de la ventana usando el posicionamiento absoluto. Cuando un usuario hace clic en este botón, mi componente obtendrá un nuevo título y descripción del usuario y lo publicará en Easybase utilizando Frame y sync.

Coloca este componente recién creado debajo del componente Notes dentro del EasybaseProvider.


function App() {
  return (
    <div className="App" style={{ display: "flex", justifyContent: "center" }}>
      <EasybaseProvider ebconfig={ebconfig}>
        <Notes />
        <NewNoteButton />
      </EasybaseProvider>
    </div>
  );
}

// ...

function NewNoteButton() {
  const { Frame, sync } = useEasybase();

  const buttonStyle = {
    position: "absolute",
    left: 10,
    top: 10,
    fontSize: 21
  }

  const handleClick = () => {
    const newTitle = prompt("Please enter a title for your note");
    const newDescription = prompt("Please enter your description");
    
    Frame().push({
      title: newTitle,
      description: newDescription,
      createdat: new Date().toISOString()
    })
    
    sync();
  }

  return <button style={buttonStyle} onClick={handleClick}>? Add Note ?</button>
}

Mi implementación recopila el título y la descripción deseados por el usuario a través de la función de solicitud nativa, pero es probable que tu aplicación de producción requiera una solución de entrada más robusta. Sin embargo, esto funcionará bien para una demostración.

serverless React project add note

Observa el botón nuevo en la esquina superior derecha de la pantalla. Al hacer clic en esto, aparecerán dos cuadros de texto. Una vez completado, el componente Notes vuelve a renderizarse después de la llamada de sync que muestra su nueva entrada.

serverless React project with added note

Estos cambios serán visibles instantáneamente en tu mesa Easybase, ¡así que siéntate libre de hacer cambios allí también!

Conclusion

Los números no mienten: React es robusto, maduro y amado por los desarrolladores. La comunidad de código abierto realmente ha abrazado el proyecto, con más de 1500 colaboradores.

Esta libreria ha demostrado ser una de las mejores formas de crear interfaces hermosas y de alto rendimiento. De hecho, incluso puedes implementar tu proyecto React directamente en las páginas de Github.

El uso de React con serverless se ha convertido en una obviedad. La adopción de esta tecnología escalable ha crecido enormemente. Echa un vistazo al gráfico de tendencias de Google para el término "sin servidor" en los últimos 8 años.

Google Trends for 'serverless'
Google Trends for 'serverless'

Esta tecnología ha permitido a los desarrolladores implementar aplicaciones escalables de nivel empresarial a una fracción del costo y sin los gastos generales convencionales. Al desbloquear las herramientas que tradicionalmente están disponibles para aquellos con abundantes recursos, la tecnología sin servidor continúa alentando a los desarrolladores a convertir sus ideas en realidad.