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

Link : Axino vs Vue, React, Angular.

Credit: https://www.vecteezy.com/vector-art/111250-free-app-development-vector-background

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:


The result is reset if the phone is rotated. How do you prevent that from happening?


Coding a dynamic todo-list in pure Typescript (no frameworks).

Introducing the Axino Widget model, Channels and state handling.

(C) Serge Hulne.

Live demo of the app:

https://serge-hulne.github.io/Axino-example-TODO-list/

Why Axino Widgets?

Frameworks (such as Vue, React, Angular, Svelte, etc…) can be used to build web apps, but they require a knowledge of CSS, JavaScript, and HTML, thereby imposing more requirements on the developer, mixing imperative and declarative languages, and mixing business logic with the presentation. The Axino widgets lib on the other hand uses Typescript only, a safer way to generate portable JavaScript, which allows the developer to build a web app using only one simple clear, robust, easy to debug language (moreover an imperative and typed language: https://youtu.be/zQnBQ4tB3ZA).

Getting started with Axino:

https://serge-hulne.medium.com/getting-started-with-axino-4584bcdb99ca

Axino-related concepts introduced in this tutorial:

  • Composition…

(C) Serge Hulne.

Goal

The aim of the npm package vector-ts is twofold:

  1. It aims at providing a data structure for Typescript and JavaScript which emulates a Python List, in which one can: add elements, delete them, append, prepend, insert, … them by value as well as by index.
  2. It provide a convenience class (which is a wrapper around the Array class) whose goal is to make operations on Arrays safer and more expressive / readable than with the Array.splice method (which is not very intuitive).

Where can I get It?

How can I use it?

It can be installed from npm…


Desktop calculator app

Here is the recipe:

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

Step 2 Create a directory for your app:

mkdir myapp (Linux and Mac)


Developing, testing, debugging a desktop app the easy way.

How to build a desktop app : the simple, fast, efficient way.

Step 1 : Installing Axino.

Step 2: Installing Electron.

  • In the current directory, myapp, install Electron:
  • In a terminal, in your myapp directory type:
git clone https://github.com/electron/electron-quick-start

This will install a minimalist in myapp, like so:

- myapp/
¦- electron-quick-start/

The app is initialized with the following command (in the directory : electron-quick-start):

npm install

This command triggers the download of Electron and it’s dependencies in the node_modules sub-directory of the current working directory (“electron-quick-start”).

The configuration of the project is now:

- myapp/
¦…

Axino vs Vue.

Context: Link: Getting started wih Axino

1. Declarative rendering:

Vue:

// HTML<div id="app">
{{ message }}
</div>
// JSvar app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
}

Axino:

2. Iterating over an array of data:

Vue:

// HTML
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
// JS
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})

Axino:

3. Handling user input:

Vue:

// HTML<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
// JSvar app5 =…

Axino vs Vue, React, Angular.

Link: Getting started with Axino (A quick introduction to Axino)

Unlike frameworks like Vue.js, React.js, Angular.js. Axino strives to:

  1. Using a “clean” easy to learn / easy to debug language: it uses Typescript instead of JavaScript, because:
  • Typed languages are less error prone than dynamically typed languages.
  • Typescript is more standardized than JavaScript.
  • Typescript has a sane class model which is familiar to Java or C++ or Python developers.

2. Avoiding outlandish pseudo-html constructs, such as JSX used in React or in Angular.

// JSX:const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// HTML:<h1 class="greeting">
Hello, world!
</h1>

Which is problematic, because it looks like…


What did we really “see”?

By ESO, ESA/Hubble, M. Kornmesser — https://www.eso.org/public/images/eso1644a/, CC BY 4.0, https://commons.wikimedia.org/w/index.php?curid=54114453

What was observed in reality?

https://www.space.com/black-hole-star-death-spaghettification

Astronomers see a star ‘spaghettified’ by a black hole | EarthSky.org

https://www.20minutes.fr/sciences/2883439-20201012-espace-spaghettification-etoile-trou-noir-suivie-temps-reel

The video illustrating this article is in fact a simulation (“ an artist’s impression”).

Apart from the sun, and the closest stars ( https://en.wikipedia.org/wiki/List_of_stars_with_resolved_images ) stars -even when watched via the largest telescopes- are only points seen seen through these optical telescopes, so one could not have filmed this kind of video in reality with a telescope.

The detected signals, suggesting that this event took place, are actually radio signals, so our understanding of this phenomenon is…


Screen capture of the video referenced hereuder

Qu’est ce que l’on a observé en réalité?

https://www.space.com/black-hole-star-death-spaghettification

https://www.20minutes.fr/sciences/2883439-20201012-espace-spaghettification-etoile-trou-noir-suivie-temps-reel

La vidéo illustrant cet article est une simulation (« artist’s impression »).

A part le soleil, et les étoiles les plus proches (https://en.wikipedia.org/wiki/List_of_stars_with_resolved_images) ne sont que des points vues au télescope optique, donc on n’aurait pas pu filmer ce genre de vidéo en réalité au télescope.

Les signaux détectés depuis la terre, qui donnent à penser que cet événement à eu lieu, sont des signaux radio en fait, donc c’est au moins autant une déduction (sinon plus) qu’une observation.

C’est la malédiction de la science contemporaine, on investigue des phénomènes…

Serge Hulne

Author, scientist (Physics PhD), philosophy, Sci-Fi, thrillers, humor, blues and Irish music, green energy, origins of consciousness.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store