5
[Help] Designing a dynamic component service with HTMX (programming.dev)
submitted 18 hours ago by to c/webdev@programming.dev
6 comments fedilink hide all child comments
 

cross-posted from: https://programming.dev/post/54211132

Hi people. I'm creating a system using HTMX
It's a server using clj-kit, which renders "components" using hiccup and HTMX based on the requests.
A component generator basically. But it also has some JSON APIs which return pure data.

The details don't matter. It just exposes REST APIs, user calls REST API with their own custom params and get their custom component.

The goal is so this can be used for progressive rewrite and enhancement of legacy systems, and the components to be usable in multiple systems, reducing work.
In order for the user of the system to be able to use these components, they should also add HTMX to their client, and call the service. for example

<div hx-get="https://component.service/componentx?data-url=https%3A%2F%2Fdata.source%2Fdata" hx-trigger="load">

This is the architecture I thought of. Is this ok? This HTMX article on security says it's not ok to call HTMX with external sources. So what is the best way you suggest to create such system?

I'm halfway through it already, but I would like to hear what others have to say and your suggestions. Maybe HTMX isn't the right choice at all? I felt like it is.

Thank you.

you are viewing a single comment's thread
view the rest of the comments
[–] 1 point 13 hours ago (1 child)

If you expect end users to regularly generate components for endpoints neither you nor they control, I think htmx is a poor match for your use case. Can you generate a vanilla web component that uses fetch instead?

  • permalink
  • fedilink
  • source
  • hideshow 2 child comments
    •
  • [–] [S] 1 point 10 hours ago (1 child)

    I think I should clarify: This isn't a public library (yet). It's a system I'm creating in our company for usage within our products.

    I thought about web components and actually created a few. But this hypermedia approach with HTMX is much simpler to develop and maintain, and since some of the components are very heavy, the server side rendering takes load off of clients and makes complex renderings possible.

    Can you elaborate why do you think HTMX doesn't fit this usage? With webcomponents, the flow will be like this:

    1. Client fetch data from source
    2. Client render the data within tge component

    With this hypermedia approach the flow looks like this

    1. The client requests component with data from source from server
    2. Server fetches the data, (possibly validates it)
    3. Server renders the component
    4. Server sends component to client
  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •
  • [–] 2 points 1 hour ago (1 child)

    For in your company and only for usage with your products, this approach seems very reasonable. The trouble with htmx is that it uses the dom to manage state, so if the endpoint you call serves a script tag that loads (say) a cryptominer, all your end users are gonna be mining crypto. It's hard to imagine a company product serving malicious content that hijacks the browser of their own users, so I thinks you're safe here.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •