Создание простого веб-приложения с использованием GenieFramework

В данной статье будет рассмотрено создание простого веб-приложения с помощью GenieFramework. Приложение будет включать текстовый блок, поле ввода для имени пользователя и ползунок для указания возраста. Будет подробно описана структура приложения, включая части @app, ui и @page. Особое внимание будет уделено реактивности и различиям между внутренними (@in) и внешними (@out) переменными. В конце будет представлен полный код с комментариями, который должен быть сохранен в файле app.jl.

Что такое GenieFramework?

GenieFramework представляет собой инструмент для разработки веб-приложений, объединяющий серверную часть (Genie) и реактивный интерфейс через Stipple.jl. Stipple.jl обеспечивает реактивность и позволяет описывать интерфейс с использованием чистого кода на Julia, а не HTML. Его часть, StippleUI, предоставляет удобные компоненты для построения интерфейса, хотя в данном примере используются базовые функции Stipple.

В рамках ознакомления с GenieFramework, приложение будет простым: пользователю будет предложено ввести имя и выбрать возраст, используя ползунок, а отображаемый текст будет обновляться в зависимости от этих данных.

Структура веб-приложения

Приложение на базе GenieFramework состоит из трёх основных частей, соответствующих паттерну MVC:

Часть @app
Здесь определяется модель данных. В этой части задаются реактивные переменные, связывающие интерфейс и серверную логику. Переменные делятся на два типа:
- Внутренние (@in): используются для получения данных от пользователя. Они изменяются при взаимодействии с интерфейсом (например, при вводе текста или перемещении ползунка) и передают информацию от интерфейса к серверу.
- Внешние (@out): предназначены для передачи данных из серверной части в интерфейс. Они обновляют отображаемые элементы (например, текст) и отражают результат обработки данных. Основное различие между @in и @out — направление потока: @in принимает ввод, а @out выводит результат.
Часть ui
Здесь описывается интерфейс с использованием функций Stipple.jl, таких как textfield и slider. Интерфейс задается через код на Julia, но также можно делать это и используя собственный html-шаблон страницы.
Часть @page
Определяется маршрут приложения (URL-адрес), по которому будет доступен интерфейс. Эта часть связывает модель данных с функцией ui.

Реактивность в Stipple

Реактивность, обеспечиваемая Stipple.jl, позволяет автоматически обновлять интерфейс при изменении данных и наоборот. Переменные @in реагируют на действия пользователя, а переменные @out обновляют отображаемую информацию. Связь между ними устанавливается через обработчики, например, такие как @onchange.

Код приложения

Этот код должен быть сохранен в файле app.jl, который является стандартным именем для основного файла приложения в GenieFramework. После создания файла его можно запустить через команду engee.genie.start("путь/к/файлу/app.jl")

using GenieFramework
using Stipple

# Определяется модель данных с помощью макроса @app
@app begin
    # Внутренние переменные (@in) — данные, поступающие от пользователя
    @in user_name = "Ваше имя"      # Начальное значение поля ввода
    @in age = 50                    # Начальное значение ползунка возраста (0–100)

    # Внешние переменные (@out) — данные, отправляемые в интерфейс
    @out display_text = "уважаемый пользователь"  # Текст для отображения

    # Обработчик событий: обновляется display_text при изменении входных данных
    @onchange user_name, age begin
        display_text = """$(user_name)!
        Ваш возраст, согласно ползунку: $(age)"""
    end
end

# Определяется пользовательский интерфейс
function ui()
    [
        # Текстовая строка с использованием переменной display_text
        h2("Здравствуйте, {{display_text}}"),

        # Поле ввода, связанное с переменной user_name
        cell([textfield("Введите ваше имя:", :user_name),

        # Ползунок, связанный с переменной age
        slider(0:100, :age, label="")])
    ]
end

# Задается маршрут для страницы
@page("/", ui)

Разбор кода

Импорт библиотек
Подключаются GenieFramework для работы с приложением и Stipple для реактивности и интерфейса.
Модель данных (@app)
- @in user_name — строка, принимающая имя пользователя (начальное значение: "Ваше имя").
- @in age — число, получаемое от ползунка (начальное значение: 50).
- @out display_text — строка, отправляемая в интерфейс (начальное значение: "уважаемый пользователь").
- @onchange — обработчик, обновляющий display_text при изменении user_name или age. Текст формируется с использованием многострочной строки.
Интерфейс (ui)
- h2("Здравствуйте, {{display_text}}") — заголовок второго уровня, отображающий значение display_text.
- cell([...]) — контейнер, объединяющий поле ввода и ползунок.
- textfield — поле ввода, связанное с user_name.
- slider — ползунок с диапазоном 0–100, связанный с age.
Маршрут (@page)
Интерфейс становится доступным по адресу, возвращаемому функцией engee.genie.start

Какой будет результат?

При запуске отображается текст "Здравствуйте, уважаемый пользователь!", поле ввода с "Ваше имя" и ползунок на значении 50. Ввод имени или изменение положения ползунка приводит к обновлению display_text, что сразу отражается в заголовке. Например, при вводе "Анна" и значении ползунка 25 текст станет: "Здравствуйте, Анна! Ваш возраст, согласно ползунку: 25".

Как запустить приложение?

Перейдите в папку с текушим скриптом и выполните ячейку ниже.

В результате у вас должно открыться окно с веб-приложением.

Если оно не открылось в отдельной вкладке, нажмите на ссылку из ячейки вывода.

match(r"'(https?://[^']+)'" позволяет найти ссылку, исходя из вывода работа функции engee.genie.start, используя регулярные выражения
Markdown.parse используется для отображения "кликабельных" ссылок в ячейке вывода.

using Markdown
cd(@__DIR__)

app_url = string(engee.genie.start(string(@__DIR__,"/app.jl")))

Markdown.parse(match(r"'(https?://[^']+)'",app_url)[1])

Заключение

Было создано простое веб-приложение с использованием GenieFramework. Были продемонстрированы модель данных (@app), интерфейс (ui) и маршрутизация (@page), а также различия между @in (входные данные от пользователя) и @out (выходные данные для интерфейса).