# Why Pluto.jl run so much faster than GenieFramework.jl
**URL:** https://discourse.julialang.org/t/why-pluto-jl-run-so-much-faster-than-genieframework-jl/124234
**Category:** General Usage
**Tags:** genie, pluto
**Created:** [December 28, 2024, 9:24pm UTC](https://discourse.julialang.org/t/why-pluto-jl-run-so-much-faster-than-genieframework-jl/124234 "2024-12-28T21:24:23Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@garazha-ilya](https://discourse.julialang.org/u/garazha-ilya)
#### Post date: [December 28, 2024, 9:24pm UTC](https://discourse.julialang.org/t/why-pluto-jl-run-so-much-faster-than-genieframework-jl/124234/1 "2024-12-28T21:24:23Z")
I have a gauge animation with Plotly in Pluto and GenieFramework.
But Pluto plots and tracks slider incredibly faster. Can someone help me with optimizations with Genie?
Or explain, why it is fundamentally impossible.
[Genie animation:](https://github.com/garazha-ilya/EngeeDocs/blob/main/Pluto/slider_genie_plotly.gif)
[Pluto animation:](https://github.com/garazha-ilya/EngeeDocs/blob/main/Pluto/slider_plotly.gif)
Pluto code is [here](https://github.com/garazha-ilya/EngeeDocs/blob/main/Pluto/plotly.jl)
Genie app.jl is [here](https://github.com/garazha-ilya/EngeeDocs/blob/main/Pluto/app.jl)
> **app.jl code**
>
> ```julia
> using GenieFramework, PlotlyBase
> using StippleUI
>
> @genietools
>
> trace = indicator(
> mode="gauge+number+delta",
> value=tx[1],
> domain=attr(x=[0, 1], y=[0, 1]),
> title=attr(text="Ток якоря", font=attr(size=24)),
> gauge=attr(
> axis=attr(range=[0, 100], tickwidth=1, tickcolor="darkblue", dtick=10, tickfont=attr(size=18)),
> bar=attr(color="darkblue"),
> bgcolor="white",
> borderwidth=2,
> bordercolor="gray",
> steps=[
> attr(range=[0, 75], color="lightgreen"),
> attr(range=[75, 90], color="yellow"),
> attr(range=[90, 100], color="red")],
> threshold=attr(
> line=attr(color="pink", width=4),
> thickness=0.75,
> value=99
> )
> )
> )
> layout = PlotlyBase.Layout(paper_bgcolor="lavender", font=attr(color="darkblue", family="Arial"))
>
> @app begin
> @in x = 0.0
> @out plot_data = [trace]
> @out plot_layout = layout
> @onchange x begin
> plot_data = [indicator(
> mode="gauge+number+delta",
> value=x,
> domain=attr(x=[0, 1], y=[0, 1]),
> title=attr(text="Ток якоря", font=attr(size=24)),
> gauge=attr(
> axis=attr(range=[0, 100], tickwidth=1, tickcolor="darkblue", dtick=10, tickfont=attr(size=18)),
> bar=attr(color="darkblue"),
> bgcolor="white",
> borderwidth=2,
> bordercolor="gray",
> steps=[
> attr(range=[0, 75], color="lightgreen"),
> attr(range=[75, 90], color="yellow"),
> attr(range=[90, 100], color="red")],
> threshold=attr(
> line=attr(color="pink", width=4),
> thickness=0.75,
> value=99
> )
> )
> )]
> end
> end
>
> function ui()
> [row(column(slider(1:1:100, :x), size=1)),
> row(plot(:plot_data, :plot_layout))]
> end
>
> @page("/", ui)
>
> ```
---
### Author:  [@Cinzia\_Genie](https://discourse.julialang.org/u/Cinzia_Genie)
#### Post date: [December 28, 2024, 10:40pm UTC](https://discourse.julialang.org/t/why-pluto-jl-run-so-much-faster-than-genieframework-jl/124234/2 "2024-12-28T22:40:02Z")
@garazha-ilya I highly recommend joining the Genie community on Discord and sharing your question on the help forum there. Here’s the link to join: [Genie Community](https://discord.com/invite/9zyZbD6J7H)
---
### Author:  [@garazha-ilya](https://discourse.julialang.org/u/garazha-ilya)
#### Post date: [December 29, 2024, 5:21pm UTC](https://discourse.julialang.org/t/why-pluto-jl-run-so-much-faster-than-genieframework-jl/124234/3 "2024-12-29T17:21:32Z")
Not relevant comment:
In some countries, such as Russia, Discord is blocked ☹ . I truly appreciate your concern and willingness to help, but I would prefer to receive an answer here, for obvious reasons.
---
### Author:  [@Pere](https://discourse.julialang.org/u/Pere)
#### Post date: [December 30, 2024, 5:33pm UTC](https://discourse.julialang.org/t/why-pluto-jl-run-so-much-faster-than-genieframework-jl/124234/4 "2024-12-30T17:33:30Z")
I’m not sure why, but the slider only sends a value update when it stops moving. I’ve looked through the UI component docs (Quasar framework) and I don’t think there’s a way to change this behavior.
---
### Author:  [@kevbonham](https://discourse.julialang.org/u/kevbonham)
#### Post date: [December 30, 2024, 6:42pm UTC](https://discourse.julialang.org/t/why-pluto-jl-run-so-much-faster-than-genieframework-jl/124234/5 "2024-12-30T18:42:49Z")
> [@garazha-ilya](#):
>
> Not relevant comment
Seems totally relevant to me. You shouldn’t have to jump through hoops and possibly evade the law to access help. Maybe someone can point people from the discord to here (if that hasn’t already been done)?
---
### Author:  [@Cinzia\_Genie](https://discourse.julialang.org/u/Cinzia_Genie)
#### Post date: [January 2, 2025, 9:58am UTC](https://discourse.julialang.org/t/why-pluto-jl-run-so-much-faster-than-genieframework-jl/124234/6 "2025-01-02T09:58:37Z")
Thanks Kevin. @garazha-ilya joined our Discord and received support already.
---
### Author:  [@sdanisch](https://discourse.julialang.org/u/sdanisch)
#### Post date: [January 2, 2025, 1:30pm UTC](https://discourse.julialang.org/t/why-pluto-jl-run-so-much-faster-than-genieframework-jl/124234/7 "2025-01-02T13:30:53Z")
[Bonito](https://simondanisch.github.io/Bonito.jl/stable/) may do what you need:
```julia
using PlotlyLight, Bonito
import PlotlyLight as PL
attr(; kw...) = values(kw)
const Plotly = Bonito.Asset(PL.plotly.url)
struct PPlot
div
plot
end
function Bonito.jsrender(session::Session, pplot::PPlot)
# Pretty much copied from the PlotlyLight source to create the JS + div for creating the plot:
plot = pplot.plot
src = js"""
Plotly.newPlot($(pplot.div), $(plot.data), $(plot.layout), $(plot.config))
"""
return Bonito.jsrender(session, DOM.div(Plotly, pplot.div, src))
end
app = App() do s::Session
slider = Bonito.StylableSlider(0:100)
div = DOM.div(style="width: 600px;height: 300px;")
p = plot(
type="indicator",
mode="gauge+number+delta",
value=slider.value[],
domain=attr(x=[0, 1], y=[0, 1]),
title=attr(text="Ток якоря", font=attr(size=24)),
gauge=attr(
axis=attr(range=[0, 100], tickwidth=1, tickcolor="darkblue", dtick=10, tickfont=attr(size=18)),
bar=attr(color="darkblue"),
bgcolor="white",
borderwidth=2,
bordercolor="gray",
steps=[
attr(range=[0, 75], color="lightgreen"),
attr(range=[75, 90], color="yellow"),
attr(range=[90, 100], color="red")],
threshold=attr(
line=attr(color="pink", width=4),
thickness=0.75,
value=99
)
),
layout=(paper_bgcolor="lavender", font=attr(color="darkblue", family="Arial"))
)
pplot = PPlot(div, p)
p = onjs(s, slider.value, js"""(x) => {
Plotly.restyle($div, {value: x});
}
""")
Card(DOM.div(slider, Centered(pplot)))
end
```
Maybe not as elegant since Plotly isn’t supported directly, but should be pretty efficient 🙂
Would be nice to see your current genie solution and how it compares to the Bonito solution!
---
### Author:  [@garazha-ilya](https://discourse.julialang.org/u/garazha-ilya)
#### Post date: [January 3, 2025, 12:35pm UTC](https://discourse.julialang.org/t/why-pluto-jl-run-so-much-faster-than-genieframework-jl/124234/8 "2025-01-03T12:35:32Z")
Thank you very much!
It’s not a Genie, but it works great! Thanks a lot for the code!