خبرة في استخدام مترجم OberonJS لإنشاء محرر نموذج تفاعلي

من الممتع إنشاء نماذج تعليمية. من الجيد أن ترى أن الشخص قد فهم بعض المبادئ المعقدة في العلوم الطبيعية أو الخوارزميات من خلال التفاعل مع برنامجك. أنا عالم فيزياء حيوية من حيث المهنة ، لذلك لا أواجه عادةً أي مشاكل مع المعادلات والرياضيات ، لكنني قطعت شوطًا طويلاً باستخدام أدوات إنشاء نماذج تفاعلية بصرية. لقد بدأت في صنع النماذج في Matlab ، وهناك مكتبات ممتازة لحل المعادلات ، ومن الممكن بسهولة بناء الرسوم البيانية. العيب هو أنه من الصعب مشاركة النتيجة ، ومن الصعب جدًا القيام بشيء خارج نطاق المطورين. هناك حاجة إلى مزيد من الحرية. حاولت أيضًا استخدام تقنية Flash ، في تلك السنوات كانت التكنولوجيا لا تزال ملائمة للويب ، وأتاحت لغة ActionScript إنشاء نماذج تفاعلية مشغولة للغاية.ومع ذلك ، فإن لغة برمجة أكشن سكريبت نفسها لا تتوافق مع أفكاري الصارمة حول التناغم والنظام ، ثم تم استبعاد تقنية الفلاش تمامًا من المتصفحات وفقًا لمعيار HTML5 الجديد ... بحلول ذلك الوقت كنت أبرمج بالفعل نماذج في البيئةمنشئ مكون BlackBox . هذا تطوير سويسري مفتوح المصدر ، معزول تمامًا عن نظام التشغيل IDE ، والذي طوره بناءً على نظام تشغيل ETHOS... كانت مكتبات الرسوم جيدة بالنسبة لي ، وأداء المترجم وسرعة تنفيذ الكود الحسابي أيضًا. والأهم من ذلك ، كانت لغة أوبيرون مناسبة بشكل مثالي لفكرتي عن المقدار الذي يجب أن تتخذه لغة البرمجة في رأس اختصاصي المجال. لم أكن بحاجة إلى أي مراوغات لغوية ، كان من الجيد أن أكون في منطقة الراحة والتفكير في المهمة. ومع ذلك ، في القرن الحادي والعشرين ، من الصعب جدًا توزيع التطبيقات المجمعة لتظهر للطلاب شيئًا ما ، أو ببساطة لنشر النماذج على الإنترنت. بعد كل شيء ، يخشى الأشخاص ببساطة تشغيل تطبيقات الطرف الثالث ، وغالبًا ما تعطي برامج مكافحة الفيروسات نتائج إيجابية خاطئة. تطبيقات سطح المكتب للعلوم والصناعة هي نماذج تفاعلية ممتازة لتعليم الناس ليست كذلك.

في عام 2014 ، مع مشروع Informatics-21 ، عقدنا مؤتمر تكنولوجيا المعلومات في موسكو. جاء هناك متخصصون في أنظمة أوبيرون من جميع أنحاء روسيا وحتى من بيلاروسيا. ثم لم أكن كسولًا جدًا لأخذ كاميرتي القديمة ، وسجلت معظم التقارير . من حديث أليكسي فيسيلوفسكي ، تعرفت على مترجم OberonJS . أطروحة التقرير بسيطة: JavaScript مادة غير متبلورة تمامًا ، لذا فإن تطوير شيء كبير عليها يمثل صداعًا ، ولكن إذا تم تصميم JavaScript باستخدام Oberon ، فسيكون هناك توفير كبير في تصحيح الأخطاء. أوبيروننوع من الارتباط الأوسط بين برنامج LEGO MINDSTORMS الرائج والحرية غير المحدودة لـ C. بشكل عام ، يمكنك فعل أي شيء حيال ذلك ، وفي نفس الوقت يكون احتمال "إطلاق النار على قدمك" ضئيلًا. ثم قام الرجال بعمل عرض توضيحي لإظهار كيفية عمله. يتم ترجمة الكود من نافذة CodeMirror من Oberon إلى 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.

ومع ذلك ، على الرغم من الصعوبات التقنية ، ساعدت OberonJS من الناحية المفاهيمية في حل مشكلة إنشاء واجهة مصمم برمجيات ودية لإنشاء نماذج تفاعلية. ومن المزايا المهمة أيضًا أن مترجم OberonJS لا يخاطب الخادم عند إنشاء برنامج ، ويتم تنفيذ البرنامج أيضًا من جانب العميل ، مما يعني أنه في حالة التحجيم ، يجب زيادة الحمل على الخادم قليلاً.

في المستقبل ، سيكون من المثير للاهتمام دمج OberonJS مع إطار عمل Electron.