UI Configurada por Archivo de Configuración usando ReactJS

Hola a todos, y bienvenidos a una charla relámpago sobre la UI impulsada por configuración usando 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í. 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 una configuración como JSON o un archivo TypeScript que define el diseño y contenido de los componentes de la UI. Esto puede ser útil para crear UIs dinámicas y personalizables sin codificarlas de manera rígida. 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 JSX para cada componente y organizarlos en un diseño fijo, utilizas 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 en consecuencia. 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 o para diferentes escenarios proporcionando diferentes archivos JSON.

Sigamos. Ahora entendamos esto un poco en detalle. Aquí podemos ver una capa de UI base en la que hay un menú de asistente que consta de varios estilos, número uno, número dos, número tres, etc. Y cada estilo tiene un montón de componentes a, b, c, etc. La V y la H en el lado izquierdo, puedes ver, representa si la configuración del diseño de cada componente es si es un componente horizontal o vertical, ¿verdad? Llegaremos a eso qué significa. Ahora para el mosaico dos podemos tener una UI muy similar al mosaico número uno con un ligero cambio en el diseño del componente. Puedes ver aquí, lo siento. De manera similar para el mosaico número tres también tiene diferencias menores en la UI. Ahora la idea aquí es no crear archivos separados para cada estilo ya que las diferencias de UI son muy menores, ¿verdad? Pero tener un solo archivo de configuración para todos los mosaicos y renderizamos los mosaicos sobre la marcha leyendo la configuración, ¿verdad?

Entonces, ¿cómo podemos hacer esto en React.js? Bueno, hay muchas formas de implementar, para ser honesto, este paradigma de UI impulsada por configuración. Pero en esta charla te mostraré uno de los posibles enfoques usando 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. La implementación real de una unidad más pequeña de componente, ¿verdad? Por ejemplo, un desplegable. Puede ser un formulario, puede ser un gráfico, ¿verdad? Comencemos con la parte del diseño. En la pantalla puedes ver que la parte del diseño consta de tres tipos de componentes. Primero es el elemento y luego vertical y horizontal.

Element es el nodo hoja que representa un solo componente de UI, como un desplegable, un gráfico, y un formulario, como ya he dicho. 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 estar anidados uno dentro del otro para crear diseños complejos. La propiedad type especifica el tipo de componente. La propiedad config 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 children 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 width especifica cuántas columnas tomará cada elemento. En el lado izquierdo, puedes ver un código de muestra, cómo podemos escribir un código para dos elementos apilados horizontalmente. Ahora, sigamos, ahora que hemos definido la parte del diseño, necesitamos renderizarlo usando React Component. Para hacer esto, creamos un componente personalizado llamado LayoutRenderer, que toma el archivo JSON como una prop y usa React hooks para analizarlo y renderizarlo de manera recursiva. Aquí puedes ver en el código para el componente LayoutRenderer donde cuando el primer componente se renderiza, estamos analizando la configuración JSON en el hook useEffect, y luego estamos usando una declaración switch para identificar si es un elemento vertical u horizontal. Y luego llamando recursivamente la misma función LayoutRenderer para cada hijo. De esta manera renderizaremos toda la UI solo llamando a la función única. Y de esta manera podemos implementar el paradigma de UI impulsada por configuración. Esto es solo rascar la superficie del problema y debido a la limitación de tiempo no puedo profundizar más, 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. Pueden contactarme 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.