Generate semi-dynamic UIs with Haskell | Hacker News Reader

Generate semi-dynamic UIs with Haskell

github.com

70 pointspka13 comments

I simply love it how every single Haskell framework I've seen that has "ease of development" and "it's easy" and similar immediately devolves from this (from Concur's docs [1]):

  hello = do
    button [onClick] [text "Say Hello"]
    text "Hello Sailor!"

into this:

  inputWidget = input [(Changed <<< unsafeTargetValue) <$> onChange, Focused <$ onFocus]

or this:

  inputWidget st = input [st {focusCount = st.focusCount+1} <$ onFocus
                         , ((\s -> st {currentText = s}) <<< unsafeTargetValue) <$> onChange]

for even the slightest modifications (which are not even complex in this case)

  These instances, allow a natural handling of 
  return values using <$>, <*>, <$, monadic 
  do-notation, etc

Right...

[1] https://github.com/ajnsit/concur-documentation/blob/master/R...

The second example can be rewritten as such:

    inputWidget = let
        changeAction = do
          v <- onChange
          return (Changed (unsafeTargetValue v))
        focusAction = do
          _ <- onFocus
          return Focused
      in input [changeAction, focusAction]

and likewise for the third:

    inputWidget st = let
        focusAction = do
          _ <- onFocus
          return (st {focusCount = st.focusCount+1})
        changeAction = do
          v <- onChange
          return (st {s = unsafeTargetValue v})
      in input [focusAction, changeAction]

(I didn't compile this, so hopefully there's no major mistakes here)

Believe it or not, many Haskell programmers prefer brevity when it comes to programs like this. They're honestly not that unreadable once you learn the meaning of a few infix operators.

I prefer the approach described here: http://www.haskellforall.com/2015/09/how-to-make-your-haskel...

It's not clear to me what you're trying to show? Are you saying the later examples look more complex?

My guess: The latter examples look unfamiliar (looks like Haskell) while the first example looks familiar to the general eye (looks like any PL)

The things being compared don't even have the same purpose so idt comparing them even makes sense /shrug

Of course they do. Of course they are.

The simplest code change turns the code in to a monadic/functor soup.

... and if you program in Haskell that's exactly what you want. Programming with these abstractions is common and well supported in Haskell.

Given what the examples are doing (describing inputs) I don't see how you solve it ergonomically without higher kinded types, which in turn leads to functors etc.

I love it too, because it is a standard and flexible way to program in Haskell!

Cool application of Haskell's purity-by-default. I'm slightly surprised this takes the approach of enumerating the whole input space to get all states, though - given that termination for big spaces isn't a priority, why not just explore all paths instead? Then you could return `Int` as much as you wanted, if the actual code only goes through finitely many different values.

> why not just explore all paths instead?

Author here.

The problem is that concur-static generates static JS code that encodes all possible UI state transitions - so if the state space is big or infinite, so will be the resulting generated JS.

I wanted to explore the viability of generating simple static UIs with some level of dynamism. concur-static is definitely not intended as a replacement for full-blown client side UI libraries/frameworks.

> so if the state space is big or infinite, so will be the resulting generated JS.

I understand that, but it's not like this doesn't already choke on big input spaces. Why not allow me to use a big input space with a small state space by exploring the state space instead? Otherwise you just seem to be exploiting the fact that small input spaces make for small state spaces, which seems like an unnecessary indirection.

Or is it to try to enforce small state spaces to prevent programmer error?

Ah, I understand now.

That seems like a good idea indeed, however I'm not sure how it'd look in practice. The transition from input space to state space happens in the event handlers, which currently look like this:

    onClick :: Bounded a => Enum a => a -> VDOM a

If I understand correctly, you're proposing something like:

    onClick :: Bounded a => Enum a => a -> VDOM b

Where b can be whatever (i.e. an Int, etc)? How would a be converted into b?

Reply on news.ycombinator.com