Recs.
Updated
Specs
Pros
Pro Custom tags
Custom tags provide a simple mechanism for embedding more complex components into a template by extending the HTML grammar with support for new tags. For example:
<div>
<say-hello name="World"/>
</div>
Custom tags are easy to create since they just map to a JavaScript "renderer" function as shown below:
module.exports = function sayHelloRenderer(input, out) {
out.write('Hello ' + input.name + '!');
}
Custom tags support nested content:
<fancy-overlay title="My Title">
This will be the body content of the overlay
</fancy-overlay>
Custom tags can also have parent/child relationships to support more complex use cases such a "tabs" component with nested "tab" components:
<fancy-tabs>
<fancy-tabs:tab label="Home">
Content for Home
</fancy-tabs:tab>
<fancy-tabs:tab label="Profile">
Content for Profile
</fancy-tabs:tab>
<fancy-tabs:tab label="Messages">
Content for Messages
</fancy-tabs:tab>
</fancy-tabs>
Pro Small compiled templates
Marko's compiled templates are usually very small, as proven by benchmarks.
Pro Lots of tests
To prevent regressions, Marko includes a full suite of tests. The testing harness renders a collection of templates and does an exact string comparison to make sure that the tests rendered exactly as expected. There are also API tests, and negative tests to make sure that errors are reported in a friendly way.
To run tests:
git clone https://github.com/marko-js/marko
cd marko
npm install
npm test
Pro Server and client logic can easily be expressed within the same template
Cons
Con Very opinionated and not customizable enough
Some custom use cases are not possible. For example, trying to build an AMP page using Marko can be very challenging (special style tag requirements are hard to work with, also, Marko by default inserts a script tag into the rendered output html which is invalid in AMP and needs to be manually removed, etc..)
Recommendations
Comments
Flagged Pros + Cons
Pro Latest version of Marko offers a new concise syntax which can also be used with the original HTML syntax
Marko is a templating engine that supports a very clean HTML syntax with the option to use a concise syntax that can even be mixed with each other. The Marko v3 syntax is shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Marko Templating Engine</title>
</head>
<body>
<!-- Welcome to Marko! -->
<h1>
Hello ${data.name}!
</h1>
<ul if(notEmpty(data.colors))>
<li for(color in data.colors)>
${color}
</li>
</ul>
<div else>
No colors!
</div>
</body>
</html>
The following template is the same as the one above but written with the new "concise" syntax:
<!DOCTYPE html>
html lang="en"
head
title - Marko Templating Engine
body
// Welcome to Marko!
h1 - Hello ${data.name}!
ul if(notEmpty(data.colors))
li for(color in data.colors)
${color}
div else
- No colors!
Con Not very popular
Marko doesn't seem to be very popular yet. With only ~ 400 stars on GitHub. This may be a problem for beginners because there are not many learning resources outside the official documentation.
Con Not very popular
Marko is not a very popular templating engine. As such, it may be hard to find support for it in the form of plugins for text editors, guides or libraries to integrate it with different frameworks.
Con HTML syntax does not separate logic from markup
In <tag if(something)>
, if(something)
has not been separated and looks like an invalid attribute. Handlebars ({{ }}
) and EJS (<% %>
) do not have this issue.