Log in
React Conferences
React Day Berlin 2023React Day Berlin 2023
Talk Videos
EN

Video: Config Driven UI using ReactJS

Joban Singh
Joban Singh
Software engineer at Microsoft Azure
Rate this content
Bookmark
Slides
Read FAQ and transcription
config driven ui reactreact configarchitecture
Video Summary and Transcription
The video introduces the concept of config driven UI, highlighting its ability to create dynamic interfaces using JSON configuration files instead of hard-coding. This method allows developers to specify the type, size, and position of UI components, making it easier to customize and reuse elements across different scenarios, known as config driven development. In ReactJS, this is implemented using React Hooks and custom components, with the LayoutRenderer playing a crucial role by parsing and rendering the UI based on the configuration file. The video also explains how vertical and horizontal containers stack elements, enabling complex layouts in config driven UI React applications. The approach's flexibility is emphasized, as developers can modify the UI by simply altering the configuration file, without changing the source code. This technique is beneficial for creating scalable and customizable UIs, offering significant advantages in terms of reusability and ease of updates.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

Available in Español: UI Configurada por Archivo de Configuración usando ReactJS

FAQ

The LayoutRenderer component in ReactJS is used to render the UI layout based on a JSON configuration file. It parses the JSON config using React hooks and recursively calls itself to render each child component, whether it is a vertical or horizontal element.

Viewers can reach out to the speaker, Joban, on LinkedIn, Twitter, or the Discord server for more details. The speaker encourages viewers to ping him anytime with questions.

Config-driven UI can be implemented in ReactJS using various approaches. One possible approach involves using React Hooks and custom components. The idea is to define the layout using a recursive structure for vertical and horizontal stacked elements and map leaf nodes to the actual content to be displayed.

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 approach is useful for creating dynamic and customizable UIs without hard-coding them.

The 'config' property in a config-driven UI setup contains an 'id' property that uniquely identifies the component, along with other properties that help in drawing the component.

Yes, the same config-driven layout can be used for different scenarios by providing different JSON configuration files. This allows for easy customization and reusability of UI components across various use cases.

The 'type' property specifies the type of the component in a config-driven UI. For example, it can indicate whether the component is a dropdown, chart, form, etc.

Config-driven UI benefits developers by allowing them to easily change the UI by modifying a configuration file, such as JSON, without touching the other code. It also enables reuse of the same components across different pages or scenarios by providing different configuration files.

In ReactJS, the layout is rendered in a config-driven UI by creating a custom component called LayoutRenderer. This component takes the JSON configuration file as a prop, uses React hooks to parse it, and recursively renders the layout based on the configuration.

The layout part of config-driven UI consists of three types of components: Element, Vertical, and Horizontal. 'Element' represents a single UI component like a dropdown or chart. 'Vertical' and 'Horizontal' are containers that allow stacking elements vertically or horizontally, and they can be nested to create complex layouts.

Video transcription and chapters available for users with access.
Available in other languages:

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

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Adrien Baron
Adrien Baron
Maker of clashofstats.com, Vue GWT and Tiny Frontend
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
remixjavascriptmicro-frontendsarchitecture
Understanding React’s Fiber Architecture
React Advanced 2022React Advanced 2022
29 min
Understanding React’s Fiber Architecture
Top Content
Tejas Kumar
Tejas Kumar
Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
react 18reactconcurrent renderingarchitecturereact fiberreact reconciliationbeginner friendly
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Kent C. Dodds
Kent C. Dodds
Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
remixjavascriptarchitecturefullstack
The Eternal Sunshine of the Zero Build Pipeline
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
m4dz
m4dz
DX Engineer at alwaysdata
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!
build toolsarchitectureprogramming conceptsvite
Config Driven UI using ReactJS
React Summit 2023React Summit 2023
7 min
Config Driven UI using ReactJS
Top Content
Watch video: Config Driven UI using ReactJS
Joban Singh
Joban Singh
Software engineer at Microsoft Azure
This lightning talk introduces config-driven UI in ReactJS, a technique for creating dynamic and customizable UIs without hard coding. It covers the implementation of different types of components and how they can be nested to create complex layouts.
config driven ui reactreact config
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
Thomas Findlay
Thomas Findlay
Findlay Web Tech
Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.
component libraryreact componentsarchitecturereact compositionreact fiberprogramming concepts

Workshops on related topic

AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
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.
artificial intelligenceserverlessarchitecture
High-performance Next.js
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Michele Riva
Michele Riva
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.
next.jsperformancearchitecturebest practices