Introduction to Marko

Marko is a popular JavaScript framework for building dynamic web applications. Known for its high performance, small bundle size, and seamless integration with Node.js, Marko is a go-to choice for many developers. This article will introduce you to Marko and showcase its powerful APIs with code snippets.

APIs in Marko

1. renderToString API

The renderToString API is used to convert your Marko templates into HTML strings. This is especially useful for server-side rendering (SSR).

    const template = require('./template.marko');
    template.renderToString({ name: 'Marko' }, (err, html) => {
        if (err) {
            throw err;
        }
        console.log(html);
    });

2. writeTo API

The writeTo API allows you to stream the rendering output to writable streams like http.ServerResponse. This is handy for streaming SSR.

    const template = require('./template.marko');
    const fs = require('fs');
    const writeStream = fs.createWriteStream('output.html');

    template.writeTo(writeStream, { name: 'Marko' })
        .on('finish', () => {
            console.log('File written!');
        });

3. legacy API

The legacy API is used to ensure compatibility with older versions of Marko components.

    const legacyComponent = require('marko/components').defineComponent({
        template: require('./template.marko'),
        getTemplateData(state, input) {
            return { name: 'Marko' };
        }
    });

4. getComponent API

The getComponent API retrieves the Marko component instance from a rendered template.

    const template = require('./template.marko');
    template.render({ name: 'Marko' }, (err, html, out) => {
        if (err) {
            throw err;
        }
        const component = out.global.getComponent();
        console.log(component);
    });

5. defineComponent API

The defineComponent API is used to create a Marko component with its own lifecycle methods and state.

    module.exports = require('marko/components').defineComponent({
        template: require('./template.marko'),

        init() {
            this.state = { count: 0 };
        },

        handleButtonClick() {
            this.setState('count', this.state.count + 1);
        }
    });

Example Application

Here is a sample Marko application that puts together all the discussed APIs.

    // app.js
    const express = require('express');
    const markoExpress = require('marko/express');
    const template = require('./views/index.marko');
    
    const app = express();
    app.use(markoExpress());
    
    app.get('/', (req, res) => {
        res.marko(template, { name: 'World' });
    });
    
    app.listen(3000, () => {
        console.log('Server is running on port 3000');
    });

    // views/index.marko
    class {
        onCreate() {
            this.state = {
                name: this.input.name
            };
        }

        setName(event) {
            this.state.name = event.target.value;
        }
    }
    template {
        

            
Hello ${state.name}
            
        
    }

This simple application demonstrates how Marko makes building dynamic web applications straightforward.

Hash: 8c5faf36ce0dae48351f5e09c5133fdaddcf52d9baf4369db027766a12c1742f