How to imitate template inheritance with javascript template strings
minimalist and functional templates
Template strings are a relatively recent javascript feature that allow for a great deal of flexibility in presenting text. I prefer using template strings directly instead of complex libraries like react, vue, or angular.
When combined with lambda functions, this allows for a very concise and powerful way to write javascript templates.
// lambda template string function
card = (title, subtitle, body)=>{
return `
<div class="card">
<h1> ${title} </h1>
${subtitle? `<h3>${subtitle}</h3>` : ""}
<p> ${body} </p>
</div>
<style>
.card{
display:inline-block;
width: 300px;
height: 300px;
background: white;
border: 2px solid black;
}
.card h1{
margin: 0;
background: #000; color: #fff;
}
.card h3{
margin: 0;
background: #aaa; color: #000;
}
</style>
`
I really like jinja2 templates from python, especially template inheritance. To do similar with javascript template strings, you can simply wrap one template function in another or use one as callbacks in another template.