Getting Started With Axino

A crash course in app development using Axino (step-by-step tutorial).

About Axino

Axino is a component library, alternative to frameworks like Vue, React, Angular for front-end app development. Small footprint. Pure HTML5 / CSS / TS.

If you come from the Java world, think “Swing” GUI components library.

If you come from the Python world, think “Tkinter”.

Axino on Electron:

Image for post

Quick start

In order to get started with Axino and to write your first “hello world” minimalist app, here is a step-by step tutorial:

Step 1 Download the tools:

Tool 1: npm

Npm is required to install Axino, **Typescript **and Parcel:

npm is installed as explained on the npm homepage: https://www.npmjs.com/get-npm

Be sure to download the version of npm which is compatible with your platform: Mac, Windows or Linux.

Tool 2: Typescript

Once npm is installed on your system, all the other tools can be installed via npm:

Typescript is installed by entering the following npm command in a terminal:

npm install -g typescript

Tool 3: Parcel

Parcel is installed in the same way by entering:

npm install -g parcel-bundler

Running the “hello word” example (and other examples)

Step 1:

Create a directory for your app:

mkdir myapp (Linux and Mac)

or use your favorite “file manager” to create a dedicated directory.

Step 2:

In the directory in question, run the command:

npm init -y
npm i Axino

in order to have a local “node_modules” directory installed by npm (which in turn will contain the Axino directory) , like this:

myapp
    ¦-- node_modules
        ¦-- axino

Step 3:

In a code editor of your choice (I recommend VSCode, because it helps you with JavaScript, HTML, Typescript), via its numerous plugins, copy and paste :

hello.ts (the type source for the app)
hello.html (the html skeleton of the app)

import { Button } from "axino/button";
import { log } from "axino/core";
import { Label } from "axino/label";
import { Div } from "axino/div";

// Create a basic Div:
var d = new Div(null);
d.appendToApp();
d.vertical();

// Add a label to the Div:
var l = new Label("Clik on B1");
l.appendTo(d);

// Create a Button add to Div:
var b1 = new Button("B1");
b1.appendTo(d);

// Add behaviour to Button b (which acts on label l):
b1.onClick(() => {
    l.setText("<h1>Hello World!</h1>");
    log(l.getText());
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic">
    <title>Axino2 Hello world example</title>
</head>

<body>
    <!-- for testing *.ts sources, via "parcel index.html" -->
    <script src="hello.ts"></script>
</body>

</html>

The content of your directory should look like:

myapp

    - hello.html
    - hello.ts
      ¦-- /node_modules
          ¦-- /axino

That is your myapp directory contains now:

the source code file: hello.html
the source code file: hello.ts
the directory : node_modules
the directory : axino (inside the dir node_modules)
Quick reminder for the newbies: node_modules and its content have been intalled in one go with the command:

npm i Axino

as explained in “step 2”, above.

#typescript #javascript #programming #developer #axino