Clever Geek Handbook

Experiência de usar o tradutor OberonJS para criar um editor de modelo interativo

É divertido criar modelos educacionais. É bom ver que uma pessoa entendeu algum princípio complexo em ciências naturais ou algoritmos ao interagir com seu programa. Sou biofísico de profissão, então normalmente não tenho problemas com equações e matemática, mas já percorri um longo caminho com as ferramentas para criar modelos visuais interativos. Comecei a fazer modelos no Matlab, existem excelentes bibliotecas para resolver equações, é possível construir gráficos facilmente. A desvantagem é que o resultado é difícil de compartilhar e é muito difícil fazer algo fora do escopo dos desenvolvedores. É necessária mais liberdade. Também tentei usar a tecnologia Flash, naqueles anos a tecnologia ainda era relevante para a web, e a linguagem ActionScript permitia fazer modelos interativos bastante ocupados.No entanto, a linguagem de programação ActionScript em si não correspondia às minhas idéias estritas sobre harmonia e ordem, e então a tecnologia Flash foi completamente espremida dos navegadores pelo novo padrão HTML5 ... Naquela época, eu já estava programando ativamente modelos no ambienteConstrutor de componentes do BlackBox . Este é um desenvolvimento suíço de código aberto, bastante hermeticamente isolado do sistema operacional IDE, que foi desenvolvido com base no sistema operacional ETHOS... Bibliotecas gráficas eram boas para mim, o desempenho do compilador, a velocidade de execução do código computacional - também. E o mais importante, a linguagem Oberon idealmente se baseia na minha ideia de quanto uma linguagem de programação deve suportar na cabeça de um especialista de domínio. Eu não precisava de nenhuma peculiaridade linguística, era bom estar na zona de conforto e pensar sobre a tarefa. No entanto, no século 21, é muito difícil distribuir aplicativos compilados para mostrar algo aos alunos ou simplesmente publicar modelos na Internet. Afinal, as pessoas simplesmente têm medo de executar aplicativos de terceiros e os antivírus costumam dar falsos positivos. Os aplicativos de desktop para a ciência e a indústria são excelentes, mas os modelos interativos para educar as pessoas, não.

Em 2014, junto com o projeto Informatics-21 , realizamos uma conferência de TI em Moscou. Especialistas em sistemas Oberon de toda a Rússia e até mesmo da Bielo-Rússia vieram para lá. Então não tive preguiça de pegar minha câmera antiga e gravei a maioria dos relatórios . Com a palestra de Alexei Veselovsky , aprendi sobre o tradutor OberonJS . A tese do relatório é simples: JavaScript é uma substância muito amorfa, portanto, desenvolver algo grande nele é uma dor de cabeça, mas se o JavaScript for projetado com Oberon, haverá uma economia significativa na depuração. Oberon 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.

No entanto, apesar das dificuldades técnicas, conceitualmente OberonJS ajudou a resolver o problema de criar uma interface de designer de software amigável para criar modelos interativos. Além disso, uma vantagem importante é que o tradutor OberonJS não entra em contato com o servidor ao criar um programa, e o programa também é executado no lado do cliente, o que significa que no caso de dimensionamento, a carga no servidor deve aumentar ligeiramente.

No futuro, seria interessante combinar OberonJS com o framework Electron.



More articles:


All Articles