Config Driven UI using ReactJS

Hello everyone, and welcome to a lightning talk on config-driven UI using ReactJS. In this video, I'll explain what config-driven UI means and how we can do it in ReactJS. But first, a brief intro about me. Hey guys, I'm Joban and I've been working at Microsoft for the past two years and you guys can reach out to me on the below handles. And so, without further ado, let's get started.

So what is config-driven, right? What it means. Config-driven UI is a technique that allows you to create user interfaces based on a configuration such as JSON or a TypeScript file that defines the layout and content of the UI components. This can be useful for creating dynamic and customizable UIs without hard-coding them. For example, let's say you want to create a dashboard that shows different types of data visualizations and summaries. Instead of writing JSX code for each component and arranging them in a fixed layout, you use a JSON file that specifies the type, size, position, and data source for each component. And then, you can create a custom component that reads that JSON file and renders the UI accordingly. So this way, you can easily change the UI by modifying the JSON file without even touching the other code. You can also reuse the same component from different pages or for different scenarios by providing different JSON files.

Moving on. Now let's understand this a bit in detail. So here we can see a base UI layer on top of which there is a wizard menu which consists of various styles, number one, number two, number three, etc. And each style has a bunch of components a, b, c, etc. The V and the H on the left side, you can see, represents whether the layout setting of each component is whether it's a horizontal or a vertical component, right? We'll come to that what it means. Now for the tile two we can have a very similar UI as tile number one with slight change in the component layout. You can see here, sorry. Similarly for tile number three also has minor differences in the UI. Now the idea here is to not create separate files for each style as the UI differences are very minor, right? But to have a single config file for all the tiles and we render the tiles on the go by reading the config, right?

So how can we do this in React.js? Well, there are many ways to implement, to be honest, this config-driven UI paradigm. But in this talk I'll show you one of the possible approaches using React Hook and custom components. The basic idea is to have two parts. One to define the layout, which uses a recursive structure to hold vertically and horizontally stacked elements. And another to map leaf nodes to the actual content that needs to be displayed. The actual implementation of a smallest unit of component, right? For example, a dropdown. It can be a form, it can be a chart, right? Let's start with the layout part. On the screen you can see the layout part consists of three types of components. First is element and then vertical and horizontal.

Element is the leaf node that represents a single UI component, such as a dropdown, a chart, and a form, as I already said. Vertical and horizontal are containers on top of those elements, which allows us to stack elements either vertically or horizontally. It provides us that information. These containers can also be nested inside each other to create complex layouts. The type property specifies the type of the component. The config property contains an id property as well, which uniquely identifies the component. The other properties that help you to draw the component. The children property is an array of child nodes that follow the same format to create nested UIs.