This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-08-26
Channels
- # announcements (1)
- # beginners (42)
- # biff (11)
- # calva (15)
- # cider (3)
- # clj-http-lite (3)
- # clojure (52)
- # clojure-europe (16)
- # clojure-nl (1)
- # clojure-norway (39)
- # clojure-uk (4)
- # clojurescript (52)
- # code-reviews (13)
- # conjure (1)
- # cursive (4)
- # data-science (1)
- # datomic (5)
- # emacs (6)
- # events (3)
- # graalvm (5)
- # hyperfiddle (7)
- # kaocha (14)
- # lsp (11)
- # malli (3)
- # nbb (13)
- # off-topic (87)
- # pathom (15)
- # polylith (23)
- # portal (5)
- # reitit (4)
- # shadow-cljs (110)
- # squint (114)
- # testing (1)
- # vim (13)
htmx and hyperscript look interesting. Does it provide SPA like functionality without being an SPA? How simple is it to swap out htmx/hyperscript for ClojureScript and re-frame? I saw in one of your videos you were using ClojureScript @foo.
Yeah, previous to January, Biff used cljs by default. > Does it provide SPA like functionality without being an SPA? Yep, pretty much. It's especially good for crud-type things. I also sometimes use drop-in JS components too, like a rich text editor, or multiselect component, etc. Then you can get some interactivity while still keeping all your application state in the DOM and coding it like a plain server-rendered app. As for switching to cljs and reframe--it shouldn't be any harder than adding them to a regular server-rendered app. Which is to say, it would take a bit of work to set it up since Biff no longer provides any cljs stuff out of the box, but the default htmx/hyperscript setup won't make that process any more difficult than it otherwise would've been. Hope that makes sense 🙂.
I might be interested to write a how-to guide for adding in cljs to a biff project, but it isn't too high priority--for the time being I'd rather try to see how far htmx can go. though if someone else were to write it I'd definitely link to it from the docs.
Cool. How do you handle reusable components using htmx?
Usually they're just functions that return hiccup (rum actually, to be specific). e.g. this https://github.com/jacobobryant/platypub/blob/master/src/com/platypub/ui.clj#L235. That file has a number of other components as well. I actually use htmx somewhat sparingly; I default to regular multi-page apps with form posts and redirects and such, and then only add in some htmx in cases when that's too limiting. I just mention this since I don't specifically have an example of a reusable component that uses htmx. But if I did it would be in the same style as the ones in that file. maybe have the component take an htmx rest endpoint as a parameter. For JS components, see https://github.com/jacobobryant/platypub/blob/master/src/com/platypub/feat/items.clj#L136, https://github.com/jacobobryant/platypub/blob/master/src/com/platypub/feat/items.clj#L98-L102, and https://github.com/jacobobryant/platypub/blob/master/resources/tinymce_init.jsfor an example of using a rich-text editor (tiny mce).
Ah, so you use htmx with hiccup, interesting.
Yeah. htmx doesn't do any rendering on its own. So it's not really a 1:1 replacement for e.g. React. It's more like... an extension for what you can do with HTTP, which allows you to write more interactive apps with whatever tools you were already using for server-side rendering/request handling.
(or to be more precise, it's an extension for the browser that allows it to use http in more ways)
HTMX and hyperscript are pretty capable, Here's a couple of examples of how they're being used in place of traditional SPA's. https://www.youtube.com/watch?v=zHoAwVcSLdE https://twitter.com/Telroshan/status/1482034786621394951?s=20
Server-side routing?
Yep, Java and Go respectively. Check out the HTMX showcase channel on discord; plenty of other examples there: https://htmx.org/discord