How to organize the architecture of a javascript form generator using a template engine and BEM methodology?

Question

JavaScript

Good afternoon!
The essence of the task is as follows: It is
necessary to organize a form generator based on a json file with a description of controls, of the form:

"order": ["input1", "input2", "cb3"],
  "input1": {
    "type": "input",
    "title": "Первый инпут",
    "path": "root.input",
    "visible": true,
    "editable": true
  },
  "input2": {...}

The types of controls available for processing should be easily extensible. The data in the controls must be retrieved from the data source (they are available via path strings in the path property described in the controls). The data source must be placed in a separate module and must provide public methods for extracting data from it along the paths.
Working with the DOM should be done through the jQuery library or (preferably) i-bem. It is necessary to describe the controls and components of the page in the BEM ideology.
Use the mustache syntax as the templating syntax.
I use jquery + mustache. I'm thinking about whether I need to use require js to organize the mvc application structure.
Can you please tell me the best way to organize the application architecture using the mustache template engine? (because I haven't come across them before, I'm just starting to learn)
How can you apply the BEM approach without using the BEM technology stack?

Answer 1

One of the simple ways:
1. We generate from the source json according to some bemjson rules with a description of the form structure and blocks with elements;
2. We use https://github.com/bem/bem-forms as a base (or write an analogue) to create a basic library with templates and basic types of fields and controls;
3. At the project level, we expand it with our own controls (templates, styles, etc.);
4. We collect something standard, such as enb.
MVC for the front end is not a good solution, it becomes obvious when the number of successful MVC frameworks for JS is actually zero. The MV* paradigm works just fine, but without controllers.
With mustache patterns, the situation is as follows - either it will not be possible to redefine the transformations described by the patterns: i.e. you will have to copy the template from the source library and change it, as a result, problems with updates; or not to use the library approach for templates at all. Why so: because mustache is an interpolated and imperative templating engine, it technically cannot be taught to redefine. If you still need mustache, it will be enough to write a technology for enb, there are definitely examples for jade in the github, and, it seems, some others. In fact, a couple of simple functions, where it is written: take this file as a template for such and such a template engine and create a function from it to draw data.
If you think about i-bem.js, then you will have jquery anyway (because i-bem uses jquery), with require.js - it might be easier to use ymodules: not much different from require.js, it already has bem-core / bem-components and, accordingly, bem-forms are also based, and taking the standard set of a gentleman from Yandex, nothing will need to be changed from this point of view - everything is already set up.
Applying a BEM approach without using a BEM technology stack is usually painful, and one way or another, one starts writing his own BEM technology stack. Many people have gone through this (if not all) and most have stopped doing it.
In general, there is a forum where such questions are answered much faster and with examples ;-)