UI Configurada por Archivo de Configuración usando ReactJS

Rate this content
Bookmark
Slides

En Microsoft estamos repensando la forma en que utilizamos ReactJS como desarrolladores frontend, los patrones de diseño de UI tradicionales de React resultan en código redundante, lo que hace que el mantenimiento del código sea engorroso. Al hacer que la UI sea configurada por archivo, potenciamos los componentes de React al hacer que el archivo de configuración sea la única fuente de verdad. El enfoque anterior facilitó la incorporación rápida de nuevos escenarios de UI y con una regresión mínima en los antiguos flujos de UI, lo que resultó en una reducción significativa en los esfuerzos de desarrollo, la mejor parte es que todo el código se mantuvo solo en Typescript, no se utilizaron XML u otros lenguajes declarativos.

7 min
12 Dec, 2023

AI Generated Video Summary

Esta charla relámpago introduce el concepto de UI configurada por archivo usando ReactJS, que permite UIs dinámicas y personalizables sin codificación rígida. La técnica implica el uso de un archivo JSON para especificar el tipo, tamaño, posición y fuente de datos para cada componente. La charla también explica la estructura de los componentes de UI configurados por archivo, incluyendo elementos, contenedores verticales y horizontales, y diseños anidados.

1. Introducción a la UI impulsada por configuración usando ReactJS

Short description:

Hola a todos, y bienvenidos a una charla relámpago sobre la UI impulsada por configuración usando ReactJS. La UI impulsada por configuración es una técnica que te permite crear UIs dinámicas y personalizables sin codificarlas de manera rígida. Utilizas un archivo JSON que especifica el tipo, tamaño, posición y fuente de datos para cada componente. Ahora vamos a entender esto en detalle. Tenemos una capa de UI base con un menú de asistente que consta de varios estilos. La idea es tener un solo archivo de configuración para todos los mosaicos y renderizarlos sobre la marcha leyendo la configuración. En React.js, podemos implementar esto usando React Hook y componentes personalizados. Comencemos con la parte del diseño, que utiliza una estructura recursiva para contener elementos apilados vertical y horizontalmente.

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.

2. Componentes de UI Impulsados por Configuración

Short description:

Element es el nodo hoja que representa un componente de UI. Los contenedores verticales y horizontales apilan elementos ya sea vertical u horizontalmente, incluyendo diseños anidados. Las propiedades type y config especifican el tipo de componente y el identificador único. La propiedad children crea UIs anidadas.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony.
So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks.
It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript.
Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.

Workshops on related topic

DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.