A crash course in app development using Axino (step-by-step tutorial).
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”.
In order to get started with Axino and to write your first “hello world” minimalist app, here is a step-by step tutorial:
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
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 :
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:
npm i Axino
as explained in “step 2”, above.
#typescript #javascript #programming #developer #axino