Interfaz de usuario impulsada por configuración utilizando ReactJS

Hola a todos, y bienvenidos a una charla relámpago sobre la UI impulsada por configuración utilizando ReactJS. En este video, explicaré qué significa la UI impulsada por configuración y cómo podemos hacerlo en ReactJS.

Pero primero, una breve introducción sobre mí. Así que hola, chicos, soy Joban. Y he estado trabajando en Microsoft durante los últimos dos años. Y ustedes pueden contactarme en las siguientes direcciones. Y sin más preámbulos, comencemos.

Entonces, ¿qué es la configuración impulsada, verdad? Lo que significa. La UI impulsada por configuración es una técnica que te permite crear interfaces de usuario basadas en un archivo de configuración, como JSON, o un archivo de TypeScript que define el diseño y el contenido de los componentes de la UI. Esto puede ser útil para crear interfaces de usuario dinámicas y personalizables sin codificación dura.

Por ejemplo, digamos que quieres crear un tablero que muestre diferentes tipos de visualizaciones y resúmenes de datos. En lugar de escribir código GSX para cada componente y organizarlos en un diseño fijo, puedes utilizar un archivo JSON que especifica el tipo, tamaño, posición y fuente de datos para cada componente. Y luego puedes crear un componente personalizado que lea ese archivo JSON y renderice la UI de acuerdo a ello. De esta manera, puedes cambiar fácilmente la UI modificando el archivo JSON sin siquiera tocar el otro código. También puedes reutilizar el mismo componente desde diferentes páginas y para diferentes escenarios proporcionando diferentes archivos JSON.

Siguiendo, ahora entendamos esto un poco más en detalle. Aquí podemos ver una capa de UI base sobre la cual hay una especie de menú de asistente que consta de varios mosaicos número 1, número 2, número 3, etc. Y cada mosaico tiene un montón de componentes A, B, C, etc. La V y la H que puedes ver en el lado izquierdo, representa si la configuración del diseño de cada componente es horizontal o vertical. Volveremos a eso más adelante.

Ahora, para el mosaico 2 podemos tener una UI muy similar al mosaico 1 con un ligero cambio en el diseño del componente. Puedes verlo aquí. De manera similar, el mosaico número 3 también tiene pequeñas diferencias en la UI. La idea aquí es no crear archivos separados para cada mosaico ya que las diferencias de la UI son muy pequeñas, sino tener un solo archivo de configuración para todos los mosaicos y renderizar los mosaicos sobre la marcha leyendo la configuración. Entonces, ¿cómo podemos hacer esto en ReactJS? Hay muchas formas de implementar, para ser honesto, este paradigma de la UI impulsada por configuración. Pero en esta charla, te mostraré uno de los posibles enfoques utilizando react-hook y componentes personalizados. La idea básica es tener dos partes. Una para definir el diseño que utiliza una estructura recursiva para contener elementos apilados vertical y horizontalmente y otra para mapear los nodos hoja al contenido real que necesita ser mostrado. En esta charla, cubriremos la implementación real de la unidad más pequeña de un componente, por ejemplo, un desplegable, puede ser un formulario, puede ser un gráfico.

Comencemos con la parte del diseño. En la pantalla, puedes ver que la parte del diseño consta de tres tipos de componentes. El primero es el elemento, y luego el vertical y el horizontal. El elemento es el nodo hoja que representa un solo componente de UI como un gráfico desplegable y el formulario como ya dije. Vertical y horizontal son contenedores sobre esos elementos, que nos permiten apilar elementos ya sea vertical u horizontalmente. Nos proporciona esa información. Estos contenedores también pueden anidarse entre sí para crear diseños complejos. La propiedad tipo especifica el tipo de componente. La propiedad de configuración contiene también una propiedad ID, que identifica de manera única al componente. Las otras propiedades que te ayudan a dibujar el componente. La propiedad hijos es un array de nodos hijos que siguen el mismo formato para crear UIs anidadas. Sigamos. Ahora aquí hay un ejemplo donde tenemos un archivo JSON que define un diseño simple con dos elementos apilados horizontalmente. Puedes ver en la pantalla, e1 y e2 son dos elementos apilados horizontalmente. La propiedad de ancho aquí especifica cuántas columnas tomará cada elemento. Y en el lado izquierdo, puedes ver el tipo de muestra de código, cómo podemos escribir un código para dos elementos apilados horizontalmente. Ahora, sigamos. Ahora que hemos definido la parte del diseño, necesitamos renderizarla usando react-component. Para hacer esto, creamos un componente personalizado llamado layout-renderer que toma el archivo JSON como una prop y utiliza los hooks de React para analizarlo y renderizarlo de forma recursiva. Aquí puedes ver en el código para el componente layout-renderer donde cuando el primer componente se renderiza, estamos analizando la configuración JSON en el hook use effect y luego estamos usando una declaración switch para identificar si es un elemento vertical u horizontal y luego llamando recursivamente a la misma función layout-renderer para cada hijo. De esa manera renderizaremos toda la UI solo llamando a la función única. De esta manera, podemos implementar el paradigma de la UI impulsada por configuración. Esto es solo rascar la superficie del problema y debido a la limitación de tiempo, yo más profundo. Pero no dudes en contactarme para cualquier detalle adicional. Y con eso, terminaré mi charla. Muchas gracias a todos por escuchar, espero haber podido justificar su tiempo. Que tengan un gran día y por favor revisen mis perfiles, mi LinkedIn, mi Twitter, ustedes pueden enviarme un mensaje en cualquier momento, estaré disponible para responder a sus preguntas. También estaré disponible en el servidor de Discord. Así que gracias de nuevo y que tengan un gran día por delante.