Creating a simple web application using GenieFramework

This article will look at creating a simple web application using GenieFramework. The application will include a text block, an input field for the user’s name, and a slider for specifying the age. The structure of the application will be described in detail, including the components @app, ui and @page. Particular attention will be paid to reactivity and the differences between internal (@in) and external (@out) variables. Finally, the complete code with comments will be provided, which should be saved in a file: app.jl.

What is GenieFramework?

GenieFramework is a web application development tool that combines a backend (Genie) with a reactive interface via Stipple.jl. Stipple.jl provides reactivity and allows you to describe the interface using pure Julia code rather than HTML. Its component, StippleUI, provides convenient components for building the interface, although this example uses only the basic functions of Stipple.

As part of the introduction to GenieFramework, the application will be simple: the user will be asked to enter a name and select an age using a slider, and the displayed text will be updated based on this data.

Web Application Structure

The GenieFramework-based application consists of three main parts corresponding to the [MVC pattern] (https://ru.wikipedia.org/wiki/Model-View-Controller ):

1. ** @app**
   \ The data model is defined here. This part defines the reactive variables that link the interface and the server logic. Variables are divided into two types:

   • Internal (@in): used to receive data from the user. They change when interacting with the interface (for example, when entering text or moving a slider) and transmit information from the interface to the server.
   • External (@out): designed to transfer data from the server side to the interface. They update the displayed elements (for example, text) and reflect the result of data processing. The main difference between @in and @out is the direction of flow: @in accepts input, and @out outputs the result.

2. Part ui
   \ The interface utilising Stipple functions is described here.jl, such as textfield and slider. The interface is configured via Julia code, but you can also do this using your own HTML page template.

3. Part @page
   Defines the application route (URL) through which the interface will be accessible. This part connects the data model to the function ui.### : Reactivity in Stipple

The reactivity provided by Stipple.jl allows you to automatically update the interface when data changes, and vice versa. Variables @in respond to user actions, whilst variables @out update the displayed information. Communication between them is established via handlers, for example, such as @onchange.

It is not necessary to include this library; it is simply useful to know that its methods are used within the application.

Application Code

This code should be saved in a file named app.jl, which is the standard name for the main application file in GenieFramework. After creating the file, you can run it using the command ` `engee.genie.start("path/to/file/app.jl")

using GenieFramework

# Определяется модель данных с помощью макроса @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)

Code analysis

1. Import libraries
   Include GenieFramework to work with the application and Stipple for reactivity and the interface.

2. The data model (@app)

   • @in user_name — a string that accepts the user’s name (initial value: “Your name”).
   • @in age — the number received from the slider (initial value: 50).
   • @out display_text — a string sent to the interface (initial value: “dear user”).
   • @onchange — the handler that updates display_text when user_name or age changes. The text is formed using a multiline string.

3. Interface (ui)

   • h2("Здравствуйте, {{display_text}}") — the second-level header that displays the value display_text.
   • cell([...]) — a container that combines an input field and a slider.
   • textfield — the input field associated with user_name.
   • slider — a slider with a range of 0–100, associated with age.

4. Route (@page)
   The interface becomes available at the address returned by the function. engee.genie.start### What will the result be?

On startup, the text “Hello, dear user!”, an input field labelled “Your name” and a slider set to 50 are displayed. Entering a name or changing the slider’s position triggers an update. display_text, which is immediately reflected in the title. For example, if you enter “Anna” and the slider value is 25, the text will become: “Hello, Anna! Your age, according to the slider: 25”.

How do I launch the app?

Go to the folder containing the current script and run the cell below.

This should open a window displaying the web application.

Conclusion

A simple web application has been created using GenieFramework. We have demonstrated the data model (@app), the interface (ui) and routing (@page), as well as the differences between @in (user input) and @out (output data for the interface).