Getting Started - Slint Memory Game Tutorial (node)

# Getting Started

In this tutorial, we use JavaScript as the host programming language. We also support other programming languages like Rust or C++.

You'll need a development environment with Node.js 16 and npm installed. More recent versions of NodeJS are currently not supported, for details check Issue #961. Since Slint is implemented in the Rust programming language, you also need to install a Rust compiler (1.70 or newer). You can easily install a Rust compiler following the instruction from the Rust website. You will also need some additional platform-specific dependencies, see https://github.com/slint-ui/slint/blob/master/docs/building.md#prerequisites

We're going to use `slint-ui` as `npm` dependency.

In a new directory, we create a new `package.json` file.

    {
        "name": "memory",
        "version": "1.3.0",
        "main": "main.js",
        "type": "module",
        "dependencies": {
            "slint-ui": "^1.0.0"
        },
        "scripts": {
            "start": "node ."
        }
    }

This should look familiar to people familiar with NodeJS. We see that this package.json references a `main.js`, which we will add later. We must then create, in the same directory, the `memory.slint` file. Let's just fill it with a hello world for now:

    // memory.slint
    export component MainWindow inherits Window {
        Text {
            text: "hello world";
            color: green;
        }
    }

What's still missing is the `main.js`:

    // main.js
    import * as slint from "slint-ui";

    let ui = slint.loadFile("./memory.slint");
    let mainWindow = new ui.MainWindow();
    mainWindow.run();

To recap, we now have a directory with a `package.json`, `memory.slint`, and `main.js`.

We can now compile and run the program:

    npm install
    npm start

and a window will appear with the green "Hello World" greeting.

Feel free to use your favorite IDE for this purpose.