How do I decouple the trigger and effect of an action?

[alaendle]

First of all I would like to thank you for this great library, I really believe that something like this has been missing so far and I am a big advocate of such approaches to integrate server and client.

Maybe I don't fully understand the concept, but I'm trying to play around with the library to see if it's ready for use in more complex applications.

The real scenario is a bit more complicated, but to simplify it, I asked myself the following question: Let's say I display the server's time in a field and have a button elsewhere on the page that should update the time display.

Of course, I could put everything in a large HyperView, but then I'd transfer the entire view via WebSockets every time the time is updated.

Are there better options? Is my requirement incorrect/inconsistent? Is the library unsuitable for this?

(or in other words, take the example https://docs.hyperbole.live/counter - why transfer the buttons when only the counter changes?)

Thanks in advance for any feedback - also from other users.

[seanhess]

Hey there, welcome!

The short answer is that there is a function target that allows you to send messages for another HyperView. https://hackage.haskell.org/package/hyperbole-0.4.3/docs/Web-Hyperbole.html#g:29. You could have your timer HyperView somewhere. Let's say the view id is: data Timer = Timer. Then you could target it like this:

otherView :: View OtherView()
otherView = do
   button SomeOtherViewAction id "Do something"
   target Timer $ button UpdateTimer id "Update Timer" 

You lose a little type safety as the compiler can't prove the view exists, but it works. This is used in the contacts example.

We've discussed adding a serverside trigger, but don't have an implementation yet.

(take the example https://docs.hyperbole.live/counter - why transfer the buttons when only the counter changes?)

We transfer everything because it's efficient for the developer, not for the application performance. Writing a view as an idempotent function of the state is a really delightful abstraction for user interfaces. The server is stateless. These keep our application simple, prevent bugs, and free up brain cycles to think about our actual application.

To address the bigger question: I'd really encourage you not to worry about performance until it's actually a problem. Updating most of a page over a socket is pretty darn fast, and usually works fine. The most efficient approach would be to write the app in React of course, but we are making a tradeoff to avoid the pain of a separate client application.

I'm currenty working on some Javascript escape hatches that will solve some demanding use cases. See #92, #93, #94.

Finally, Hyperbole simply isn't appropriate for every application. Some demanding applications should still be written in javascript.

Hope that answers your question! I'll mark as closed, but feel free to continue the discussion here.

[seanhess]

Oh, also, while I have your attention, I'm collecting feedback on a major change to the view interface: seanhess/atomic-css#21

Like it? Do you have any thoughts or feedback?

[alaendle]

Thank you for this very detailed answer ❤. In short, yes, I was looking for something like target. And I can certainly solve the task I set for myself with it 🚀.

That said, I doo see one small issue. As far as I understand, target requires a hierarchy of participating HyperViews (but without being able to check whether a matching ID exists). However, since I have no external effect, I had to use an artificial HyperView as a wrapper, just to satisfy the type check for target. Therefore, perhaps one could consider making target a bit more flexible – with even less type safety?

To make it concrete, I need something like the following just to trigger an Action in one of the "ancillary" childs? Just to satisfy target? I haven't tried this, but what about communication between siblings?

data GlobalView = GlobalView
  deriving (Show, Read, ViewId)

instance HyperView GlobalView es where
  type Require GlobalView = [ChildView, AnotherChildView]
  data Action GlobalView = Absurd Void
    deriving (Show, Read, ViewAction)
  update (Absurd v) = absurd v

But these are just minor imperfections or perhaps marginal features of my very artificial scenario 🤷.
So please take my limited understanding into account when assessing this.

We transfer everything because it's efficient for the developer, not for the application performance.

I totally agree with you in general. However, why I'm looking for the escape hatch (now a.k.a. target) is I like to build a page with a totally static header that has buttons that are able to influence the real content of the page. Something like:

So putting the complete page in one huge HyperView seems unreasonable. It would mean to send multiple kilobytes for SVG for logos and lettering with every action. That's the reason why I was looking for a alternative. As it seems target is able to help me, but I still need to create a HyperView (like the GlobalView above) to make use of it.

The other reason why I what to have some kind of never touched DOM on/inside my views is the integration of 3rd party libraries. Think of a chart component like apexchartsjs that also modifies the DOM.

So, while I agree that the state should define the view completely - and transferring "everything" is the correct approach in most cases - another goal could be to minimise the scope of what can change. This isn't just about avoiding redundancy or saving time; it also helps developers spot differences more easily.

I hope this makes sense 😬.

adding a serverside triggerer

Wow, that sounds like a very ambitious feature, as it would require the server to maintain session awareness. While it could be an important addition, I think it might make sense to push it further down the roadmap. Ensuring the stability of the current functionality is probably more critical at this stage. Besides, this feature can currently be faked using cyclic queries, so it might not be an immediate priority.

I'm currenty working on some Javascript escape hatches

This sounds interesting! However, I'm not sure if this is something hyperbole itself should handle directly. Personally, I used Alpine.js during my tests to provide this functionality, and it worked well for my needs. Perhaps this could be left to external tools or libraries?

[seanhess]

That said, I doo see one small issue. As far as I understand, target requires a hierarchy of participating HyperViews (but without being able to check whether a matching ID exists). However, since I have no external effect, I had to use an artificial HyperView as a wrapper, just to satisfy the type check for target. Therefore, perhaps one could consider making target a bit more flexible – with even less type safety?

To make it concrete, I need something like the following just to trigger an Action in one of the "ancillary" childs? Just to satisfy target? I haven't tried this, but what about communication between siblings?

data GlobalView = GlobalView
deriving (Show, Read, ViewId)

instance HyperView GlobalView es where
type Require GlobalView = [ChildView, AnotherChildView]
data Action GlobalView = Absurd Void
deriving (Show, Read, ViewAction)
update (Absurd v) = absurd v

You shouldn't need this. The view returned by the page function is already a View (Root views) (), where views are those listed in Page. Can you post an example with the compiler error you're getting that necessitates the wrapper? I definitely want it to be smoother than you're describing

So putting the complete page in one huge HyperView seems unreasonable. It would mean to send multiple kilobytes for SVG for logos and lettering with every action. That's the reason why I was looking for a alternative. As it seems target is able to help me ...

Great, it sounds like you understand the tradeoff, and this is what target is designed for.

This sounds interesting! However, I'm not sure if this is something hyperbole itself should handle directly. Personally, I used Alpine.js during my tests to provide this functionality, and it worked well for my needs. Perhaps this could be left to external tools or libraries?

Could you send me an example of integrating with alpine that worked well for you? Someone was stuck trying to integrate Alpine and it prompted some of the JS features that are planned. Thanks!

[alaendle]

You shouldn't need this.

Now I feel stupid. You're right, of course; I could have simply deleted the code without replacing it (not a single character!). I must have taken a wrong turn somewhere during development 🤦.

Could you send me an example of integrating with alpine that worked well for you?

Sure. Nothing sophisticated here - as mentioned, at the moment I'm just playing around to get a better feeling if I maybe want to use the library at a later time (which not only depends on the library itself because it's unsure if I ever get the chance to realise a web project in Haskell).

So, here are the snippets I used to control an example apexchart (which I used to represent all possible other JS needs).

chartViewInteractive :: (ViewAction (Action id)) => ([Int] -> Action id) -> [Int] -> View id ()
chartViewInteractive updateAction d = do
    Hyberbole.button (updateAction d) (border 1 . pad 5) "Update"
    el (att "x-init" ("Alpine.store('chartStore', " <> pack (show d) <>"); console.log('Data init!');")) none

chartViewPresentation :: View c ()
chartViewPresentation = el (att "x-data" "" . att "x-ref" "chartPlace" . att "x-init" "let options = { series: [{ data: $store.chartStore }], chart: { height: '100%' }}; let chart = new ApexCharts($refs.chartPlace, options); chart.render(); console.log('Chart init!'); $watch('$store.chartStore', value => { chart.updateSeries([{ data: Alpine.raw(value) }]); console.log('New data: ' + JSON.stringify(Alpine.raw(value))); });" . width 400 . height 300) none

Everything is very basic, very unsafe and contains debug logging; but I guess it could explain the idea. I use x-init for different things here, because it runs whenever the element containing it is created. So at the one side we have this x-init usage that just updates the data between hyberbole and alpine - which runs on every update. And than we have the x-init that only runs once, creates the chart and establishes the data-binding between alpine and the apexchart.

From my perspective this works nicely and really forces me to think about the DOM structure - and it's updates - and also forces me to encapsulate all mutation on the surface so that the building blocks from the perspective of a user these methods at least behave like pure functions.

[seanhess]

Oops, I thought att was supposed to be escaping with ampersands. x-init is your custom attribute? Not something alpine uses directly, right? Who is calling the code deliverred in x-init?

For stuff like this, I was imaginging you would always send data updates via a JSON-encodeddata- attribute, and some external js would tie into a bubbling lifecycle event to initialize it and apply updates. The new HyperView.runAction() in main allows you to manually trigger server actions.

It's good to know it works already! But I need to double-check that's not a security flaw

[alaendle]

Just to make it crystal clear, I don't have any other custom JS code - x-init is interpreted by alpine (https://alpinejs.dev/directives/init).

I simply use:

toDocument :: BL.ByteString -> BL.ByteString
toDocument content =
  [i|<!doctype html>
  <html>
    <head>
      <title>My hyperbole!</title>
      <script type="text/javascript">#{scriptEmbed}</script>
      <style type="text/css">#{cssResetEmbed}</style>
      <script type="text/javascript" defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.js"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/apexcharts@4.7.0/dist/apexcharts.js"></script>
    </head>
    <body>
      #{content}
    </body>
  </html>|]

And I also don't want to ever have the need to touch a JS file 😄. And as always, you are right - for even more adventurous JS interop we need the other way around (JS -> Hyperbole). Great that you have already taken this into account - you rock (and I really enjoy the learning experience you provide for me here🥇).

For me limitations of alpine are a strength, I want to limit myself to only manipulate "HTML"!

(security concerns also come to my mind, but I put that aside for now - and didn't really think about it)

[seanhess]

Cool, thanks for the follow-up comments and code! Let me know how your adventure goes, and if you have any other questions!