Remult, framework Crud pour Fullstack Typé

Remult est une bibliothèque CRUD complète qui simplifie le processus de développement en tirant parti des formulaires TypeScript, en fournissant un client API et un générateur de requêtes de type sécurisé.

Dans le développement de logiciels, deux modèles de données doivent être gérés et synchronisés pour garantir le bon fonctionnement du système : les modèles serveur et client. Les modèles de serveur définissent la structure de la base de données et l’API, tandis que les modèles client définissent les données transmises vers et depuis l’API.

Cependant, le maintien d’ensembles de modèles et de validateurs distincts peut entraîner une redondance, une augmentation des coûts de maintenance et un potentiel d’erreurs lorsque les modèles ne sont plus synchronisés.

Remult résout ce problème en fournissant un modèle intégré qui définit le schéma de la base de données, expose des API CRUD simples et prend en charge l’intégration côté client qui permet aux développeurs d’interroger la base de données, tout en maintenant facilement la sécurité des types.

Définir les entités

Remult utilise des décorateurs pour convertir les classes JavaScript de base en entités Remult. Les développeurs peuvent facilement y parvenir en ajoutant le concepteur d’entités à la classe et en appliquant les décorateurs de champs pertinents à chaque propriété.

Avec les décorateurs, Remult simplifie le processus de création d’entités et de leurs domaines associés, les rendant plus efficaces et intuitifs pour les développeurs.

import { Entity, Fields } from "remult"

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

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

Configuration côté serveur

Pour commencer à utiliser Remult, enregistrez-le avec les entités nécessaires auprès du serveur choisi.

Heureusement, Remult fournit des intégrations non traditionnelles pour de nombreux frameworks de serveurs populaires, notamment Express, Fastify, Next.js, Nest et 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
    ]
  })
);

Intégration côté client

Après avoir configuré le backend et les entités, l’étape suivante consiste à intégrer Remult au frontend de l’application.

Heureusement, l’intégration du client de Remult est conçue pour être indépendante de la bibliothèque, ce qui signifie qu’elle peut s’exécuter à l’aide des capacités de récupération du navigateur ou d’Axios.

Pour illustrer cette fonctionnalité, considérons l’exemple suivant :

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>
  )
}

Cet exemple démontre la facilité et la flexibilité avec lesquelles Remult peut être intégré dans le front-end d’une application, permettant aux développeurs d’exploiter de manière transparente la puissance et les fonctionnalités de Remult sur l’ensemble du package.

Remult est un logiciel open source disponible sous Licence du Massachusetts Institute of Technology. Nous accueillons les contributions via Remult Référentiel Github.