I'm interested in finding user-friendly tools in JavaScript to easily create small, reusable components. I envision a component builder with a simple API that can generate HTML output for specified data, allowing for seamless embedding on websites. Consider the following example:
var data = smth; // some data, possibly JSON ...
var builder = new Builder();
$(container).html( builder.build('user_details_template').with(data) );
This could produce something like:
<div>
<h1>User details</h1>
<span class="username">Aaron Rodgers</span>
<span class="description">Best QB in the entire world</span>
</div>
Please excuse the subjective example.
Would anyone happen to know of a clean and efficient way to develop such a tool in JavaScript? In Java, I would typically utilize a template engine capable of rendering HTML output for any given data.
As someone who is not an expert in JavaScript, my current methods involve string concatenation and regular expressions. What are the recommended best practices for accomplishing this task in JavaScript?