Clever Geek Handbook

Expérience de l'utilisation du traducteur OberonJS pour créer un éditeur de modèle interactif

C'est amusant de créer des modèles éducatifs. Il est agréable de voir qu'une personne a compris un principe complexe en sciences naturelles ou en algorithmes en interagissant avec votre programme. Je suis biophysicien de profession, donc je n'ai généralement aucun problème avec les équations et les mathématiques, mais j'ai parcouru un long chemin avec les outils de création de modèles interactifs visuels. J'ai commencé à faire des modèles dans Matlab, il existe d'excellentes bibliothèques pour résoudre des équations, il est possible de construire facilement des graphiques. L'inconvénient est que le résultat est difficile à partager, et il est assez difficile de faire quelque chose en dehors de la portée des développeurs. Il faut plus de liberté. J'ai également essayé d'utiliser la technologie Flash, à l'époque, la technologie était toujours pertinente pour le Web et le langage ActionScript permettait de créer des modèles interactifs assez chargés.Cependant, le langage de programmation ActionScript lui-même ne correspondait pas à mes idées strictes sur l'harmonie et l'ordre, puis la technologie Flash a été complètement évincée des navigateurs par le nouveau standard HTML5 ... À ce moment-là, je programmais déjà activement des modèles dans l'environnementConstructeur de composants BlackBox . Il s'agit d'un développement open-source suisse, assez hermétiquement isolé du système d'exploitation IDE, qu'ils ont développé sur la base du système d'exploitation ETHOS... Les bibliothèques graphiques me conviennent, les performances du compilateur, la vitesse d'exécution du code de calcul - aussi. Et surtout, le langage Oberon reposait idéalement sur mon idée de ce qu'un langage de programmation devrait prendre dans la tête d'un spécialiste du domaine. Je n'avais pas besoin de bizarreries linguistiques, c'était agréable d'être dans la zone de confort et de penser à la tâche. Cependant, au 21ème siècle, il est très difficile de distribuer des applications compilées pour montrer quelque chose aux étudiants, ou simplement de publier des modèles sur Internet. Après tout, les gens ont tout simplement peur d'exécuter des applications tierces et les antivirus donnent souvent de faux positifs. Les applications de bureau pour la science et l'industrie sont d'excellents modèles interactifs pour éduquer les gens.

2014 -21 IT- . - . , . OberonJS. : JavaScript — , - — , JavaScript , . LEGO MINDSTORMS . , , « » . , , . CodeMirror JavaScript . , , ProcessingJS!

+ HTML5 = , , . :

« — . , , . , - - . , ».

« !» :

MODULE HelloWorld;
IMPORT Log;
BEGIN
 Log.String(" !"); Log.Ln
END HelloWorld.

, .

OberonJS, , , . , , CodeMirror , . , , . . MVP, .

: Log , Math , Strings , Draw , Forms Plot . , .

ProcessingJS, , p5.js. JavaScript JS.do, — . , REAL INTEGER FLOOR FLT. , : , . , , :

MODULE Draw;
IMPORT JS;
...
PROCEDURE Line*(x0, y0, x1, y1: REAL);
BEGIN JS.do("Instance.line(x0,y0,x1,y1)")
END Line;

PROCEDURE LineInt*(x0, y0, x1, y1: INTEGER);
BEGIN JS.do("Instance.line(x0+0.5,y0+0.5,x1+0.5,y1+0.5);")
END LineInt;
...
END Draw.

* . Instance Draw.Start, , p5.js, InnerDraw .

MODULE Draw;

TYPE
 ProcessingType* = POINTER TO RECORD END;

VAR
 Instance: ProcessingType; focus, started: BOOLEAN;

...

PROCEDURE InnerDraw;
BEGIN
 IF DrawProc # NIL THEN
  TrackMouse;
  DrawProc;
  IF FormDraw # NIL THEN FormDraw END
 END
END InnerDraw;

PROCEDURE Start*;
BEGIN
 ASSERT(~started);
 JS.do("let sketchProc = function(p){
 p.preload=Preload;
 p.draw=InnerDraw; p.setup=InnerSetup;
 p.keyPressed=InnerKeyPressed; p.keyTyped=InnerKeyTyped;
 p.mousePressed=InnerPressed; p.mouseReleased=InnerReleased;
 p.mouseOver=InnerOver; p.mouseOut=InnerOut;
 Instance=p;
 }");
 JS.do("var processingInstance = new p5(sketchProc);");
 JS.do("Instance.colorMode(Instance.RGB, 255, 255, 255, 1);");
 JS.do("removeSketch = function() { Remove(); }");
 focus := FALSE;
 started := TRUE
END Start;

END Draw.

JavaScript , , . , . , :

...
var Init = function (Log){

function Do(){
	Log.String(" !");
	Log.Ln();
}
Do();
}(Log);

, JavaScript. :

MODULE Strings;

IMPORT JS;

PROCEDURE Length* (s: ARRAY OF CHAR): INTEGER;
VAR i: INTEGER;
BEGIN i := 0;
 WHILE (i < LEN(s)) & (s[i] > 0X) DO INC(i) END
 RETURN i
END Length;

...

:

var Strings = function (JS){

function Length(s/*ARRAY OF CHAR*/){
	var i = 0;
	i = 0;
	while (true){
		if (i < s.length && RTL$.charAt(s, i) > 0){
			++i;
		} else break;
	}
	return i;
}

charAt :

var RTL$ = {
    charAt: function(s, index){
        if (index >= 0 && index < s.length)
            return s.charCodeAt(index);
        throw new Error("index out of bounds: " + index);
    },
...
}

, , . . — . , , JavaScript. - , .

— . - , , HTML5.

Cependant, malgré les difficultés techniques, sur le plan conceptuel, OberonJS a aidé à résoudre le problème de la création d'une interface de concepteur de logiciel conviviale pour créer des modèles interactifs. De plus, un avantage important est que le traducteur OberonJS ne contacte pas le serveur lors de la création d'un programme, et le programme est également exécuté côté client, ce qui signifie que dans le cas de la mise à l'échelle, la charge sur le serveur devrait augmenter légèrement.

Dans le futur, il serait intéressant de combiner OberonJS avec le framework Electron.



More articles:


All Articles