Name: Config Driven UI using ReactJS
Uploaded: 2023-06-06T17:35:00.000Z
Duration: 7 min

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. So 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 file, 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 GSX code for each component and arranging them in a fixed layout, you can 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 and all 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 kind of a wizard menu which consists of various tiles number 1, number 2, number 3, etc. And each tile has a bunch of components A, B, C, etc. The V and the H on the left side you can see, it represents whether the layout setting of each component is whether it is a horizontal or a vertical component. We will come to that what it means.Now for the tile 2 we can have a very similar UI as tile 1 with slight change in the component layout. You can see here. Similarly for tile number 3 also has minor differences in the UI. Now the idea here is do not create separate files for each tile as the UI differences are very minor, but to have a single config file for all the tiles and we render the tiles on the go by reading the config. So how can we do this in reactjs. There are many ways to implement to be honest this config driven UI paradigm. But in this talk, I will 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. In this talk, we will cover the actual implementation of a smallest unit of component, for example, a drop-down, it can be a form, it can be a chart.

Let's start with the layout part. On the screen, you can see the layout part consists of three types of components. The first is element, and then vertical and horizontal. Element is the leaf node that represents a single UI component such as a drop-down chart and the 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.

React Summit

React Summit 2023

Config Driven UI using ReactJS

Interfaz de usuario impulsada por configuración utilizando ReactJS

Config-driven UI in ReactJS allows developers to build dynamic and customizable user interfaces using a configuration file. This technique eliminates the need for hard coding and enhances flexibility. The video discusses how to define UI components like dropdowns, forms, and charts through a configuration file, which includes elements and containers like vertical and horizontal stacks. These containers can be nested to create complex layouts. The layout-renderer component in ReactJS takes a JSON configuration file as a prop and uses React hooks to render the UI dynamically. The config-driven approach simplifies UI updates by modifying the configuration file rather than altering the code. This allows for faster iterations, easier maintenance, and reusability of components. Developers can quickly adapt the UI for different scenarios without deep changes to the underlying code. Key components include base UI layers, elements, and containers. The video also covers how changes are managed through configuration settings, enhancing scalability.

We at Microsoft are rethinking the way we use ReactJS as frontend devs, traditional React UI Design patterns results in redundant code, making code maintainability cumbersome. By making UI Config driven we supercharged React components by making config file a single source of truth, The above approach made it easier to onboard new UI scenarios quickly and with minimal regression in the old UI Flows, resulting in a significant reduction in dev efforts, the best part is all the code was kept in Typescript only no XML or other declarative languages were used.

Joban Singh

React Advanced

React Advanced Conference 2024

JSNation US

I’m attending JSNation US. Join me there for free with 10k other JS engineers and 50+ great speakers. Just follow this badge.

JSNation US 2024

React Summit US

React Summit US 2024

Productivity Conference

Productivity Conference 2024

React Day Berlin

React Day Berlin 2024

Node Congress

I’m attending @NodeCongress, the biggest conf on #JavaScript backends – by clicking the badge you may get a free remote ticket & join me there with 5k other #nodejs devs & 35 great speakers #deno #cloudflare #awscloud

Node Congress 2025

JS Nation

I’m attending JSNation – the main JavaScript conference of the year. You may join me there for free with 10k other JS engineers and 40+ great speakers. Just follow this badge. 

#javascript

JSNation 2025

I am attending the biggest #Reactjs conference remotely. You may get a limited free ticket (50% of talks, no workshops) and join me by clicking this badge.

#react #reactjs

React Summit 2025

TechLead Conference

I'm attending TechLead Conference 2024 – get your free remote ticket and join me there

TechLead Conference 2025

C3 Dev Festival

Join me at C3 Dev Fest, a contemporary software engineering festival!

Register to win an all-paid trip to Amsterdam. Elevate your career with industry experts and workshops & rock 3 dance stages at the after-party!

Video: Config Driven UI using ReactJS

Comments

Available in other languages:

Check out more articles and videos