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 parts @app, ui and @page. Particular attention will be paid to reactivity and the differences between internal (@in) and external (@out) variables. At the end, the full 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) and 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 part, StippleUI, provides convenient components for building the interface, although this example uses 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 depending 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. Part @app
   The data model is defined here. This part defines the reactive variables that connect 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 — flow direction: @in accepts input, and @out outputs the result.

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

3. Part @page
   The application's route (URL) is being determined, 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 they respond to user actions, and variables @out update the displayed information. Communication between them is established through handlers, for example, such as @onchange.

Application Code¶

This code must be saved in a file. 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(путь/к/файлу/app.jl)

using GenieFramework
using Stipple

# The data model is defined using the @app macro
@app begin
    # Internal variables (@in) — data coming from the user
    @in user_name = Your name # Initial value of the input field
    @in age = 50 # The initial value of the age slider (0-100)

    # External variables (@out) — data sent to the interface
    @out display_text = dear user # Text to display

    # Event handler: display_text is updated when input data changes
    @onchange user_name, age begin
        display_text = $(user_name)!
        Ваш возраст, согласно ползунку: $(age)
    end
end

# The user interface is being defined
function ui()
[
# Text string using the display_text variable
        h2(Hello, {{display_text}}),

        # The input field associated with the user_name variable
        cell([textfield(Enter your name:, :user_name),

        # Slider associated with the age variable
        slider(0:100, :age, label=)])
    ]
end

# The route for the page is being set
@page(/, ui)

Code analysis¶

1. Import libraries
   Connecting GenieFramework to work with the application and Stipple for reactivity and 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 changing user_name or age. 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 be the result?¶

At startup, the text Hello, dear user!, an input field with Your name and a slider at 50 are displayed. Entering a name or changing the position of the slider causes 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 with the current script and execute the cell below.

As a result, a window with a web application should open.

If it doesn't open in a separate tab, click on the link from the output cell.

• match(r'(https?://[^']+)' allows you to find a link based on the output of the engee function.genie.start using regular expressions
• Markdown.parse it is used to display clickable links in the output cell.

Conclusion¶

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