Backend-driven dynamic forms in React/React-native: Part 1

Forms are a critical aspect of user interaction on both web and app platforms. They serve as essential tools for collecting necessary information from users, ranging from simple text inputs to complex selections and date pickers. Form management encompasses various elements, including field types, UI configurations, and validations. Popular form management libraries such as react-hook-form and formik, along with validation libraries like zod and yup, provide developers with a multitude of options to handle these complexities effectively.

The Frontend Dilemma

Traditionally, frontend development has been the primary focus for form creation and maintenance. All field configurations and validations were developed and managed within the frontend codebase. While this approach is suitable for applications with a few static forms, it becomes cumbersome when dealing with a large number of constantly evolving forms, as seen in survey applications or platforms requiring dynamic user data collection.

The Need for Backend-Driven Forms

The demand for backend-driven forms arises when there is a necessity for a high volume of forms that require constant development and maintenance. For instance, consider a scenario where a platform needs to onboard multiple banks and create application forms for various financial products like credit cards and loans. Building and maintaining these forms solely on the frontend would be impractical and time-consuming.

The Advantages of Backend-Driven Dynamic Forms

While backend-driven forms may incur a higher initial setup cost, the long-term benefits outweigh this investment. Once the system is built, creating and modifying forms becomes a swift process with zero deployment required. Furthermore, a well-implemented backend-driven form system minimizes the need for developer intervention after the initial setup.

Choosing the Right Technologies

When implementing a backend-driven dynamic form solution, choosing the appropriate technologies is crucial. In our use case, we opted for the following:

1. React-Hook-Forms for Form Management: Among the available form management libraries, we chose react-hook-forms due to its lightweight nature and support for uncontrolled forms. This library streamlines form handling and makes it easier to integrate with backend-driven systems.
2. AGV for Validations: For managing validations, we selected AGV, a library used to evaluate JSON schemas. JSON schemas provide a JSON serializable representation of validation rules, making them suitable for backend-driven systems. Moreover, AGV allows us to utilize the same validation schema in other programming languages, such as Java or Python, offering increased flexibility.
3. JSON Schema over Yup and Zod: While yup and zod are popular validation libraries, we opted for JSON Schema due to its specification-based approach. JSON Schema's ability to serialize validation rules into JSON format aligns seamlessly with backend-driven systems, making it an ideal choice for our use case.

Conclusion

Implementing backend-driven dynamic forms can significantly enhance form management capabilities for applications requiring a large number of constantly evolving forms. By leveraging technologies like react-hook-forms for efficient form management and AGV with JSON Schema for robust validations, developers can streamline the process of creating, modifying, and maintaining forms. The initial setup cost is offset by the long-term benefits of a rapid and flexible form management system that reduces developer intervention and ensures a seamless user experience. Whether it's onboarding banks or creating surveys, backend-driven dynamic forms prove to be a valuable asset for modern web and app platforms.

Stay tuned for Part 2, where we’ll delve into the implementation details. Keep an eye on this space!