Last time I asked this question, it seems people use either https://github.com/JulianBirch/cljs-ajax or https://github.com/lambdaisland/fetch.

fetch works great, thanks for the recommendation..

also, how does async handling typically work? I'm trying to use core.async:

(go (let [res (<! (fetch/get ""))]
      (pprint res)))

...but this is just giving me a ManytoManyChannel, not the actual request. #object[cljs.core.async.impl.channels.ManyToManyChannel]

I don’t use core.async so I wouldn’t know, sorry

do you use promesa?

Neither. In my apps I use re-frame-http-fx, which depends on cljs-ajax, and it handles http stuff more or less transparently. I just have to declare method, URI, parameters, etc. in a map and dispatch events in my app

When I do have to deal with async stuff from javascript libraries, I’ll use JS interop for promises directly

e.g.

(-> (function-returning-promise)
    (.then do-more-stuff)
    (.catch handle-error))

Agree with the above. Interop with promises is so straightforward, I struggle to find value-add of Promesa.

I really like kitchen-async. I thought it would annoy me, but it really doesn't.

I'm currently using fetch via interop with a very thin wrapper to simplify query params and also throwing errors automatically.

kitchen-async and promesa have big overlap fetch is mostly all you need nowadays

It has never really been a tool for minimal web UIs. It's a library for state management, and in your case it doesn't seem like there'll be any state to manage. If all you need to do is just two separate web pages available at different URLs, then you don't need any WUI library at all - you can just serve barebones HTML at corresponding routes with your web server.

That indeed makes sense. Still trying to find out the focus of different tools.

Creating HTML content and serving it are completely orthogonal tasks. You can write some HTML by hand just fine. Or use Selmer if you need templating functionality. Or any of the Hiccup libraries if you abhore HTML and prefer to work with Clojure vectors. Http-kit as a server is a reasonable choice. And Compojure is a reasonable routing library. For both, there are alternatives. But maybe you need neither. What exactly to use depends on what exactly you want to get. If it's two static routes that simply serve some pregenerated content, then you don't need anything apart from e.g. NGINX with some minimal config or a simple Python server (`python -m http.server`) with the right directory structure. If it's a single SPA that handles both those routes and changes the sketch depending on which route is active, without reloading the whole page, then the routing has to be handled on both the client and the server - might be easier to go with a Clojure web server then and share the routes info. In addition, you might want code reloading so when you change the CLJS code you see the changes immediately and don't need to reload the page. But maybe you already have it - if so, both of the above options should work with it.

But you already have a setup that servers you a single page with a single sketch, right? How does it work? Maybe you can turn it into a multi-page app with minimal code changes.

I think htmx may be a useful tool for something like this. Here’s an ehttps://github.com/prestancedesign/babashka-htmx-todoappthat’s a single babashka script.

The starting point for my work is the tutorial at https://www.bekk.christmas/post/2019/13/functional-generative-art-using-clojurescript, using figwheel.

My deps.edn:

{:deps  {org.clojure/clojure       {:mvn/version "1.10.0"}
         com.bhauman/figwheel-main {:mvn/version "0.2.0"}
         quil/quil                 {:mvn/version "3.0.0"}
         org.clojure/math.combinatorics {:mvn/version "0.1.6"}}
 :paths ["src" "resources" "target"]
}

My dev.cljs.edn:

{:main sketches.perlin_network}
;; {:main sketches.perlin_flow}
;; {:main sketches.circles}

And my src/sketches/ directory has 3 subdirectories: perlin_network, perlin_flow and circles. I comment/uncomment a line in dev.cljs.edn to change between the visuals (which are generated on-the-fly, so it is not pre-generated static content).

So it would be nice to have a central page on which I have a link to each of the sketches...

(To give you an idea of what is generated:

If you aren't in a hurry, later today or maybe tomorrow I can come up with something based on that guide as I've used quil myself, so it would be interesting to create a "framework" for multi-sketch web app. Although if you don't mind I'd prefer to use shadow-cljs instead of figwheel-main.

Thanks, @U2FRKM4TW I hadn't heard of shadow-cljs yet. A very minimal solution would be OK, and it is not time-critical, so go ahead 🙂

The index.html mentions

<body>
    <div id="sketch"></div>
    <script src="cljs-out/dev-main.js"></script>
  </body>

If I could get a handle on the cljs-out/dev-main.js? But I suppose that would be too hacky.

Nah, it should be an SPA - that would be most convenient IMO. Click a button/link and you're navigated to a different sketch while the previous one is paused, without being destroyed.

I just started a project using reagent + shadow-cljs + quil, and live reload works well. I'll upload a minimal example once I'm back at the home

Thanks @U7S5E44DB!

Got a (relatively) minimal example of interaction between reagent and quil: https://github.com/llacom/example-shadowcljs-quil-reagent/blob/master/src/llacom/quil_playground/core.cljs You can see it at https://llacom.net/quil-reagent/ I’m not sure if that’s exactly what you want, but it shows how to dynamically create quil sketches, you might be able to adapt it from there

Thanks for the code, @U7S5E44DB. Unfortunately, it's not completely what I'm looking for: I need a simple way of routing between different pages. For example:

I did come up with something, although I decided to be brave beyond reason and try to use shadow-grove as the UI library. If that doesn't repel you, I'll upload it somewhere.

Ah, I still have to figure out how to do hot code reloading without resetting any of the sketches.

So, state preservation ended up being a PITA given how opaque a sketch is. And there were some hiccups with p5.js and its way of handling canvases. Also I ended up using Reagent because shadow-grove was just making things way more complicated than I'd like for such a small project. Anyhow, here it is: https://github.com/p-himik/quil-sketchbook

@U2FRKM4TW Thanks Eugene. That looks like what I need. It seems like there was a lot of other code necessary to get this running... The core.cljs is extensive.

NP. At least it's relatively straightforward, apart from the canvas hiding thing, where p5.js doesn't behave in a nice way.

I think that the canvas hiding was one of the problems that I had as well. But now I can start working on the interesting code again 🙂

@U2FRKM4TW I've been able to recreate some of the plots that I generated in javascript earlier using the framework you set up. Thx. To make sure that I understand it correctly: every namespace (i.e. every sketch) is always loaded, right? Will that not give issues with memory consumption? (I notice that a js/console.log in sketch A will still show up even if I work on sketch B). Is there a way to "unmount" the sketches when not selected?

(Note: I'm used to working with javascript svelte, and as a framework it's pretty well set up)

I doubt p5.js+quil use so much memory that you'd notice even with a hundred of sketches, and yeah, sketches are on pause when they are inactive. But you should test it anyway if the page will have memory constraints. The whole point of this exercise, at least for me, was to create something that preserves the state when switching between sketches. With unmounting, the task would be significantly simpler.

But you wrote: > I notice that a js/console.log in sketch A will still show up even if I work on sketch B Do you mean its update function? Or just the initialization function? Because if it's the former, then something needs to be fixed. And of course, if you would still like to have an ability to unmount a sketch when it's inactive and initialize and mount it again when it's active, feel free to create an issue in the repo.

It's indeed in the draw function... There might be another small issue, though: sometimes one of the sketches does get redrawn constantly, even though there is a (q/no-loop) in the setup. Refreshing the page fixes this.

Hmm. Is there an easy way to reliably reproduce it?

I'm not sure, but it seems to happen when I opened a sketch that does loop, and then open one that doesn't. Not 100% sure, though.