It begins with a class

Classes and methods are the fundamental building blocks of metz. A class gets rendered as a box, and its methods as smaller boxes inside it. The only methods that are skipped are private ones. A method can call other methods, from the same class, as well as others and that call gets rendered as a line between the caller and callee boxes. And that’s it. It’s that simple! But let’s create a hello world program, just to drive the point home. And also because what kind of tutorial doesn’t have a hello world?!

And here’s the code for it:

class Main {
    /**
     * Is reponsible for many important things.
    */
    hello() {
        const result = this.world('Hello');
        std.log(result);
    }

    /**
     * Does all the heavy lifting!
    */
    world(arg: string) {
        return `${arg} World!`
    }
}

Notice that the comments and input/output types also get rendered. So it’s not just a dumb box. It has other essential properties that help us understand the component at a glance.

Try playing with it in the playground, and see what happens when you add comments to the Main class.

So, we have a class and and some methods. But what do we do with it? Who is instantiating it and running the code? Let’s answer that in the next section with Stories.

Introduction Stories

Get Started

Dependencies & Scope

Internals

Async Operations

Visual Storytelling

Utils