At one point, every software developer needs to build a form, whether it be a login page, user registration or for creating a new resource. And if you are a software developer, you got to admit that developing a form is a repetitive, tedious process that takes time. So, being able to render a form dynamically by using a JSON or XML config will not only save some precious time, but also will create a robust, centralized codebase for generating forms.
Thanks to modern front-end web technologies like React, Angular, VueJS, it is now easy to implement the logic to render forms dynamically. However, when it comes to complex enterprise applications that use these frameworks together, a dynamic form renderer must be implemented for each front-end framework.
0. Dividing & Conquering
In order to tackle this problem, let’s apply the good old divide-and-conquer method. We’re going to divide the task into two parts: 1) Building a dynamic form renderer component 2) Using that component in any JavaScript framework.
Building a dynamic form renderer
Our main objective is to create a generic component that renders forms dynamically. We’ll implement it in ReactJS, and use some of the components from Ant Design.
