# Recommendations for a Web App for Noob

**URL:** <https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931>\
**Category:** Web Stack\
**Tags:** question, recommendations, webapps\
**Created:** [October 5, 2018, 2:45pm UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931 "2018-10-05T14:45:56Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![rickhg12hs](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rickhg12hs/32/5926_2.png) [@rickhg12hs](https://discourse.julialang.org/u/rickhg12hs)\
**Post date:** [October 5, 2018, 2:45pm UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/1 "2018-10-05T14:45:56Z")

</div>

I’d like to make a very basic WebApp running locally where the user can see some basic text/graphics, select various options, toggles, items from a list, input text, select files, set parameters, etc. Underneath (the guts) would be a bunch of calculation based on user input input and then a display (text, tables, graphics).

I’ve never made a WebApp before. I’d like to use Julia for the calculation guts. Which packages do you recommend? What should my workflow be? Is there a tutorial that will take me from zero to useful?

Thanks for your recommendations.

---

<div class="post-metadata">

**Author:** ![ChrisRackauckas](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/chrisrackauckas/32/77_2.png) [@ChrisRackauckas](https://discourse.julialang.org/u/ChrisRackauckas)\
**Post date:** [October 5, 2018, 2:50pm UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/2 "2018-10-05T14:50:22Z")

</div>

I’d highly recommend giving Interact.jl a try.

---

<div class="post-metadata">

**Author:** ![rickhg12hs](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rickhg12hs/32/5926_2.png) [@rickhg12hs](https://discourse.julialang.org/u/rickhg12hs)\
**Post date:** [October 5, 2018, 2:55pm UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/3 "2018-10-05T14:55:02Z")

</div>

I like [Interact.jl](https://github.com/JuliaGizmos/Interact.jl), but I’m not sure that a Jupyter Notebook will be acceptable. Can `Interact.jl` be used with a plain web interface somehow?

---

<div class="post-metadata">

**Author:** ![jwu](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jwu/32/3775_2.png) [@jwu](https://discourse.julialang.org/u/jwu)\
**Post date:** [October 5, 2018, 3:07pm UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/4 "2018-10-05T15:07:36Z")

</div>

The documentation said it could be used on other places, I have never tried that though.

```julia
Interact allows to create small GUIs in Julia based on web technology. These GUIs can be deployed in jupyter notebooks, in the Juno IDE plot pane, in an Electron window or in the browser.

```

[http://juliagizmos.github.io/Interact.jl/latest/](http://juliagizmos.github.io/Interact.jl/latest/)

---

<div class="post-metadata">

**Author:** ![ChrisRackauckas](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/chrisrackauckas/32/77_2.png) [@ChrisRackauckas](https://discourse.julialang.org/u/ChrisRackauckas)\
**Post date:** [October 5, 2018, 3:12pm UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/5 "2018-10-05T15:12:34Z")

</div>

> [@rickhg12hs](#):
>
> Can `Interact.jl` be used with a plain web interface somehow?

Yes. If you use it from a Jupyter notebook it makes it in the notebook, but if you use it outside a Jupyter notebook then it makes a standard web interface. This makes it really easy to create and debug from standard Julia development tools!

---

<div class="post-metadata">

**Author:** ![rickhg12hs](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rickhg12hs/32/5926_2.png) [@rickhg12hs](https://discourse.julialang.org/u/rickhg12hs)\
**Post date:** [October 5, 2018, 3:20pm UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/6 "2018-10-05T15:20:00Z")

</div>

Thanks! I’ll give the tutorial a try and see how it goes.

---

<div class="post-metadata">

**Author:** ![amellnik](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/amellnik/32/137_2.png) [@amellnik](https://discourse.julialang.org/u/amellnik)\
**Post date:** [October 5, 2018, 5:58pm UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/7 "2018-10-05T17:58:41Z")

</div>

If you run into the limitations of what Interact can do on the front end, you can always build that side using traditional (read: javascript) tools and then do the calculations with a Julia API.

---

<div class="post-metadata">

**Author:** ![rickhg12hs](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rickhg12hs/32/5926_2.png) [@rickhg12hs](https://discourse.julialang.org/u/rickhg12hs)\
**Post date:** [October 5, 2018, 6:22pm UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/8 "2018-10-05T18:22:48Z")

</div>

I hope I can stay within Julia to build the WebApp. I know zero Java/JavaScript/PHP/Rails/everything.

---

<div class="post-metadata">

**Author:** ![aalexandersson](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aalexandersson/32/2927_2.png) [@aalexandersson](https://discourse.julialang.org/u/aalexandersson)\
**Post date:** [October 6, 2018, 12:41am UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/9 "2018-10-06T00:41:21Z")

</div>

Also consider the Julia web framework [Genie](https://github.com/essenciary/Genie.jl). I recommend to be patient though, say for 6 months, since this is work in progress.

---

<div class="post-metadata">

**Author:** ![Raf](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/raf/32/3383_2.png) [@Raf](https://discourse.julialang.org/u/Raf)\
**Post date:** [October 6, 2018, 6:55am UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/10 "2018-10-06T06:55:53Z")

</div>

You really want Interact.jl to make the interface and Blink.jl for a standalone browser window. I’m using this combo right now, doing quite a few of the things you mention and plotting the output live.

You can also serve the same Interact ui on the web using Mux.jl and an extra two or three lines of code.

---

<div class="post-metadata">

**Author:** ![rickhg12hs](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rickhg12hs/32/5926_2.png) [@rickhg12hs](https://discourse.julialang.org/u/rickhg12hs)\
**Post date:** [October 6, 2018, 10:42am UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/11 "2018-10-06T10:42:53Z")

</div>

I watched a presentation about `Genie.jl` on YouTube and I found it super capable and also super complicated for a noob.

---

<div class="post-metadata">

**Author:** ![rickhg12hs](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rickhg12hs/32/5926_2.png) [@rickhg12hs](https://discourse.julialang.org/u/rickhg12hs)\
**Post date:** [October 6, 2018, 10:44am UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/12 "2018-10-06T10:44:09Z")

</div>

Yes, this looks very appealing!

---

<div class="post-metadata">

**Author:** ![aalexandersson](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/aalexandersson/32/2927_2.png) [@aalexandersson](https://discourse.julialang.org/u/aalexandersson)\
**Post date:** [October 6, 2018, 1:23pm UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/13 "2018-10-06T13:23:28Z")

</div>

Yes, I agree. [Genie integration with Interact](https://github.com/essenciary/Genie.jl/issues/43) or similar is required to make Genie more newbie friendly similar to R Shiny or Python Dash.

I am curious about what Raf proposed: “Interact + Blink/Mux”. It sounds beginner friendly but documentation with examples is super important.

---

<div class="post-metadata">

**Author:** ![piever](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/piever/32/1815_2.png) [@piever](https://discourse.julialang.org/u/piever)\
**Post date:** [October 7, 2018, 6:58pm UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/14 "2018-10-07T18:58:43Z")

</div>

> [@rickhg12hs](#):
>
> Can `Interact.jl` be used with a plain web interface somehow?

It actually is quite simple. Let’s say you create an Interact app with either [custom widgets](https://juliagizmos.github.io/Interact.jl/latest/custom_widgets.html) or using the `@manipulate` macro (which is just a shortcut for a specific case of custom widget). For example:

```julia
ui = @manipulate for i = 1:10, j = "test"
   j^i
end

```

If you are in the notebook, this appears inline already and you are good to go. If you are doing this from the REPL, you can serve it via Blink:

```julia
using Blink
w = Window()
body!(w, ui)

```

or in a browser via Mux:

```julia
using Mux
WebIO.webio_serve(page("/", req -> ui))

```

(there’s discussion on a simpler API [here](https://github.com/JuliaGizmos/WebIO.jl/issues/189)).

This should all be documented [here](https://juliagizmos.github.io/Interact.jl/latest/deploying.html). The only bit I’m not sure about is the Juno integration as a few things changed there.

---

<div class="post-metadata">

**Author:** ![piever](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/piever/32/1815_2.png) [@piever](https://discourse.julialang.org/u/piever)\
**Post date:** [October 7, 2018, 7:04pm UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/15 "2018-10-07T19:04:17Z")

</div>

> [@amellnik](#):
>
> If you run into the limitations of what Interact can do on the front end, you can always build that side using traditional (read: javascript) tools and then do the calculations with a Julia API.

That’s also an interesting approach. In principle Interact allows more or less arbitrary HTML + JavaScript using WebIO (you can construct arbitrary DOM nodes with say `node(:div, ...)` and run javascript with `onimport`) but at some point it may be simpler to do it in HTML + javascript directly. Do you have a writeup of how to make a javascript+julia webapp like this? I also wonder whether that could benefit from some of the Interact stack, for example [Knockout](https://github.com/JuliaGizmos/Knockout.jl) allows two-way binding between javascript-knockout observables and julia observables, so maybe one could code the whole thing in javascript and share the data with Julia via these observables.

---

<div class="post-metadata">

**Author:** ![amellnik](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/amellnik/32/137_2.png) [@amellnik](https://discourse.julialang.org/u/amellnik)\
**Post date:** [October 9, 2018, 2:27am UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/16 "2018-10-09T02:27:31Z")

</div>

I’m writing Julia-based APIs with [Joseki.jl](https://github.com/amellnik/Joseki.jl) and [this project](https://github.com/amellnik/Julia-to-JS) is an example of a front end written in Angular (my personal favorite, but Vue and React are also both options) and two different APIs written in Julia. [DiffEqOnline](http://app.juliadiffeq.org/ode;settings=eyJkaWZmRXFUZXh0IjoiZHggPSBzKih5LXgpXG5keSA9IHgqKHIteikgLSB5XG5keiA9IHgqeSAtIGIqeiIsInBhcmFtZXRlcnMiOiJzPT4xMC4wLCByPT4yOC4wLCBiPT4yLjY2IiwidGltZVNwYW4iOlswLDUwXSwiaW5pdGlhbENvbmRpdGlvbnMiOiIxLCAxLCAxIiwic29sdmVyIjoiVHNpdDUgIiwidmFycyI6Iig6eCwgOnksIDp6KSIsInRpdGxlIjoiVGhlIExvcmVueiBFcXVhdGlvbnMifQ%3D%3D) is another older example of a traditional front end sitting on top of a Julia API.

---

<div class="post-metadata">

**Author:** ![Gibran\_Peniche](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/gibran_peniche/32/12399_2.png) [@Gibran\_Peniche](https://discourse.julialang.org/u/Gibran_Peniche)\
**Post date:** [January 21, 2020, 5:01am UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/17 "2020-01-21T05:01:28Z")

</div>

Hi Raf! I’m also trying to develop some web app with julia. Do you have any examples or projects on GitHub I could checkout to see how you’re using Interact and Blink? I would really really appreciate it.

Regards!

---

<div class="post-metadata">

**Author:** ![Raf](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/raf/32/3383_2.png) [@Raf](https://discourse.julialang.org/u/Raf)\
**Post date:** [January 21, 2020, 5:28am UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/18 "2020-01-21T05:28:58Z")

</div>

We have this soon to be published package for DynamicGrids.jl models.  
[https://github.com/cesaraustralia/DynamicGridsInteract.jl](https://github.com/cesaraustralia/DynamicGridsInteract.jl)

It has a few bugs righ not but you can see how we build the interfaces for atom, electron and served to the web.

There are also a few manual model-fitting interfaces in GrowthMaps.jl:  
[https://github.com/cesaraustralia/GrowthMaps.jl/blob/master/src/fit.jl](https://github.com/cesaraustralia/GrowthMaps.jl/blob/master/src/fit.jl)

Were you can manually fit models to maps or plotted curves.

The thing you may find confusing is that everything is general - there are no specific sliders being generated in these packages, instead the interfaces are for arbitrary composed models. We use Flatten.jl and FieldMetadata.jl to flatten composite objects down to tuples that you can make sliders from.

---

<div class="post-metadata">

**Author:** ![Gibran\_Peniche](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/gibran_peniche/32/12399_2.png) [@Gibran\_Peniche](https://discourse.julialang.org/u/Gibran_Peniche)\
**Post date:** [January 21, 2020, 1:19pm UTC](https://discourse.julialang.org/t/recommendations-for-a-web-app-for-noob/15931/19 "2020-01-21T13:19:24Z")

</div>

Thanks a lot! I´ll check it out