Improved template system

[pausan]

The problem

We are currently looking to replace a email marketing platform. One of the key features we use in the current one, that plunk is missing, is a strong templating system. We sometimes have customer attributes that drive some logic inside the campaign we are sending so the email being sent will have some customization.

I can give 2 concrete examples:

• Multilanguage support. We have a custom field to let us know the language of the customer, then in the email we embed logic so that if language == 'en' => sentence in english, if language == "es", then spanish text, etc...
• Pricing customization: maybe we want to give different offers to different customers and we want to do so based not in an attribute that the customer itself has, but in a derivative.
• Promo customization: maybe we want to show monthly offer to certain type of users whereas we want to have another to a different segment

For some of these things it is true we could just segment usrers in dynamic lists and send different emails, but when you mix promo customization along with multilanguage for example, it makes things harder and combinatorics explode. Is easier to just keep it in a single campaign and measure results.

What other marketing platforms do

Other marketing platforms have support for this. For example:

• Keila: uses mjml -> https://www.keila.io/email-editors/
• Listmonk: go templates / sprig -> https://listmonk.app/docs/templating/
• Brevo: has its own language (resembles asp I would say)
  • general features variables, conditionals, for loops, filters, ...
  • [conditionals](https://help.brevo.com/hc/en-us/articles/360001030599--Manual-Show-or-hide-content-in-your-emails-using-if-statements
  • loops
• ....

Expected solution

For starters, I would expect plunk to have support for some sort of language conditionals/loops/filters/... in some way. Currently having variables is great but not enough for us.

Given that plunk is already using {{variable}} I would just suggest using a templating language that is compatible with those. Given that your project is typescript/js I would suggest:

• https://handlebarsjs.com/ <-- well known, basic functionality, can be pre-compiled for faster execution (sendgrid/mailgun/...)
• https://liquidjs.com/index.html <-- apparently well supported on well-known platforms, according to Claude used on netlify/shopify/zendesk/...
• jinja-like family. I haven't explored.

I don't have experience to compare and in the end there are different tradeoffs. Since you need to evaluate the logic for each email address to be sent, it looks like it would be CPU intensive if sending hundreds of thousands of emails. Not a clue on whether CPU performance will suffer, maybe network is the bottleneck. Anyway handlebars seems like a strong contender since it can be compiled and probably the performance would be 10x or 100x that of liquidjs (it looks like liquidjs does not support this) whereas liquidjs seems more expressive. Haven't made any test to make this claim and not too familiar with both anyway, but if one is compiled and just interprets data whereas the other needs to re-parse the email every time, rendering is going to take more time (or so I guess).

Liquidjs seems more expressive than handlebars. Both are backwards compatible with current variables. There are probably other options, these are just the ones I would think on first.

[pausan]

After playing a little bit with handlebars / liquidjs. I think liquidjs is more expressive. Probably worth exploring other options as well.

[pausan]

Had more time, so I did a couple of local tests to assess performance and it is pretty decent. 1M renderings in 6 seconds.

const { readFileSync } = require('node:fs');
const { performance } = require('node:perf_hooks');
const { Liquid } = require('liquidjs');

const iterations = 1_000_000;
const engine = new Liquid();
const template = readFileSync('template.html', 'utf8');

const compileStartedAt = performance.now();
const compiledTemplate = engine.parse(template);   // parsing!
const compileMs = performance.now() - compileStartedAt;

let renderedCharacters = 0;
const renderStartedAt = performance.now();

for (let i = 0; i < iterations; i += 1) {
  const html = engine.renderSync(compiledTemplate, {
    i,
    recipient: { name: `My Name ${i}` },
  });
  renderedCharacters += html.length;
}

const renderMs = performance.now() - renderStartedAt;
const rendersPerSecond = (iterations / renderMs) * 1_000;

console.log(`Compiled in ${compileMs.toFixed(2)} ms`);
console.log(`Rendered ${iterations.toLocaleString()} emails in ${renderMs.toFixed(2)} ms`);
console.log(`Performance: ${rendersPerSecond.toLocaleString(undefined, { maximumFractionDigits: 0 })} renders/second`);
console.log(`Generated ${renderedCharacters.toLocaleString()} characters`);

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Render benchmark</title>
  </head>
  <body style="margin: 0; font-family: Arial, sans-serif;">
    <main style="max-width: 600px; margin: 0 auto; padding: 32px;">
      <h1>Rendering test</h1>
      <p>Hello {{ recipient.name }},</p>
      <p>This is render number <strong>{{ i }}</strong>.</p>
      {% assign remainder = i | modulo: 2 %}
      {% if remainder == 0 %}
      <p style="color: #166534;">{{ i }} is even.</p>
      {% else %}
      <p style="color: #9f1239;">{{ i }} is odd.</p>
      {% endif %}
    </main>
  </body>
</html>

$ node performance.js
Compiled in 1.89 ms
Rendered 1,000,000 emails in 6083.71 ms
Performance: 164,373 renders/second
Generated 544,166,670 characters