使用 Node.JS、EJS 和前端 JS 构建可重用代码的最佳方式？

Question

Evidently the 'Software Engineering' exchange was the wrong place to ask this:

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).

To make my code more reusable, 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 template s, which is essentially what I'm doing now.

Answer 1

I'm going through the same ordeal right now.

From my understanding, your scenario requires using both the server side rendering (using EJS) and front end rendering using HTML templates and you want to know what's the best approach to go about it.

The short answer: cast everything on the front end and do the heavy lifting there.

I've used EJS components (includes) and they are simply not designed to be interactive. Data flow is basically one way and there is no state management that I know of.

You don't have to do this for the entire project mind you, this can be done for certain pages only where interactivity is very heavy.

Just import Vue or any other SPA framework on the said page and act as if it is a single page App. That way you don't miss out on server side benefits when you need them on other pages of the project.

Of course going into complete code split (API/SPA) would be the more traditional way but I'm sure there is a reason why you're forced to use server side rendering.

It helps that both (server/front end) use JavaScript which might not lead directly to code sharing but will surely make it easier to write the needed functions in similar ways on the back end and front end.