Создание UI модуля для Tarantool Cartridge

Введение

Недавно мне необходимо было разобраться в теме создания произвольной web формочки и добавления ее в админку фреймворка Tarantool Cartridge.

Поиски информации по этой теме ни к чему не привели, поэтому я решил написать мини маунал своих изысканий в этом блоге и тем самым продолжить серию статей про Tarantool(1, 2, 3).

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

Описание архитектуры модуля

UI модуль состоит из JS и Lua частей.

Lua часть используется для создания rock пакета с модулем и отвечает за регистрацию js модуля. JS часть основана на React и компилируется в комплекте с lua.

Далее рассмотрим каждую часть более подробно.

JS часть

Выглядит следующим образом:

import * as React from 'react';
import { IconEmptyData, PageSection, Text } from '@tarantool.io/ui-kit';

const PAGE_NAME = 'hello_world'

class Hello extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <PageSection>
                <Text variant="h1">Hello world</Text>
            </PageSection>
        );
    }
}

window.tarantool_enterprise_core.register(
  PAGE_NAME,
  [{
    label: 'Hello world',
    path: `/${PAGE_NAME}`,
    icon: <IconEmptyData />
  }],
  Hello,
  'react'
);


if (window.tarantool_enterprise_core.install) {
  window.tarantool_enterprise_core.install();
}

Сначала создается React, который выводит строку Hello world на экран. В этом компоненте в render() используются готовые комопненты из набора Tarantool UI Components.

Далее этот компонет, добавляется неймспейс ui ядра на фронте c помощью функции window.tarantool_enterprise_core.register (или window.tarantool_enterprise_core.registerModule), после чего он становится виден в боковом меню, с заданой иконкой из набора ui компонент.

В конце происходит рендер всего React приложения с помощью window.tarantool_enterprise_core.install().

Компоненты могут быть созданы как на JavaScript, так и на TypeScript.

Для сборки ui модуля нужно выполнить команды:

tarantoolctl rocks install frontend-core
tarantool -l pack-front - build/bundle.json build/bundle.lua

Или же, если вы используете webpack, можно использовать lua-bundler-webpack-plugin, который сгенерит вам готовый lua файл

Lua часть

Выглядит следующим образом:

package.loaded['hello.bundle'] = nil

local bundle = require('hello.bundle')
local front = require('frontend-core')

local VERSION = 'scm-1'
local NAMESPACE = hello_world'

local function init()
    if bundle and front then
        front.add(NAMESPACE, bundle)
    end
end

return {
    init = init,
    VERSION = VERSION,
}

В данном коде при вызове функции init из кода приложения, произойдет регистрация собранного бандла с js частью.

Функции front.add() регистрирует созданный бандл в таблице неймспейсов, c помощью этой таблицы формируются script тэги библиотек которые будут подгружаться на главной странице админки.

Кроме это в lua файле вы можете указать какие-то дополнительные функции (и эндопоинты) нужные вам на бэкэнде.

Демо модуль

Для демострации работы этого приложени я сделал небольшой Cartridge UI Kit, в котором создал простенькую Hello world страничку.

Чтобы посмотреть его необходимо загрузить реаозиторий и установить зависимости:

git clone https://github.com/kuznetsovin/tarantool-modulekit/tree/cartridge-uikit
cd cartridge-uikit
npm i

Далее для запуска локального сервера разработки нужно запустить:

npm run start

После запуска можно перейти по адресу localhost:3000 и увидеть страницу:

демо страница

Для сборки пакета нужно запустить

npm run build

Для установки в cartridge приложение можно использовать команду:

tarantoolctl rocks make --chdir <folder>

где <folder> - это путь до папки с модулем.

В cartridge приложении в нужной роли достаточно добавить вызов require('uikit').init(), где uikit - имя вашего модуля c UI.

Заключение

Созданное в процессе создания статьи демо приложение можно использовать как шаблон для вашего ui модуля, для этого достаточно заменить вхождения uikit на название вашего модуля, такой подход съэкономит вам много времене на настройку среды c webpack и прочими зависимостями и позволит быстро перейти к бизнес части модуля.

Кроме того данный шаблон настроен на поддержку React компонентов написанных на TypeScript, вместо JS.

Ссылка на презентацию

Используемые ссылки

 
comments powered by Disqus