Tutorial 1. Hello world!

A quick Hello world

This tutorial shows how to build a minimal app in Drakon.Tech. If you want a quick answer, here is what a "Hello world" application looks like in Drakon.Tech.

Hello world step by step

1. Create a program module in a project.
2. Add the main function to the module.
3. Add an Action icon to the main function.
4. Put this code snippet in the Action icon: console.log("Hello, World!")
5. Build the project.
6. Run the project in the browser. See the output in the console in the browser's development tools.

A more detailed explanation

In Drakon.Tech, you can have one or more projects. Each project can contain one or more modules with functions.

Let's create a simple app with a single function.

First, we create a module. Right-click on a project in the tree view and choose Create module.

Then, we add a function to the module. Right-click on the module in the tree view and choose Function. Let's call this function main. If a module has a function named main, Drakon.Tech will call this function when the script is loaded.

Now it is time to add some code. Let's add an Action icon to the flowchart. You could use a button on the toolbox, but I prefer shortcuts. To add an Action icon, press the "A" key and then click on one of the yellow circles. These circles show where we can insert an icon of the selected type. Then, let's press Enter and start typing code. After having finished typing, press Control+Enter to save the icon.

Let's run the code. Click on the Build button, and Drakon.Tech will give you a link to the page with your JavaScript code.

We open the link, go to the console in the browser's development tools, and we see the expected output. Here is what happened. We created a function with the name main; Drakon.Tech generated a JavaScript function main and invoked it when the browser loaded the script.

Hello, World!

Let's open the Sources tab and look at the generated JavaScript file. Here is our main function. Note that main is invoked at the bottom of the script.

// Generated with Drakon.Tech https://drakon.tech/

(function() {
function main() {
    console.log("Hello, World!")
}

main();

})();

If we right-click on the module in the tree view and choose Properties, we will see that by default the module format is "Program."

For each program module, Drakon.Tech generates two JavaScript files: one in CommonJS format (index.js) and another for debugging in the browser. The debug file we have already seen in the browser's development tools. To get the Common JS file, right-click on the module in the tree view and choose "Get URL."

You can either run the CommonJS variant with Node.js or include it in your build pipeline for the front-end app using Browserify or similar tools.