Marko #

Marko is a fast and lightweight templating engine for Node.js, commonly used for building efficient web applications. Developed by eBay, Marko focuses on speed and ease of use. Below is a basic overview of using Marko in a Node.js application:

Installation: #

Install Marko using npm:

npm install marko

Setting Up Marko in Express: #

If you are using Express, set up Marko as the view engine:

const express = require('express');
const markoExpress = require('marko/express');
const app = express();

app.use(markoExpress()); // Enable Marko in Express

app.get('/', (req, res) => {
    res.marko('index', { title: 'Marko Example', message: 'Hello, Marko!' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Creating a Marko Template: #

Create a Marko template file (e.g., views/index.marko):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${data.title}</title>
</head>
<body>
    <h1>${data.message}</h1>
</body>
</html>

The ${data.title} and ${data.message} are Marko tags that output the values of the corresponding variables.

Passing Data to Marko Template: #

In your Express route, use res.marko to pass data to the Marko template:

app.get('/', (req, res) => {
    res.marko('index', { title: 'Marko Example', message: 'Hello, Marko!' });
});

Conditional Statements in Marko: #

Use JavaScript code inside Marko tags for conditional statements:

<if(data.user) {
    <p>Welcome, ${data.user.username}!</p>
} else {
    <p>Please log in</p>
}>

Iterating Over Arrays in Marko: #

Use JavaScript code inside Marko tags for iterating over arrays:

<ul>
    <for(user in data.users) {
        <li>${user.username}</li>
    }>
</ul>

Including Partials in Marko: #

Create Marko partials and include them in other templates:

<!-- views/header.marko -->
<header>
    <h1>${data.title}</h1>
</header>

<!-- views/index.marko -->
<html>
<body>
    <include('./header.marko') data=data />
    <p>${data.message}</p>
</body>
</html>

Custom Tags in Marko: #

Create custom tags to encapsulate and reuse UI components:

<!-- tags/my-component.marko -->
<div>
    <h2>${input.title}</h2>
    <p>${input.content}</p>
</div>

<!-- views/index.marko -->
<html>
<body>
    <my-component title="Custom Component" content="This is a custom component"></my-component>
</body>
</html>

Using Marko for Email Templates: #

Marko can be used for generating dynamic content in email templates:

const marko = require('marko');
const fs = require('fs');

const template = marko.load('email-template.marko');
const emailContent = template.render({ username: 'John', link: 'https://example.com' });

Middleware for Marko: #

Use Marko as middleware to render dynamic content in responses:

const express = require('express');
const markoExpress = require('marko/express');
const app = express();

app.use(markoExpress()); // Enable Marko in Express

app.use((req, res, next) => {
    res.locals.username = 'John';
    next();
});

app.get('/', (req, res) => {
    res.marko('index');
});

Marko provides a performant and developer-friendly way to build dynamic web applications in Node.js. Its simplicity, integration with Express, and support for JavaScript code within templates make it a popular choice for creating efficient and maintainable server-side rendered views. The ability to pass data, use conditionals, and iterate over arrays provides developers with a versatile tool for building dynamic content.