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

Introducing the Axino Widget model, Channels and state handling.

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). …

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?

• The npm package is here: https://www.npmjs.com/package/vector-ts
• The Github repo is here: https://github.com/serge-hulne/vector-ts-js

How can I use it?

It can be installed from npm with the…

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.

Step 1 : Installing Axino.

• 1 create a new directory and name it myapp (for instance).
• Install Axino :Axino Quickstart

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

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('') …

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”?

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. …

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). …