Полтора года назад я рассказывал про свой пет-проект по визуальному программированию - falang.io. Основная его особенность состоит в том, что пользователь не управляет расположением икон на схеме, только их содержимым. Все остальные соединительные линии рисуются автоматически алгоритмом по строгим правилам. В т.ч. continue, break, return.

На данный момент, помимо обычных текстовых диаграмм, у меня появился Low-code констркутор логики с упрощенной семантикой, который может экспортироваться в 5 современных языков программирования: C++, C#, Rust, Go, TypeScript.

TL;DR: Вот готовый пример с игрой «Змейка», запускающийся на микроконтроллере STM32 (Rust), и в браузере (TypeScript). Вся бизнес логика описана в Falang схемах, вручную только написано подключение к драйверам в случае STM32 и к Canvas в случае с браузером. Там же можно посмотреть все схемы, видео демонстрацию, и сгенерированный код.

Сразу хочу оговориться, что я не рассматриваю его как замену текстовому программированию. Хотите выжать максимум из своего языка - пишите текстом. Естественно, он генерирует не идеальный код. Это скорее способ конфигурирования системы и упрощенная возможность управления бизнес логикой для людей, далеких от программирования.

Конструктор логики позволяет полностью описать некоторую доменную область, и необходимые внешние API. Для этого сужествует три вида схем:

Структура объектов

Позволяет в простом виде описывать структуру объектов, используемых в приложении. Для каждого поля есть название и тип. Тип поля может быть скалярным значением (integer, float, string), массивом, и другим объектом. Для каждого языка генерируется свой вариант описания объектов. Например так это выглядит в Rust

pub struct GameState {
  pub colors: crate::falang::State::Colors,
  pub snake: crate::falang::State::Snake,
  pub food: crate::falang::State::Point,
  pub config: crate::falang::State::Config,
}

А так в C++:

struct GameState {
  Falang_State::Colors colors;
  Falang_State::Snake snake;
  Falang_State::Point food;
  Falang_State::Config config;
};

Внешнее API

Описывает внешнее API, которое вызывается из функций. Для внешнего кода генерируются интерфейсы, которые должны быть реализованы внешним кодом. Как и для объектов, для каждого языка свой вариант генерации интерфейсов. Например так для TypeScript:

export interface IDrawRectParams {
  x: number;
  y: number;
  w: number;
  h: number;
  color: Color;
}
export interface IDrawCircleParams {
  x: number;
  y: number;
  r: number;
  color: Color;
}
export interface Drawing {
  DrawRect (params: IDrawRectParams): Promise<void>;
  DrawCircle (params: IDrawCircleParams): Promise<void>;
}

А так для Go:

type IDrawRectParams struct {
  X int32
  Y int32
  W int32
  H int32
  Color State.Color
}
type IDrawCircleParams struct {
  X int32
  Y int32
  R int32
  Color State.Color
}
type Drawing interface {
  DrawRect(params IDrawRectParams) ;
  DrawCircle(params IDrawCircleParams) ;
}

Функция

В этом типе схем реализуется вся логика приложения. Отсюда можно вызывать внешние API, создавать объекты, описанные выше, и управлять ими. Из одной функции можно вызвать другую функцию. Прямо на схеме настраиваются параметры функции, и возвращаемое значение. Например так показанная выше схема генерируется в C#:

namespace Falang.isGameOver;
public class IisGameOverParams {
  public required Falang.State.GameState state { get; set; }
  public required Falang.Global.FalangGlobal _falangGlobal { get; set; }
}
public class MethodClass
{
  public static bool isGameOver(IisGameOverParams _params)
  {
    var state = _params.state;
    var _falangGlobal = _params._falangGlobal;
    bool returnValue = false;
    if (state.snake.dirX == 0 && state.snake.dirY == 0) {
      return returnValue;
    } else {
      foreach (var item in state.snake.body) {
        if (item.x == state.snake.x && item.y == state.snake.y) {
          returnValue = (bool)true;
          return returnValue;
        } else {
        }
      }
    }
    return returnValue;
  }
}

Пример со змейкой

В качестве первого примера разработана игра «Змейка». Она адаптирована под запуск в браузере (TypeScript) и на отладочной плате STM32F429I-DISC1 (Rust). Вот так это выглядит вживую:

Вся бизнес логика описана в Falang схемах, вручную только написана только реализация подключения к драйверам в случае STM32 и к Canvas в случае с браузером. Все схемы для змейки можно посмотреть тут. Скачать проект и посмотреть сгенерированный код можно здесь.

Заключение

Приложение уже можно скачать для Windows, Linux и MacOS. В нем есть несколько тестовых примеров. Они используются в автотестах и гарантированно выводят одинаковый результат на всех экспортируемых языках.

На данный момент это всё далеко от какого-то готового продукта, скорее демонстрация возможностей и обкатка технологии. Одни из основных направлений, которые я рассматриваю для будущего — это диалоговые боты и автоматизаторы бизнес-процессов.

Если хотите следить за последними новостями проекта — подписывайтесь на телеграм канал.

Спасибо за внимание. Буду рад любым пожеланиям и предложениям.

Комментарии (9)


  1. Zibx
    16.05.2024 18:56
    +2

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


  1. Spyman
    16.05.2024 18:56
    +1

    Тот редкий случай, когда low-code платформа выглядит осмысленной и имеет фактическое правдоподобное применение. Хотя для менеджера до сих пор кажется слишком сложно будет - как минимум типы данных надо знать.

    Но удачи, думаю для задачи чатботов и подобного действительно может зайти)


    1. serginho Автор
      16.05.2024 18:56

      Скорее изначально всю логику будут писать программисты, но менеджерам потом будет легко подкорректировать код.


      1. zaiats_2k
        16.05.2024 18:56

        Нет. Понять чужое - сложнее чем сделать свое.

        Нет. У менеджеров голова по-другому устроена.

        Нет. В системах сложнее hello, world визуальнай мусор только мешает.


  1. tomasloh
    16.05.2024 18:56

    А документацию гугл переводил? Иконы и жизнеритм звучит устрашающе.

    В целом - штука нравится


  1. kotenev
    16.05.2024 18:56

    Наконец-то "Дракон" пошёл в массы. Жаль только что IDE присутствует только для intel'овых Mac'ов.


    1. serginho Автор
      16.05.2024 18:56

      Нужен также для ARM? будет, не вопрос. Я думал никому не нужно


      1. kotenev
        16.05.2024 18:56
        +1

        Да, нужно, т.к. процессор Apple Silicon на личном Маке. Будем ждать и потом пробовать в работе.


  1. itGuevara
    16.05.2024 18:56

    1 "Low-сode конструктор логики с экcпортом" в JS из ЕРС (Дракон - уж слишком редкий зверь):

    ЕРС (и) или Дракон

    На таком Low-сode конструкторе хотел бы построить нечто SmartDesign - подобное: https://habr.com/ru/articles/810851/  

    jsDOT SmartDesign

    2 Нечто подобное: "Low-сode конструктор без ветвлений" - показан на Рисунок 9. Модель структуры

    https://www.hse.ru/edu/vkr/84176040

    Там блочный вариант, без ветвления в графическом виде. Если к нему "прикрутить" EPC (ветвления и др.), то получился бы указанный выше вариант (JS из ЕРС).

    3 Есть обратные конструкторы, например:

    https://code2flow.com/