Remult, framework Crud para Fullstack Typed

Remult es una biblioteca CRUD de pila completa que simplifica el desarrollo aprovechando los formularios TypeScript, proporcionando un cliente API y un generador de consultas con seguridad de tipos.

En el desarrollo de software, se deben administrar y sincronizar dos modelos de datos para garantizar la funcionalidad adecuada del sistema: los modelos de servidor y cliente. Los modelos de servidor definen la estructura de la base de datos y la API, mientras que los modelos de cliente definen los datos transmitidos hacia y desde la API.

Sin embargo, mantener conjuntos separados de modelos y validadores puede generar redundancia, mayores costos de mantenimiento y la posibilidad de errores cuando los modelos no están sincronizados.

Remult resuelve este problema al proporcionar un modelo integrado que define el esquema de la base de datos, expone las API CRUD simples y admite la integración del lado del cliente que permite a los desarrolladores consultar la base de datos, todo mientras mantiene fácilmente la seguridad de tipos.

Definir entidades

Remult usa decoradores para convertir clases básicas de JavaScript en entidades Remult. Los desarrolladores pueden lograr esto fácilmente agregando el diseñador de entidades a la clase y aplicando los decoradores de campo relevantes a cada propiedad.

Con los decoradores, Remult simplifica el proceso de creación de entidades y sus dominios asociados, haciéndolos más eficientes e intuitivos para los desarrolladores.

import { Entity, Fields } from "remult"

@Entity("contacts", {
  allowApiCrud: true
})

export class Contact {
  @Fields.autoIncrement()
  id = 0
  @Fields.string()
  name = ""
  @Fields.string()
  number = ""
}

Configuración del lado del servidor

Para comenzar a usar Remult, regístrelo junto con las entidades necesarias con el servidor elegido.

Afortunadamente, Remult proporciona integraciones no tradicionales para muchos marcos de servidor populares, incluidos Express, Fastify, Next.js, Nest y Koa.

import express from "express";
import { remultExpress } from "remult/remult-express";
import Contact from "../shared/Contact.ts";

const app = express();

app.use(
  remultExpress({
    entities: [
      Contact
    ]
  })
);

Integración del lado del cliente

Después de configurar el backend y las entidades, el siguiente paso es integrar Remult con el frontend de la aplicación.

Afortunadamente, la integración del cliente de Remult está diseñada para ser independiente de la biblioteca, lo que significa que puede ejecutarse utilizando las capacidades de búsqueda del navegador o Axios.

Para ilustrar esta funcionalidad, considere el siguiente ejemplo:

import { useEffect, useState } from "react"

import { remult } from "remult"
import { Contact } from "./shared/Contact"
const contactsRepo = remult.repo(Contact)

export default function App() {
  const [contacts, setContacts] = useState<Contact[]>([])

  useEffect(() => {
    contactsRepo.find().then(setContact)
  }, [])

  return (
    <div>
      <h1>Contacts</h1>
      <ul>
        {contacts.map(contact => {
          return (
            <div key={contact.id}>
              {contact.name} | {contact.phone}
            </div>
          )
        })}
      </ul>
    </div>
  )
}

Este ejemplo demuestra la facilidad y flexibilidad con la que se puede integrar Remult en el front-end de una aplicación, lo que permite a los desarrolladores aprovechar sin problemas el poder y la funcionalidad de Remult en todo el paquete.

Remult es un software de código abierto disponible bajo Licencia del Instituto de Tecnología de Massachusetts. Damos la bienvenida a las contribuciones a través de Remult Repositorio Github.