Conoce a tu nuevo mejor amigo: Backend a Frontend sin la cinta adhesiva

... Hola, soy Noam. Soy un desarrollador full stack y el creador del marco de trabajo remoto de código abierto. Es tedioso, repetitivo y consume mucho tiempo escribir un backend de Node.js para una aplicación React intensiva en multitudes. Cada entidad de dominio requiere tipos de modelos, APIs REST, paginación en el servidor, ordenamiento y filtrado, validación de datos, control de acceso y eventualmente un ORM o SQL.

Para empeorar las cosas, gran parte de este código se duplica en nuestro frontend en forma de validación en el frontend o control de acceso en el frontend.

Permíteme mostrarte cómo con Remalt podemos solucionar eso.

Aquí tenemos una aplicación de lista de tareas en el front-end escrita usando React y Next.js.

En nuestra aplicación de lista de tareas, nuestros usuarios pueden agregar tareas, completarlas y eliminarlas.

En el lado de la API, ya hemos configurado rutas de captura para NextAuth y para Remalt.

Hemos pedido a Remalt que use la base de datos Postgres y que obtenga el usuario de NextAuth.

Nuestra aplicación utiliza el tipo de tarea para definir la tarea.

Vamos a pedirle a Remalt que agregue capacidades de tarjeta de pila completa basadas en esta tarea.

Agregaremos un decorador de entidad, admitiremos todas las capacidades de tarjeta y agregaremos decoradores de campo.

Luego iremos al array de entidades y registraremos el tipo de tarea.

En cuanto lo hagamos, obtendremos una API REST que devuelve las tareas que están en la base de datos.

Vamos a utilizar eso en nuestro código de front-end.

Iremos a nuestro componente de lista de tareas y lo primero que haremos es definir el repositorio de tareas.

Luego usaremos ese repositorio para cargar las tareas, insertar nuevas tareas, guardar cambios en las tareas existentes y eliminar tareas.

Y eso es todo. Eso es todo lo que necesitamos hacer para crear una aplicación de pila completa. Puedo agregar tareas, puedo marcar tareas como completadas, puedo eliminar tareas y todas nuestras operaciones estándar de API REST, Obtener, Publicar, Poner y Eliminar, todas utilizando la API REST estándar.

Enfoquémonos en el método de definición. De forma predeterminada, obtiene todas las tareas del backend, pero podemos limitarlo para obtener las dos primeras filas y obtener la segunda página. Y obtenemos paginación en el lado del servidor. Y puedo decir, Ordenar por completado ascendente. Así obtengo el ordenamiento en el lado del servidor. Y puedo filtrar usando completado verdadero o falso o sin definir para no filtrar. Y todo eso utiliza la API REST estándar. Así que solo con definir estos cuatro decoradores antes, pudimos obtener una aplicación de pila completa, un lenguaje de consulta que está completamente tipado de extremo a extremo desde el front-end hasta el back-end.

Ahora, actualmente, los usuarios múltiples no ven los cambios realizados por otros usuarios. Vamos a solucionar eso usando Grimal. Para hacer eso, reemplazaremos find con live query, luego nos suscribiremos y la suscripción obtendrá un objeto de información que podemos usar para aplicar cambios a nuestra tarea. También devolveremos el resultado para que se cancele la suscripción cuando el componente se desmonte. Ahora, tan pronto como hagamos eso y actualicemos ambos navegadores, cualquier cambio realizado por un usuario se reflejará automáticamente en todos los demás usuarios. Otra preocupación importante es la validación de datos. Actualmente, el usuario puede agregar

Tenemos tareas vacías y queremos evitar eso. Vamos a configurar esta validación en nuestra tarea para tener una única fuente de verdad. Voy a decir aquí tarea validar y escribiré mi lógica de validación si la longitud del título de la tarea es menor que 2, throwError demasiado corto. Tan pronto como haga eso y actualice el navegador, si intento agregar una tarea vacía, obtendré un error de validación, pero observa la pestaña de red. No se realizan llamadas de red, por lo que este código de validación en el front-end nos proporciona validación en el front-end. Intentemos evitar eso y enviar una llamada de publicación al backend con un título vacío. Tan pronto como hagamos eso, obtendremos la misma validación, el mismo código que hemos escrito también para validar la API, por lo que obtenemos una validación consistente entre la API y el front-end utilizando el mismo código. Otro aspecto importante es el control de acceso. Solo quiero que los usuarios autenticados puedan acceder a los datos y solo quiero que los administradores puedan insertar nuevas tareas. Tan pronto como guarde eso y actualice el navegador, podemos ver que no se muestran las tareas porque no estoy autenticado. Ahora, cuando hemos configurado NextOS, hemos configurado dos usuarios, Jane, que es una administradora, y Steve, que no es un administrador. Probemos eso y veamos qué sucede. Voy a iniciar sesión como Jane y aquí puedo ver las tareas y puedo agregar otra tarea. Cierro sesión e inicio sesión como Steve y podemos ver que Steve no puede agregar una nueva tarea porque Steve no es un administrador. Ahora, mejoremos la experiencia del usuario para que también no permita a los usuarios que no tienen permiso agregar, realmente no deberían ver el formulario. Así que vamos a nuestro componente de tarea o componente de lista de tareas, resaltamos el formulario y diremos desde nuestro repositorio, si los metadatos dicen que se permite la inserción de la API, solo entonces mostrar el formulario. Ahora Steve ya no ve el formulario, pero si cierro sesión e inicio sesión como Jane, Jane sí ve el formulario y puede agregar. Así es como, utilizando Grimmult, podemos mantener una única fuente de verdad para la escritura de extremo a extremo, la validación y el control de acceso que se comparte entre el front-end y el back-end de manera consistente. Grimmult ya funciona con la mayoría de las pilas populares, la mayoría de las bases de datos y se puede implementar en cualquier servidor Node.js o en la nube sin servidor. ¿Listo para probar Grimmult? Dirígete a Grimmult.dev y consulta nuestros tutoriales y guías. Echa un vistazo a nuestros proyectos de ejemplo en GitHub o saluda en el canal de Discord de Grimmult. Gracias por ver.