pug (Jade) vs Marko
When comparing pug (Jade) vs Marko, the Slant community recommends pug (Jade) for most people. In the question“What are the best JavaScript templating engines?” pug (Jade) is ranked 1st while Marko is ranked 10th. The most important reason people chose pug (Jade) is:
Jade supports mixins. These not only make your templating job easier but are also super-easy to read.
Specs
Ranked in these QuestionsQuestion Ranking
Pros
Pro Easy to read, powerful mixins
Jade supports mixins. These not only make your templating job easier but are also super-easy to read.
Pro Logic done in JavaScript
The logic in Jade is done with native JavaScript. This means there's less of a learning curve and it'll be easier to get other developers up to speed.
Pro Clean syntax
One of the distinguishing features of Jade is its clean syntax. Elements are created with CSS selector syntax which makes the template consistent with your style sheet and JavaScript element selector library.
Pro Identation reflects nesting
With Jade you can quickly overview the hierarchy of a template.
Pro High performance on the server and client side
Apart from their functionality all template engines need to be efficient in terms of the time they require to render a page. Jade beats most of its competitors in this area, it is highly optimized to deliver good performance on both the server and client ends.
Pro Easy sublayouts using block and extends
By using the extends and block keywords, sublayouts can be made with intuitive syntax.
Pro Preprocessor support
Filters make it easy to embed compiled languages such as coffeescript or markdown directly into the template. A filter will allow you to keep your inline code and content consistent with the rest of your codebase so you can continue using your prefered language with your outputted HTML.
Pro Allows writing inline JavaScript
Jade allows embedding regular JavaScript code directly within the template.
Pro Reuse code in other languages
In addition to JavaScript, you can reuse Jade templates in Scala, PHP, Ruby, Python and Java.
Pro Interactive documentation
There's an interactive documentation available here that allows you to play around with code examples and watch the results in real time.
Pro Compiles to JavaScript
Jade compiles to a JavaScript function that produces the ultimate output. This interim format makes it useful for embedding in conditions where you're trying to save space or decrease processing requirements.
Pro Use Markdown for readable markup
Jade is awesome at templating structural markup, but that's not all Jade is awesome at. It also allows you to use markdown within your template itself which will render to a beautiful HTML page.
Pro Extremely fast
Marko consistently outperforms other alternatives in code benchmarks, both on rendering speed and compilation time.
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 Streaming
Streaming allows progressive HTML rendering and reduces time to first byte.
Pro Server-side rendering
Marko supports both server-side and client-side rendering.
Pro Marko Widgets
Marko Widgets allows UI components (rendering + behavior) to be built using Marko.
Pro Compiled templates are readable CommonJS modules
Avoids ugly globals and "named" templates.
var template = require('./template.marko');
var html = template.renderSync({name: 'Frank'});
Pro Asynchronous rendering
Marko makes additional asynchronous calls after the view rendering has begun.
Pro Lightweight runtime (~4 KB gzip)
Pro Easy to integrate with express.js
Easy Integration with Express and Node
Pro Documentation is well maintained and helpful
The documentation is extensive and very helpful. It also contains several sample applications which are very useful.
Pro Allows JavaScript expressions
JavaScript expressions can be executed inside the templates.
Pro Simple and readable syntax
Marko has a HTML-like syntax which should be easy to read and understand for everyone who has even minimal experience in web development.
Pro Short learning curve
It is easy to get up to speed and understand what is going on in a very short period of time.
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 Friendly compile-time error messages
Error messages come in an easy to read and friendly format, with valid stack traces and file formats of the file(s) which brought the error(s).
Pro Concise and Mixed syntax
The Concise syntax type lets you write Marko with a Jade-like indentation based syntax, and the Mixed mode lets you combine in regular HTML-style syntax.
Pro Server and client logic can easily be expressed within the same template
Pro Has a very active and interactive community
Marko's development community is rather small compared to other frameworks but community is well mannered and active. You can chat with the core development team using gitter.im
Cons
Con Cannot copy/paste examples from the internet
Examples from CSS frameworks like Bootstrap are never utilizing the Pug syntax, which means that you cannot ever copy/paste something to quickly see how it would look or if it works. You would have to convert the HTML to Pug first.
Con Unforgiving in case of indentation errors
The structure is entirely determined by the indentation. That means that indentation errors will ruin the end result, often without an easy way to find the error. Indentation errors are easily introduced by copy-pasting, by rearranging code and by working in a team where not everyone uses the same indentation style. (E.g tabs vs. spaces.)
Con off-side rule templating language not working well with native HTML
plain HTML pages usually can contain very deeply nested structures, whether they are hand-written by web UI designers or generated from popular web design tools or taken from existing HTML templates, which are a nightmare for front-end engineers to convert into Pug templates, where you have to take care of handling the indentation rules and the deeply nested HTML elements, even creating multiple blocks that don't have any meaning in terms of business logic, just to house the HTML elements within bearable amounts of indentations.
Pug templates are nice for Python programmers who don't want to learn HTML to start writing web pages and develop some entire websites personally from the ground up, but for any serious project that involves more than half a dozen people and has separate positions of web UI designers, front-end developers, and back-end engineers, it's much better to choose something more closely compatible with native HTML as the template engine. Pug is simply too alien from native HTML and resembles a lot more like those other off-side rule languages like Python.
Con Bad performance
Bad sintaxe (Short-hand HTML) and bad performance. No streaming or asynchronous calls. https://github.com/mauricionobrega/nodejs-template-benchmark
Con Performance is not great compared to other popular templating engines
Con If you want to get the full experience you have to use NodeJS
To use markojs's most popular feature: SSR although you can use any language based server as a backend. It is rather complicated.
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..)