Disclaimer: I’m not suggesting that X is superior to Y; both are excellent tools. I’m just sharing the story of how I went choosing and adopting a templating engine.
Framework Frontend vs Templating
For the long time, since front-end frameworks (React.js, Vue, angular, etc) become the standard, we often forgetten that 80% workload is simply rendering views. We’ve reached a point where the syntax of a framework heavily influences how we perceive the UI itself, rather than focusing on the simplicity of the data being displayed.
Framework reactivity is excellent for creating highly interactive Web Applications. However, for sites primarily designed to display content information like blogs, news, dashboard, simple CRUD, the overhead of heavy JavaScript framework is often unnecessary just to render the UI.
Usually MVC Framework use templating to generate view with data as parameters. They don’t require reactivity or complex state management, which is out-of-scope of templates. Templates aren’t limited to Website (or HTML) template, but also effective for email, notification, information/error, and even CLI responses.
Templating engine is a tool to transform template placeholder (and sometime with conditional, loop and function) with input parameter.
EJS is great, but…
EJS (Embedded JavaScript templating) is the go-to library for developers Javascript. It’s a simple engine and low-level of template engine. Moreover, it support javascript syntax inside the template. It is the most extensive Javascript library templating engine.
But, while I use it, I found some problem as beginner ejs, the documentation super simple and doesn’t have other example or other frequently used snippet, I need to experimenting with combination template script and configuration. In summary, my opinion beside simple configruation, and extensive templating engine, it have high learning-curve.
Ejs also strict to undefined variable, it will throw error. I found solution, use <%= locals.[variable] %> instead just <%= [variable] %>. But, Ejs also will thrown error if nested variable is not defined or not found, like <%= a.b.c %>. Ejs is simple, but require a lot of attention and longer syntax for validating which is break development workflow.
Mustache: Logic-less Template
On the other hand, Mustache come with logic-less template and safe to non-defined variable. For example {{ #foo }} show {{ /foo }} could be variable, object, array, or boolean.
I think it’s weird at first. Instead of using for, if, map statements, the engine defines and figures it out how template generated. However, I’ve come to think this is great because templates become a placeholder instead another logic script, which is mcuh easier for for non-technical people to understand.
You can also use template engine to generate HTML template, email template, notification template, or error/info message template. Both template engine are great but I prefer Mustache because it is logic-less and has a Formal Spec meaning the same templates can be reusaed across different programming languages. So you can use the same template in other projects.
Add a comment