This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
I have lots of charts and elements, ala https://flowbite-admin-dashboard.vercel.app/.
My own app is beginning to look a lot like that. What is a good approach for this? A zillion routes, one for each of all the interactions? Should all the routes reside in app.clj, or distributed across files? If so, which files? I’m returning each thing from its own function in its own file components/thing.clj
. But maybe I should be thinking in terms of routes file(s) and handlers files.
I’m just looking for a sane strategy (if that’s the word). What approach would you use?
Any thoughts and strategies appreciated. I can extrapolate advice for one component/element to the rest.
Here’s the gh for that demo: https://github.com/themesberg/flowbite-admin-dashboard
PS - If anyone is interested in Flowbite I’ll just mention it’s free. The paid version has full app shells (navbar + sidebar + misc) into which you can drop the components. Plus the paid version has ‘blocks’ which are larger constructs made from the free things. But all the elements of the paid version are built from free primitives.
This is proved to be the least error prone html->hiccup converter: http://html2hiccup.buttercloud.com. The other converters leave off far more values for keys in produced hiccup. I get the widgets from https://flowbite.com/docs/getting-started/introduction/ (scroll down on the left sidebar) and convert them and it’s amazingly fun.
If most of the interactions are stuff that could be done frontend-only, I would probably just do that instead of using htmx for everything. You could either do https://biffweb.com/p/how-to-use-re-frame-with-biff/, or make standalone JS components in some way that you then plop into your htmx-driven pages.
As for the best approach to making standalone components: I'm not sure. It's on my list of things I'd like to investigate, once I'm finished doing stuff with pathom and secondary XTDB indexes. I think the ideal situation would be to use shadow cljs + react (maybe via reagent/rum etc, but not reframe) but wire things up so you have a bunch of standalone components throughout the page without the entire page needing to be rendered by React. Not sure if that'd end up being a good experience or not.
Another interesting, though non-clojure approach, would be to use svelte. Preact's another one, a potential advantage being that you can use it without having any compilation step. But realistically if your app is complex enough that you're thinking about how to make standalone JS components for it, then adding a compilation step probably isn't a big deal.
---
going the other direction, if you have decided it's best to do all these interactions through htmx, how do you organize a bunch of routes + handlers? First off I do prefer myself to keep routes + their handlers in the same file rather than doing a routes.clj
file or something. Other than that, a pattern that I've experimented with for making reusable htmx UI components is I'll create a function like (defn my-chart [opts] ...)
that returns some reitit routes. e.g. so you could do something like (def my-module {:routes ["/page-a/" {} (my-chart {:path-prefix "chart-1"}) (my-chart {:path-prefix "chart-2"})]})
. Then you can bundle a bunch of fine-grained htmx interactions together in a way that's easily reusable without having to make a zillion routes manually.
Just finally got back to Slack! Thanks for this thoughtful answer… I’ll try’n grok it all and experiment.