Usa estos componentes automáticos para trabajar con Ajax, formularios y operaciones de CRUD, completamente configurables para cualquier tipo de API REST y proyecto Javascript Vanilla, React, Vue, Angular, Lit, etc,
En este artículo te presentamos una serie de componentes para implementar un sistema CRUD automático completamente configurable, que puedes adaptar a cualquier API REST o servicio web.
Con estos componentes, obtendrás funcionalidades CRUD avanzadas y una excelente experiencia de usuario ya que todos los procesos se realizan mediante Ajax. Estos componentes los puedes integrar fácilmente en cualquier web tradicional o en aplicaciones frontend avanzadas, como single page applications.
En este enlace puedes encontrar toda la documentación de este catálogo de componentes, con las explicaciones y ejemplos para que puedas implantarlos y configurarlos en tu aplicación web.
En el artículo Componentes para hacer un CRUD automático encuentras los siguientes apartados de interés.
No programes un CRUD nunca más!!
Si ya tienes experiencia desarrollando habrás hecho miles de proyectos con altas bajas y modificaciones en entidades. De hecho las funcionalidades CRUD son las más recurrentes en cualquier tipo de aplicación de gestión. La idea detrás de estos componentes es que no programes las funcionalidades de un CRUD nunca más.
Hacer un CRUD está bien para aprender y soltarse en tareas básicas de la programación, pero cuando has hecho el mismo trabajo tantas veces al final resulta aburrido o incluso tedioso.
Es por ello que existen muchas herramientas de administración que te ofrecen la posibilidad de acortar tiempos en tareas tan recurrentes como las altas, bajas, modificaciones y listados. Estos componentes de CRUD automático son una estupenda alternativa para facilitarte estos procesos de una manera sencilla y muy amistosa para el usuario y el desarrollador.
Adaptados para el trabajo con API REST
Los componentes de CRUD que te presentamos están adaptados especialmente para trabajar con servicios web del tipo API REST. Se encargan de toda la parte que tiene que ver con el front, permitiendo implementar las funcionalidades únicamente implantando componentes y configurándolos vía propiedades.
Solo tendrás que definir la configuración de los distintos aspectos necesarios para ajustar los componentes a los recursos de tu API!!
Los componentes, no obstante, se pueden utilizar de muchas formas. Incluso podrás sacarles partido aunque en no tengas específicamente un API REST, ya que los componentes más básicos se podrían usar para implementar simples llamadas a Ajax de manera declarativa, enviando cualquier tipo de datos y recibiendo las respuestas del servidor, sean como sean, sin que tengas que programar nada.
Basados en Web Components
Otra de las ventajas de estos componentes de CRUD es que están basados en el estándar de Web Components, por lo que puedes utilizarlos en cualquier tipo de proyecto JavaScript.
Gracias a ser Web Components, puedes integrarlos también sin problemas con aplicaciones basadas en librerías como React o frameworks como Angular o Vue. Por eso son ideales para sitios web tradicionales o también para aplicaciones frontend realizadas con cualquier tipo de framework o librería.
La biblioteca de vistas que hemos empleado para desarrollarlos es Lit. Para el uso de componentes avanzados necesitarás también usar Lit, de modo que crees componentes ya especializados en la gestión de cualquiera de los recursos que exponga tu API. Lit es una librería ligera (5 KB) y muy sencilla de usar. De todos modos, una vez crees tus componentes especializados, con la configuración oportuna, formularios personalizados, acciones, etc., los podrás usar simplemente con utilizar el elemento personalizado, algo como:
<crud-clientes></crud-clientes>
Allá donde pongas esa etiqueta podrás aportar todas las funcionalidades necesarias para la edición de tus clientes.
Basados en Axios
Estos componentes están basados en una popular librería para realización de solicitudes HTTP llamada Axios. Esta librería se utiliza habitualmente en el ecosistema de React o el frameworks backend como Laravel. Si ya estás utilizando Axios en tu proyecto puedes aplicar la librería con las configuraciones actuales de tu aplicación directamente, que nuestros componentes de CRUD la usarán sin mayores complicaciones.
Si no estás aplicando Axios todavía en tu proyecto esta librería te facilita el camino del trabajo con Ajax, pues básicamente consiste en una envoltura a muy alto nivel de las funcionalidades del propio navegador. Gracias a Axios te permite disponer de funcionalidades avanzadas necesarias para muchas de las APIs o servicios web, como por ejemplo la autenticación o la personalización de las cabeceras necesarias. Para estos casos en los que no uses Axios todavía nuestros componenetes de CRUD realizarán todo el trabajo por ti, pudiendo implementar diversas configuraciones automáticas o muy sencillas para trabajar con muchos tipos de APIs.
De este modo podrás utilizar estos componentes de CRUD en cualquier tipo de aplicación, abierta o cerrada, que requiera autenticación o no.
Presentación detallada de los componentes de CRUD automático en vídeo
En el siguiente vídeo puedes ver una presentación más detallada de los componentes de CRUD automático, en la que te explicamos todos los integrantes del catálogo de componentes reutilizables que forman esta librería que hemos publicado recientemente. Publicaremos nuevos vídeos en breve con otras explicaciones detalladas para usar cada uno de los componentes.
Créditos y más información sobre los componentes de CRUD
Ya para ofrecerte más información cabe decir que los componentes los hemos desarrollado nosotros mismos, el equipo de DesarrolloWeb.com y EscuelaIT. Los tenemos en producción en numerosas aplicaciones, solo que no habíamos tenido el tiempo necesario para liberarlos como software libre, documentarlos, y ponerlos a disposición de toda la comunidad.
Esperamos que puedas probar esta biblioteca genérica para crear sistemas de altas, bajas, listados y modificaciones y nos puedas compartir tus impresiones y sugerencias para mejorarla.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...