Experiencia en el uso del traductor de OberonJS para crear un editor de modelos interactivo

Es divertido crear modelos educativos. Es bueno ver que una persona ha entendido algún principio complejo en ciencias naturales o algoritmos al interactuar con su programa. Soy biofísico de profesión, por lo que normalmente no tengo problemas con las ecuaciones y las matemáticas, pero he recorrido un largo camino con las herramientas para crear modelos interactivos visuales. Comencé a hacer modelos en Matlab, hay excelentes bibliotecas para resolver ecuaciones, es posible construir gráficos fácilmente. La desventaja es que el resultado es difícil de compartir y es bastante difícil hacer algo fuera del alcance de los desarrolladores. Se necesita más libertad. También intenté utilizar la tecnología Flash, en esos años la tecnología seguía siendo relevante para la web y el lenguaje ActionScript hizo posible hacer modelos interactivos bastante ocupados.Sin embargo, el lenguaje de programación ActionScript en sí no se correspondía con mis ideas estrictas sobre armonía y orden, y luego la tecnología Flash fue completamente eliminada de los navegadores por el nuevo estándar HTML5 ... En ese momento ya estaba programando activamente modelos en el entorno.Generador de componentes BlackBox . Se trata de un desarrollo suizo de código abierto, bastante herméticamente aislado del sistema operativo IDE, que desarrollaron basándose en el sistema operativo ETHOS.... Las bibliotecas gráficas estaban bien para mí, el rendimiento del compilador, la velocidad de ejecución del código computacional también. Y lo más importante, el lenguaje Oberon se adaptaba perfectamente a mi idea de cuánto debería tomar un lenguaje de programación en la cabeza de un especialista en dominios. No necesitaba ninguna peculiaridad lingüística, era agradable estar en la zona de confort y pensar en la tarea. Sin embargo, en el siglo XXI, es muy difícil distribuir aplicaciones compiladas para mostrar algo a los estudiantes o simplemente publicar modelos en Internet. Después de todo, la gente simplemente tiene miedo de ejecutar aplicaciones de terceros y los antivirus a menudo dan falsos positivos. Las aplicaciones de escritorio para la ciencia y la industria son excelentes, pero los modelos interactivos para educar a las personas no lo son.

En 2014, junto con el proyecto Informatics-21 , celebramos una conferencia de TI en Moscú. Llegaron especialistas en sistemas de Oberon de toda Rusia e incluso de Bielorrusia. Entonces no me dio pereza tomar mi vieja cámara y grabé la mayoría de los informes . De la charla de Alexei Veselovsky , aprendí sobre el traductor de OberonJS . La tesis del informe es simple: JavaScript es una sustancia muy amorfa, por lo que desarrollar algo grande en él es un dolor de cabeza, pero si JavaScript está diseñado con Oberon, habrá ahorros significativos en la depuración. Oberonuna especie de vínculo intermedio entre el éxito de taquilla LEGO MINDSTORMS y la libertad ilimitada de C. En general, puede hacer cualquier cosa con él y, al mismo tiempo, la probabilidad de "dispararse en el pie" es mínima. Luego, los chicos hicieron una demostración para mostrar cómo funciona. El código de la ventana CodeMirror se traduce de Oberon a JavaScript directamente en el navegador del cliente y se ejecuta. ¡Esto no me hubiera llamado la atención si Alexey no hubiera hecho una demostración de cómo se puede combinar con el marco de ProcessingJS!

Lenguaje estricto y simple + gráficos avanzados en HTML5 = la fórmula perfecta para la educación, para que los usuarios no solo vean el modelo de gráficos interactivos, sino que también puedan comprender fácilmente los algoritmos detrás de él. Me gusta citar a Sergey Zalmanovich Sverdlov:

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

« !» :

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.

Sin embargo, a pesar de las dificultades técnicas, conceptualmente OberonJS ayudó a resolver el problema de crear una interfaz amigable para el diseñador de software para crear modelos interactivos. Además, una ventaja importante es que el traductor de OberonJS no se pone en contacto con el servidor al crear un programa, y ​​el programa también se ejecuta en el lado del cliente, lo que significa que en el caso del escalado, la carga en el servidor debería aumentar ligeramente.

En el futuro, sería interesante combinar OberonJS con el marco Electron.




All Articles