Nop Chaos (фронтальная часть платформы Nop Platform 2.0)

Введение

Nop Platform 2.0 — это новая генерация платформы с низким кодом, построенная с нуля на основе принципов обратимого вычисления. Она стремится преодолеть ограничения платформ с низким кодом, не позволяющие избежать перебора, и превзойти компонентную технологию на теоретическом уровне, эффективно решая проблему грубого переиспользования программного обеспечения. nop-chaos — это фронтальная часть платформы Nop, реализованная с использованием таких технологий, как Vue3.0, ant-design-vue, Baidu AMIS, logicflow и xspreadsheet.

Сочетание nop-chaos с nop-entropy (задней частью платформы Nop) позволяет создать решение, подобное байдусовскому Aisuda. nop-chaos — это универсальный контейнер для выполнения фронтальной части с низким кодом, который можно упаковать и встроить непосредственно в Java-сервисы. В обычном бизнес-разработке достаточно добавить JSON-файлы и несколько простых библиотек JavaScript на стороне Java, без необходимости перекомпиляции и упаковки проекта nop-chaos.В настоящее время nop-chaos использует Baidu AMIS-фреймворк для рендеринга страниц с низким кодом, возвращаемых задними сервисами. Однако его дизайн является универсальным, и большинство операций выполняются на уровне JSON-структуры, не зависящей от конкретного фреймворка, что позволяет легко адаптировать его к другим фреймворкам с низким кодом. В будущем планируется добавить поддержку Alibaba LowCodeEngine.#### Основные принципы дизайна

Обратимое вычисление: следующая теория построения программного обеспечения

Техническая реализация обратимого вычисления

Как тензорное произведение влияет на дизайн платформ с низким кодом

Какой ORM-движок нужен платформам с низким кодом?

Почему байдуский AMIS — это отличный дизайн

Архитектура программного обеспечения

nop-chaos использует pnpm для управления многими модулями, включая следующие:

1. nop-site: основной фреймворк фронтальной части и интеграция с AMIS-фреймворком. Основной фреймворк основан на jeecgboot-vue3 и vben-admin и был адаптирован под нужды. nop-site включает определенные упаковки и улучшения AMIS, используя SystemJs для динамической загрузки модулей JavaScript (основные коды находятся в src/nop).

2. nop-server-tool: инструмент для конвертации и упаковки библиотек JavaScript на стороне сервера с использованием rollup. Он переводит файлы модулей ESM в стандартные файлы JavaScript для SystemJs. Этот модуль в основном используется для выполнения в Java-программах.

3. nop-amis-editor: Простое упаковывание amis-editor, которое можно встраивать в iframe для независимого использования.4. Другие модули представляют собой технологии, которые в настоящее время рассматриваются для интеграции, но ещё не содержат реального контента.#### Установка и использование

• Если Node.js 16 не установлен, можно скачать по адресу: https://nodejs.org

# Проверка
node -v

• Если pnpm не установлен, выполните установку

npm i -g pnpm
# Проверка
pnpm -v

• Получите код

git clone https://gitee.com/canonical-entropy/nop-chaos.git
cd nop-chaos

Внимание: Не размещайте в директориях с кириллическими именами или пробелами.

• Установите зависимости

pnpm config set registry https://registry.npm.taobao.org
pnpm config set ENTRYCLI_CDNURL=https://cdn.npm.taobao.org/dist/sentry-cli
pnpm config set sentrycli_cdnurl=https://cdn.npm.taobao.org/dist/sentry-cli

pnpm install

• Разработка и отладка

pnpm dev

Первое выполнение может быть медленным, требуется терпение.

• Тестирование

  Введите в браузере http://localhost:8100, перейдите на страницу входа, имя пользователя nop, пароль 123.

Для предоставления сервиса на стороне сервера необходимо запустить один из модулей сервиса в проекте nop-entropy, например, nop-entropy/nop-demo/nop-quarkus-demo.

Если требуется запуск без использования сервиса, можно изменить файл .env.development в папке packages/nop-site и установить VITE_USE_MOCK = true. В режиме MOCK будут использоваться JSON-файлы из папки packages/nop-site/public/mock/pages для имитации ответов сервиса на стороне сервера.

• Сборка

pnpm build

После сборки в корневой директории каждого модуля будет создан каталог dist

Расширения AMIS

Фронтенд платформы Nop в настоящее время использует фреймворк AMIS и добавляет следующие расширения для упрощения программирования## Обратимое вычисление

Платформа Nop на основе теории обратимых вычислений реализует универсальные механизмы разбиения и объединения для JSON и XML. Это позволяет разбивать большие JSON-файлы на несколько небольших файлов по общим правилам, что является дополнением к AMIS в виде определённой синтаксической структуры. Самые распространённые синтаксические конструкции — x:extends для указания наследования внешнего файла и x:gen-extends для динамического генерирования JSON-объекта, который может быть наследован.

x:gen-extends: |
  <web:GenPage view="NopAuthDept.view.xml" page="main" xpl:lib="/nop/web/xlib/web.xlib" />

body:
   name: crud-grid
   bulk-actions:
       - type: action
         id: test-button
         label: 'Тест'
         actionType: dialog
         dialog:
            "x:extends": test.page.yaml
            "title": "Тестовое окно"

Приведенный ниже пример означает, что сначала динамически создается страница CRUD на основе конфигурации из файла NopAuthDept.view.xml, а затем в области кнопок для массовых операций добавляется кнопка "Тест". При нажатии на эту кнопку отображается диалоговое окно, реализация которого основана на переиспользовании файла test.page.yaml. Атрибут title перекрывает наследуемое содержимое через x:extends, устанавливая заголовок диалогового окна как "Тестовое окно".

x:extends является некоторым универсальным оператором, выполняющим операцию наследования, подобную объектно-ориентированному наследованию, на структурах вида дерево.Для любого внешнего файла формата JSON достаточно изменить функцию загрузки обычного JSON-файла на вызов ResourceLoader, предоставленный платформой Nop, чтобы автоматически получить обратимые вычисления, определенные для декомпозиции и объединения, а также поддерживать метапрограммирование на этапе компиляции, что позволяет выполнять ряд сложных структурных преобразований на этапе компиляции.

Модульная структура Action

DSL AMIS сам по себе поддерживает только написание фрагментов кода на JavaScript, встроенных в страницу, и не поддерживает напрямую включение внешних функций на JavaScript. Платформа Nop добавляет в AMIS атрибут xui:import, который позволяет включать внешние JavaScript-библиотеки и использовать функции из этих библиотек в качестве обработчиков событий.

Эта механика является универсальной и может использоваться для интеграции других систем низкого кодирования

type: page
xui:import: /nop/auth/pages/DemoPage/demo.lib.js
body:
  type: form
  api:
    url: "@action:demo.testAction"
    data:
      a: 1

Приведенный выше пример показывает, что мы включаем библиотеку demo.lib.js, а затем используем demo.testAction для ссылки на функции внутри этой библиотеки.Синтаксис url: "@action:demo.testAction" представляет собой механизм триггера действий, предоставляемый нами на основе абстракции окружения AMIS. Он перехватывает вызовы fetcher AMIS, распознает префикс @action:, а затем отображает его на уже загруженные JavaScript-функции, передавая параметры, указанные в данных.Код библиотеки скриптов хранится в файле demo.lib.xjs (обратите внимание на расширение xjs вместо js, мы используем GraalVM-JS скриптовый движок для вызова rollup для преобразования xjs в js-файлы и упаковки их в структуру модулей SystemJs).

/* @x:gen-extends:
  <!-- Здесь можно использовать язык шаблонов XPL для генерации кода на JavaScript -->
 */
import { ajaxFetch } from '@nop/utils'

import { myAction } from './sub.lib.js'

import { myAction2 } from './parts/sub2.lib.js'

import { ajaxRequest } from '@nop/utils'

export function testAction(options, page) {
    page.env.alert("xx");
    ajaxFetch(options);
    ajaxRequest(options);
    myAction(options, page);
    myAction2(options, page);
}

Вернуть Promise.resolve({ статус: 200, данные: { статус: 0 } });

Файл xjs можно записать в формате обычного модуля ESM. Мы добавили возможность динамического генерирования на этапе компиляции, добавив комментарий @x:gen-extends (эта возможность используется в редакторе рабочих процессов для динамического генерирования).Экспортируемые функции являются интерфейсными функциями, доступными для внешнего вызова. Вызовы импорта преобразуются с помощью SystemJs. Существует специальное обработывание для файлов, находящихся в директории /parts/: мы используем rollup для объединения кода этих файлов с кодом основного файла, то есть файлы в директории /parts/ считаются внутренними реализациями и не выносятся как внешние библиотеки JavaScript. Результат после сборки можно увидеть в файле demo.lib.js.Внешние библиотечные функции могут использоваться везде, где разрешено встраивание JavaScript-скриптов. Для этого мы предоставляем префикс @fn:, при использовании которого необходимо явно передавать аргументы функции (аргументы функции для действий уже согласованы как options, page).

"onClick":"@fn:demo.myListener(event,props)"

Переосмыслим процесс вызова onClick. Мы обнаружим, что процесс поиска реализации функции по имени очень похож на процесс обработки событий "пузырькового" всплытия в DOM-компонентах. В процессе всплытия событий передается имя события, и поиск осуществляется по уровням вверх до тех пор, пока не будет найдена функция-обработчик. Обработка действий в AMIS происходит посредством проверки каждого компонента на наличие метода handleAction, который может обрабатывать соответствующее действие actionType. Если компонент не может обработать действие, он передает его на обработку родительскому компоненту через метод onAction.Если мы согласуем, что имя события, передаваемого вверх, будет совпадать с именем функции, то процесс всплытия событий можно рассматривать как процесс разбора имени функции в области видимости с лексическим синтаксисом. Разные уровни xui:import создаются в качестве различных областей видимости с лексическим синтаксисом, и мы всегда ищем соответствующую функцию в ближайшей области видимости. Если функция не найдена, поиск продолжается в родительской области видимости.## Упрощение GraphQL

GraphQL всегда требует указания списка возвращаемых полей. Однако для платформы с низким кодом наличие полей в форме можно определить на основе модели, поэтому мы можем автоматически предположить, какие поля необходимы на основе модели формы, без необходимости указания их вручную. Nop платформа добавила расширение для AMIS, что позволяет нам строить запросы GraphQL с помощью следующей синтаксической конструкции:

url: "@graphql:NopAuthUser__get/{@formSelection}?id=$id"

Для более подробного описания обратитесь к graphql-java.md.

Многоразовая интернационализация

JSON-формат AMIS легко читается и обрабатывается, поэтому многие операции по преобразованию структуры могут быть выполнены вне AMIS-фреймворка, на стороне сервера. В Nop платформе для JSON используется единая система замены строк i18n, которая определяет два способа:

1. Использование префикса для определения и замены всех значений, имеющих @i18n:.

2. Добавление соответствующего @i18n:key для каждого ключа, требующего интернационализации. Например,

   {
   label: "@i18n:common.batchDelete|Удаление пакета"
   }
   или
   {
   label: "Удаление пакета"
   "@i18n:label" : "common.batchDelete"
   }

Управление правами доступаNop платформа определяет атрибуты управления правами доступа, такие как xui:roles и xui:permissions. После получения JSON-данных страницы, система автоматически проверяет, соответствуют ли атрибуты управления правами доступа, и удаляет все узлы, которые не соответствуют требованиям. Этот процесс выполняется на уровне JSON-структуры и не требует специальных знаний о фронтенде.## Интеграция Vue-компонентов

Основа AMIS построена на технологии React, в то время как фронтенд Nop платформы основан на Vue3.0. Для удобной интеграции сторонних Vue-компонентов, Nop платформа предоставляет универсальный обертывающий компонент. В конфигурационных файлах AMIS мы можем использовать следующую конструкцию:

{
  "type": "vue-form-item",
  "vueComponent": "Имя Vue-компонента",
  "props": {
    атрибуты, передаваемые в Vue-компонент
  }
}

Сложные запросы GraphQL

api:{
  url: '@graphql:query($id:String){ NopAuthUser_get(id:$id){nickName}}',
  data: {
    id: "3"
  }
}

Запросы GraphQL обозначаются префиксом @graphql:, при этом необходимо использовать полный синтаксис GraphQL, а параметры должны быть указаны с типами. Атрибут data используется для передачи переменных запроса GraphQL.

Техническая поддержка

При возникновении проблем или обнаружении ошибок, пожалуйста, подайте запрос на Gitee Issues.

Группа WeChat

При добавлении в WeChat укажите: присоединиться к группе Nop платформы

Публичный аккаунт WeChat

При добавлении в WeChat укажите: подписаться на публичный аккаунт Nop платформы