Precompilable App Template for GenieFramework 3

[hhaensel]

Since we have a bunch of new features in GenieFramework 3 I want to discuss a possible new template with the following features

• precompilabe
• distributable as package
• startable by using MyGenie
• revisable handler functions without page reload, making AutoReload unnecessary
• faster startup times (for the template below 17 s => 12s)

Here it is (the first two functions would go into Stipple, of course)

# app.jl
cd(@__DIR__)

try
    using MyGenie
catch _
    using Pkg
    Pkg.develop(url = ".", name = "MyGenie")
    using MyGenie
end


# src/MyGenie.jl
module MyGenie

using Stipple, Stipple.ReactiveTools
using StippleUI
using Genie

import Stipple.Pages.Page, Genie.Router.Route

function Genie.route(p::Stipple.Pages.Page)
    p in Stipple.Pages._pages || push!(Stipple.Pages._pages, p)
    route(p.route)
end

macro precompile_route(url, view, App = nothing)
    quote
        route($url) do
            page(@init($App), $view) |> html
            view_fn = $view isa Function ? html! : html
            # without  `layout = nothing` the function is not compilable
            if $App === nothing
                view_fn($view; layout = nothing, context = @__MODULE__, model = @init())
            else
                view_fn($view; layout = nothing, context = @__MODULE__, model = @init($App))
            end
        end
    end |> esc
end

@app MyApp begin
    @in x = 1
    @in y = x + 1

    @onchange x on_x()
    @onchange x, y on_x_y()
end

@handler MyApp function on_x()
    @info "x changed"
end

@handler MyApp function on_x_y()
    @info "x or y changed to $x, $y"
end

ui() = [
    row("Hello World {{ x }}, {{ y }}")

    slider(1:10, :x)
    slider(11:20, :y)
]

ui2() = htmldiv([
    row("Hello World {{ x }}, {{ y }}")

    card([
        cardsection(slider(1:10, :x))
        cardsection(slider(11:20, :y))
    ])
])

p::Page = @page("/", ui, model = MyApp)

r::Route = route("/page2") do
    view = htmldiv(ui())
    html!(ui, context = @__MODULE__, layout = DEFAULT_LAYOUT(), model = @init(MyApp))
end


function __init__()
    route(p)
    route(r)

    up(open_browser = true)
end

@stipple_precompile begin
    @precompile_route("/", ui, MyApp)
    @precompile_route("/page2", ui2, MyApp)

    precompile_get("/")
    precompile_get("/page2")
end

end # module MyGenie

[hhaensel]

I have submitted branches hh-template for both Stipple and Genie in order to streamline the above approach.
With these the app template reads

module MyGenie

using Stipple, Stipple.ReactiveTools
using StippleUI
using Genie

@app MyApp begin
    @in x = 1
    @in y = x + 2

    @onchange x on_x()
    @onchange x, y on_x_y()
end

#   New alternative handler syntax for
# - keeping long handler functions outside of the model definition
# - redefining handlers without redefining the model

@handler MyApp function on_x()
    @info "x changed"
end

@handler MyApp function on_x_y()
    @info "x or y changed to $x, $y"
end

ui() = [
    row("Hello World {{ x }}, {{ y }}")

    slider(1:10, :x)
    slider(11:20, :y)
]

ui2() = cell(class = "st-module", [
    row(h1("Hello World {{ x }}, {{ y }}"))

    card(class = "q-my-lg", style = "max-width = 300px", [
        cardsection(slider(1:10, :x))
        cardsection(slider(11:20, :y))
    ])
])

@page("/", ui, model = MyApp)

@route("/page2", named = R"Page 3", begin
    model = @init(MyApp)
    html!(ui2; layout = DEFAULT_LAYOUT(), context = @__MODULE__, model)
end)

# ------------ optional initializing function  -------------
# required if module shall be loaded via `using MyGenie`

@init_function

# ----- alternative customizable initializing function -----

# function __init__()
#     @init_routes
# end

# ------------- optional precompilation statements -------------

@stipple_precompile begin
    @precompile_route("/", ui, MyApp)
    @precompile_route("/page2", ui2, MyApp)

    precompile_get("/")
    precompile_get("/page2")

    # add whatever should be precompiled
    # <...>
end

end # module MyGenie

[andreeco]

I would like to see a new generator that includes both Genie and Stipple, providing a template for a multipage app.

[hhaensel]

Then dev Stipple and go to the branch hh-template.
In there you find a folder "template" with a normal template "MyGenie" and a multipage template "MyGenieMulti". It's still in devlopment mode and works only, if both Genie and Stipple are installed from the hh-template branches:

pkg> add Stipple#hh-template Genie#hh-template