Un petit programme en forme de poeme. Ou bien l'inverse.

Propositions :

• Le Progrem est constitué d'un programme javascript pour être facilement executable sur tous types de machines
• Le Progrem produit une sortie interpretable dans du navigateur internet.
• Le Progrem est constitué du couple code source et sortie produite par le code source.
• Le Progrem peut être éducatif et son programme doit donc être conçu en conséquence.
• La “tuyauterie” nécessaire à produire la sortie ne devrait pas apparaitre dans le Progrem. Il faut donc fournir une API au progrem qui permet de mettre en valeur l'algorithmie du Progrem. On peut envisager de fournir une API “localisé” pour traduire le Progrem en français, espagnol, …
• L'exécution du Progrem pourrait être effectué étape par étape comme avec un debugger pour améliorer la compréhension du lecteur. Cela nécessite la définition d'un formalisme qui permet à tous les Progrems de pouvoir être visualisé dans un tel cadre.

Un progrem qui dessine dessinerait des images fixes ou animées. Le dessin produit serait “responsive” : la taille du dessin est configurable. Je propose que le dessin soit constitué d'une grille de pixel. La fonction principale du Progrem serait de colorier chaque case une par une. La fonction est pure : elle reçoit les coordonnées d'une case et elle détermine la couleur de la case.

On se concentre sur l'algorithme principal, pas sur les api js. On soigne la compréhension de l'algorithme. On cache si possible le code inutile pour la transmission de l'intuition de ce que fait le code.

function construireNouveauPixel(colonne, ligne, animation) {
  imageIndex = animation.getImageIndex()
  imagePrecedente = animation.getImagePrecedente()
 
  si ( condition(ligne, colonne, animation) ) {
    pixel = new Pixel(rose)
  } sinon {
    pixel = new Pixel(bleu)
  }
  return pixel;
}
 
for image i {
  clearImage()
  for ligne l {
    ligne = image[l]
    for colonne c {
      si ( condition(c, l, i) ) {
        pixel = ligne[c]
        pixel.couleur = rose
      }
      paintPixel(pixel)
    }
    paintLigne(ligne)
  }
  paintImage(image)
}

• Colorer
• Surligner
• Souligner
• Encadrer
• Mettre en gras

Stratégie :

• Attribuer une couleur aux variables à leur rencontre.
• Historiser dans une pile les affectations de variables.
• Colorer les blocks de code éxecutés (if / then / else)
• Mettre en exergue l'instruction en cours d'execution avec une flèche

Nous utiliserons le gestionnaire de paquet npm (sudo apt install npm). Nous délaigerons la compilation du typescript et la fabrication du bundle javascript à webpack

cd progrem-veiwer
npm init
npm install webpack webpack-cli --save-dev
npm install typescript ts-loader --save-dev 
./node_modules/.bin/tsc --init

Il faut ensuite configurer webpack en ajoutant à la racine du projet le fichier webpack.config.js suivant :

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  watch: true,
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Webpack se chargera alors de lire notre point d'entrée ./src/index.ts pour compiler tout le code typescript. Il placera alors tous les fichiers javascript dans le repertoire ./dist/.

Il faut alors modifier le fichier package.json pour indiquer que l'on va déléguer le build à webpack en ajoutant le script “build” :

"scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
},

Il ne nous reste alors plus qu'à lancer le build avec la commande :

npm run buil

Webpack restera alors démarré pour compiler et packager les sources du projet.

npm install --save-dev jasmine-core jasmine @types/jasmine jasmine-ts
./node_modules/.bin/jasmine init
./node_modules/.bin/jasmine examples

avec un fichier jasmine.json comme suit:

{
  "spec_files": [
    "**/*[sS]pec.ts"
  ],
  "helpers": [
    "helpers/**/*.ts"
  ],
  "stopSpecOnExpectationFailure": false,
  "random": true
}

et un fichier package.json dont le script test est définit ainsi :

"test": "jasmine-ts"

On peut alors lancer les test unitaires avec la commande :

npm test