webiobench.jl

using Interact, WebIO, Random

struct Item{NT}
    data::NT
end
Item(; kw...) = Item(values(kw))
Base.getproperty(x::Item, key::Symbol) = getfield(getfield(x, :data), key)

items = map(1:170) do i
    Item(
        name = randstring(),
        price = rand(1.0:0.5:200.0),
        rating = rand(1:5),
        image = "https://pics.onsizzle.com/mp-on-im-very-fast-im-like-forrest-gump-19157688.png"
    )
end

product_database = Observable(items)

function WebIO.render(item::Item)
    description = "price: $(item.price)"
    remove_but = button("🗑", className = "is-small")
    make_fav = button("favorite", className = "is-small")
    items = [description]
    img = dom"img"(
        attributes = Dict("src" => item.image),
        style = Dict(:width => "100px", :padding => "12px")
    )
    return node(
        :div,
        vbox(
            hbox(remove_but, make_fav),
            dom"div"(item.name),
            dom"div"(sprint(print, item.rating)),
            hbox(
                img,
                vbox(node.(:div, items))
            ),
        ),
        style = Dict(
            :borderWidth => "1px",
            :borderStyle => "solid",
            :padding => "12px",
            :width => "300px",
            :backgroundColor => "white"
        )
    )
end

benchmark() = (show(IOBuffer(), MIME"text/html"(), map(vbox, product_database)); nothing)

@time benchmark()