Processing.js

Глава 17 из книги "Архитектура приложений с открытым исходным кодом", том 2.

Оригинал: Processing.js
Автор: Mike Kamermans
Перевод: А.Панин

17.1. Как это работает?

Библиотека Processing.js является немного необычной для проекта с открытым исходным кодом, так как ее кодовая база содержится в единственном файле с именем processing.js, который содержит код для реализации функций языка Processing, представленный единственным объектом, реализующим функции всей библиотеки. При обсуждении метода структурирования кода следует упомянуть о том, что мы постоянно перемещаем элементы этого объекта, пытаясь немного улучшить код в каждом релизе. Архитектура библиотеки достаточно проста, а ее функция может быть описана одним предложением; она преобразует исходный код на языке Processing в корректный исходный код на языке JavaScript, причем каждый вызов функции API языка Processing ставится в соответствие подходящей функции объекта преобразования элементов языка Processing в JavaScript, что в итоге приводит к выполнению с элементом <canvas> тех же действий, которые были бы выполнены при использовании языка Processing с канвой апплета Java.

Для повышения скорости работы приложений мы используем два отдельных пути исполнения кода для работы с 2D- и 3D-функциями, при этом при загрузке скетча используется либо первый, либо второй путь для выбора необходимых оберток функций, из чего можно сделать вывод о том, что мы избегаем увеличения затрат ресурсов экземплярами выполняющихся приложений. Однако, при разговоре о структурах данных и направлении выполнения кода, следует учитывать тот факт, что знания в области языка JavaScript подразумевают то, что вы сможете прочитать код файла processing.js, возможно за исключением системы разбора синтаксических структур.

Унификация кода на языках Java и JavaScript

Преобразование кода на языке Processing в код на языке JavaScript обозначает, что вы можете просто сообщить браузеру о том, что нужно выполнить полученный в результате преобразования код и в том случае, если вы выполнили преобразование корректно, он просто заработает. Но уверенность в том, что преобразование выполнено и время от времени также выполняется корректно, требует приложения некоторых усилий. Синтаксис языка программирования Processing основан на синтаксисе языка программирования Java и это значит, что библиотеке Processing.js приходится в общем случае преобразовывать исходный код на языке Java в исходный код на языке JavaScript. Изначально эта процедура выполнялась путем рассмотрения исходного кода на языке Java в форме строки и итерационной замены специфичных для Java подстрок на их аналоги из JavaScript. (Интересующиеся ранней версией системы разбора кода читатели могут найти ее код здесь, причем следует рассматривать фрагмент кода со строки 37 до строки 266). Для небольшого синтаксического набора это решение было приемлемым, но с течением времени и нарастанием сложности оно начало давать сбои. Впоследствии система разбора кода была полностью переписана для добавления возможности построения абстрактного синтаксического дерева (Abstract Syntax Tree - AST) вместо разбора строки, путем изначального разбиения исходного кода на языке Java на функциональные блоки и последующего сопоставления каждого из таких блоков с соответствующими синтаксическими конструкциями языка JavaScript. В результате, хотя и произошло снижение читаемости кода библиотеки Processing.js, в ее составе появился транскомпилятор, преобразующий код на языке Java в код на языке JavaScript в процессе работы приложения. (Читатели могут внимательно изучить этот код вплоть до строки 19217.)

void setup() {
      size(200,200);
      noCursor();
      noStroke();
      smooth(); }

    void draw() {
      fill(255,10);
      rect(-1,-1,width+1,height+1);
      float f = frameCount*PI/frameRate;
      float d = 10+abs(60*sin(f));
      fill(0,100,0,50);
      ellipse(mouseX, mouseY, d,d); }

   function($p) {
        function setup() {
            $p.size(200, 200);
            $p.noCursor();
            $p.noStroke();
            $p.smooth(); }
        $p.setup = setup;

        function draw() {
            $p.fill(255, 10);
            $p.rect(-1, -1, $p.width + 1, $p.height + 1);
            var f = $p.frameCount * $p.PI / $p.__frameRate;
            var d = 10 + $p.abs(60 * $p.sin(f));
            $p.fill(0, 100, 0, 50);
            $p.ellipse($p.mouseX, $p.mouseY, d, d); }
        $p.draw = draw; }

Решение этих проблем было компромиссом между тем, что нужно пользователям и тем, что мы можем сделать с помощью веб-технологий. В последующих разделах мы обсудим каждую из этих проблем более подробно.

Далее: Значительные различия