What is the best way to generate forms on the client side?

Question

JavaScript

Initial data

A project is being developed where the server part is separated from the client part through external APIs. The entire frontend is implemented in JS (JQuery, etc.) with a small amount of PHP. There was a dilemma how to organize the formation of forms to receive data from the user, which will then be sent in a request to the server part.

1. Sew up all forms in client-side templates, based on the API documentation
   
2. Use dynamic form generation by receiving data via API from the backend
   

The first option has the main advantage of ease of implementation and no load on the client side. This is how it was originally planned to implement this part. But after analyzing the future scope of work, there was a desire to consider the second option as more flexible and powerful for implementing all the functionality mainly on the server side, leaving only a well-developed engine for the client to interact with the server and generate content based on templates and received data via API.

Tell me what kind of bicycles JS-engines are on this topic? What is the best format to send form data to the client? If you have implemented a similar scheme, I would be grateful for any information.

Answer 1

json format is a multidimensional array.
one element — id, type (button, input, select, ..., customType(HTMLspacer,....,),......), tag properties: string (a=bc=d, etc.) .).
then automatically (with a script during formation) close the tags that are closed: textarea, option, ...
did without jQuery, but I think it will be prettier with it ...

Answer 2

In fact, the question is quite philosophical.
The first option is the most popular, and we know that according to statistics, although it is not an exact science, the most popular is the best. Implementing the first option will be easier and faster. Well, about faster here, of course, you can argue. Globally, the user does not care how the form will be generated for him, this is purely your personal preference.
The second option is quite interesting, but I doubt that I would go this way, it seems to me that this is an unjustified task in terms of the resources expended. As for the engines that can do such things, this is ExtJS and, if I'm not mistaken, Prototype.
And yet, my advice to you is to solve this problem along the path number 1, because this is a proven solution and it works 100% :)