I'm more or less learning the MEAN stack (have yet to start on Angular, so currently using straight vanilla JS for front-end) and part of what I'm building for my portfolio is a drag-and-drop form builder.
Currently the form has sections, which contain questions, which can contain multiple options as well as multiple follow up/sub questions (which can then contain their own options, but not follow ups).
EJS helps me with the original render of the stored form using nested for..of loops, however my question comes into play when adding new elements to the form.
Currently, I have vanilla front-end JS that is looking at some template tags within the page, then filling those in for new sections, questions, and options.
However it doesn't seem very DRY because I'm using essentially the same logic in EJS when initially rendering the page (albeit multiple times).
Should I write functions on the back end which are cast into the EJS render call both for the initial render and then available to the front-end JS, or cast the EJS variable containing the form (from MongoDB) into the front-end JS directly and use functions in there to both draw the page initially, as well as add new elements? Both of these, hopefully, would make use of template tags in the HTML. Is one faster and/or safer than the other?
Another option could also be to use EJS partials for sections, questions, and options to render the page, but I wouldn't know how to incorporate that into the front-end JS to add new elements without using templates, which is essentially what I'm doing now.
