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

Link : Axino vs Vue, React, Angular.

Image for post
Image for post
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:


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

Introducing the Axino Widget model, Channels and state handling.

Image for post
Image for post
(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 (Widgets: Composing the elementary components into reusable components or Widgets). …


Image for post
Image for post
(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 with the…


Image for post
Image for post
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)

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


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

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

Image for post
Image for post

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/
¦…


Image for post
Image for post
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 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('') …


Image for post
Image for post
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 HTML, but it is not quite HTML (for instance, “class” has to be renamed “className” in order to distinguish it from the “class” reserved keyword from JavaScript). …


What did we really “see”?

Image for post
Image for post
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 at least as much of a deduction (if not more) as it is an observation. …


Image for post
Image for post
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 qui sont d’une taille tellement extrême (particules élémentaires, phénomènes cosmétiques) que les détecteurs utilisés nous ne nous fournissent que des indications très indirectes de la nature réelle du phénomène; on ne peut donc se faire une « image » mentale de la réalité physique sous-jacente supputée que par le truchement d’une armada d’outils théoriques, à grand renfort de physique théorique (et donc de maths avancées que peu de personnes sur Terre ne sont capables de comprendre). …


Image for post
Image for post
Public domain image : https://commons.wikimedia.org/wiki/File:Clean_room.jpg

Les EnR : « Énergie renouvelables » (panneaux photovoltaïques (PV), éoliennes) sont souvent présentés comme des pistes de solutions pour l’après-pétrole.

En particulier, le sophisme suivant semble être à la base de ces faux raisonnements : « Ca ne dégage pas de CO2 et ne consomme pas de pétrole en fonctionnement, donc c’est écologique et on pourra l’utiliser dans un monde futur sans pétrole.»

Penser que ce raisonnement tient la route revient à croire qu’on pourrait produire des PV ou des éoliennes dans un monde simple, rural, désindustrialisé, en dehors d’un réseau de systèmes de production industriel, gigantesque et interconnecté, tant au niveau des ressources que des infrastructures, des matières premières, des transports, et des nombreuses dépendances ancillaires, etc. …

About

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