Config Driven UI using ReactJS

Rate this content

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.

7 min
12 Dec, 2023

AI Generated Video Summary

This lightning talk introduces the concept of config-driven UI using ReactJS, which allows for dynamic and customizable UIs without hard-coding. The technique involves using a JSON file to specify the type, size, position, and data source for each component. The talk also explains the structure of config-driven UI components, including elements, vertical and horizontal containers, and nested layouts.

1. Introduction to Config-driven UI using ReactJS

Short description:

Hello everyone, and welcome to a lightning talk on config-driven UI using ReactJS. Config-driven UI is a technique that allows you to create dynamic and customizable UIs without hard-coding them. You use a JSON file that specifies the type, size, position, and data source for each component. Now let's understand this in detail. We have a base UI layer with a wizard menu consisting of various styles. The idea is to have a single config file for all the tiles and render them on the go by reading the config. In React.js, we can implement this using React Hook and custom components. Let's start with the layout part, which uses a recursive structure to hold vertically and horizontally stacked elements.

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.

2. Config-driven UI Components

Short description:

Element is the leaf node representing a UI component. Vertical and horizontal containers stack elements either vertically or horizontally, including nested layouts. The type and config properties specify the component's type and unique identifier. The children property creates nested UIs.

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.

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
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.