Versión en EspañolES

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

Incluso con todos los increíbles frameworks disponibles hoy en día en comparación con hace una década (o incluso dos, para los desarrolladores que han estado aquí tanto tiempo como yo), todavía parece que gran parte de nuestro trabajo como desarrolladores fullstack es repetitivo y se mantiene unido por código de cinta adhesiva que no deberíamos estar escribiendo.

Esto se debe a que escribimos mucho código duplicado y boilerplate para tareas cotidianas como CRUD de bases de datos simples, validación de datos, autorización y conversiones de tipos de datos, pero la mayoría de estas tareas no han avanzado al ritmo de la arquitectura web moderna.

En esta sesión de codificación en vivo, convertiremos una aplicación React de frontend en una aplicación fullstack con código que es fácil de escribir, seguir y, lo más importante, mantener con seguridad de tipos de extremo a extremo (¡di no a GraphQL!), validaciones consistentes y encapsuladas, consultas en tiempo real, control de acceso, APIs seguras, ya sabes. Saldrás de esta sesión capaz de construir aplicaciones para la arquitectura web moderna mientras mantienes nuestro código DRY y aumentas la productividad a través de una pila completamente de código abierto y común [React / Vue, etc.].

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

FAQ

Remalt es un marco de trabajo remoto de código abierto diseñado para simplificar el desarrollo de aplicaciones full stack, especialmente útil para evitar la repetición de código en el backend y frontend, como la validación de datos y el control de acceso.

Remalt facilita la creación de aplicaciones de lista de tareas en React y Next.js al proporcionar una infraestructura que permite definir modelos, APIs REST y otras funcionalidades de backend necesarias, que luego pueden utilizarse de manera eficiente en el frontend.

Remalt ofrece funcionalidades como paginación en el servidor, ordenamiento, filtrado y validación de datos, que se integran fácilmente tanto en el backend como en el frontend, manteniendo una única fuente de verdad y consistencia en la validación y control de acceso.

Remalt utiliza 'live query' para permitir la actualización en tiempo real de los datos mostrados en la aplicación. Cuando se hace un cambio por un usuario, este se refleja automáticamente en todos los demás usuarios a través de suscripciones que actualizan los datos en tiempo real.

Remalt implementa control de acceso permitiendo que sólo usuarios autenticados y autorizados puedan realizar ciertas acciones, como insertar nuevas tareas. Esto se configura a nivel de backend y se refleja de manera consistente en el frontend.

Grimmult es una herramienta que funciona con Remalt para mejorar la experiencia de usuario al mantener una única fuente de verdad para la escritura, validación y control de acceso, lo que permite un manejo de datos más consistente y seguro entre el frontend y backend.

Puedes visitar el sitio web Grimmult.dev para explorar tutoriales y guías. Además, puedes revisar los proyectos de ejemplo en GitHub o unirte al canal de Discord de Grimmult para más soporte y recursos.

Noam Honig

7 min

06 Jun, 2023

Comments

Video Summary and Transcription

Noam, el creador de Remalt, explica cómo este framework remoto de código abierto puede simplificar el proceso de escribir un backend de Node.js para una aplicación React. Demuestra cómo usar Remalt para el desarrollo fullstack agregando capacidades de tarjetas a una aplicación de lista de tareas de frontend. Muestra cómo Remalt puede manejar la clasificación, filtrado y actualizaciones en tiempo real en el lado del servidor. Noam también discute la importancia de la validación de datos y el control de acceso, y cómo Remalt puede proporcionar un enfoque unificado para estas preocupaciones. Invita a los espectadores a visitar el sitio web de Grimmult para obtener tutoriales y ejemplos.

Available in English: Meet Your New BFF: Backend to Frontend without the Duct Tape

1. Introducción a Remalt

Short description:

Hola, soy Noam, un desarrollador full stack y el creador del marco de trabajo remoto de código abierto. Es tedioso y consume mucho tiempo escribir un backend de Node.js para una aplicación React intensiva en multitudes. Permíteme mostrarte cómo con Remalt podemos solucionar eso.

... 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.

2. Using Remalt for Full Stack Development

Short description:

Aquí tenemos una aplicación de lista de tareas en el front-end escrita usando React y Next.js. Nuestra aplicación utiliza el tipo de tarea para definir la tarea. Hemos pedido a Remalt que agregue capacidades de tarjeta de pila completa basadas en esta tarea. Vamos a utilizar eso en nuestro código de front-end. 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 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. Ahora, actualmente, los usuarios múltiples no ven los cambios realizados por otros usuarios. Vamos a solucionar eso usando Grimal. Otra preocupación importante es la validación de datos. Actualmente, el usuario puede agregar tareas vacías y queremos evitar eso.

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

3. Validating Tasks and Access Control

Short description:

Vamos a configurar la validación para nuestras tareas para garantizar una única fuente de verdad. Al implementar la lógica de validación en la longitud del título de la tarea, podemos proporcionar validación en el front-end sin realizar llamadas de red. Este código de validación también se utiliza para validar las solicitudes de la API, asegurando una validación consistente entre el front-end y el back-end. Además, el control de acceso permite que solo los usuarios autenticados y los administradores accedan e inserten tareas. Grimmult permite un enfoque unificado para la escritura de extremo a extremo, la validación y el control de acceso, compatible con pilas y bases de datos populares. Visita Grimmult.dev para tutoriales, guías, proyectos de ejemplo en GitHub o únete al canal de Discord de Grimmult.

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.