6 ms·

Flame: A PureScript front-end framework inspired by the Elm architecture

156 points by vyuh 5y ago

agumonkey 5y ago
Impressive metrics https://flame.asafe.dev/benchmarks https://flame.asafe.dev/benchmarks
- eyelidlessness 5y ago
  I look forward to seeing this in the Solid benchmark suite.
sfvisser 5y ago
Nice, looks very clean. As in Elm, I’ve never fully understood why the events emit a value of some message type that gets interpreted into a function from ‘state -> state’ instead of handling with a state transformation directly. Feels like boilerplate to me. I can see situations where this approach is useful, but should it be the default? I guess you can always change your message type to ‘a -> a’ and interpret with ‘id’ if you want to.
- fpoling 5y ago
  The whole state is immune so it is not possible to handle state change locally in a sub-component. The parent component that embeds it needs to call it and place a new updated component state into a new whole state. But then the parent needs to know which events go into the component. The messages nicely allow for that. Besides already mentioned ability to serialize messages it also allows to preprocess or filter messages in the parent.
- pdamoc 5y ago
  > I’ve never fully understood why the events emit a value of some message type In Elm, the Model can be updated faster than the DOM. In other words, the view is rendered at the speed of requestAnimationFrame but the model can change in between animation frames. This means that if you handle model changes inside the view you might get out of sync with the model. Here is a program [1] that shows this problem. If you click "SnapShot" you will sometimes get the same number but sometimes get different numbers. [1] https://ellie-app.com/dmddFd9whtYa1 https://ellie-app.com/dmddFd9whtYa1
- k_bx 5y ago
  Events are always serializeable, inspectable, and can be rewinded backward/forward in Elm. It is indeed producing a lot of boilerplate from my experience, but there is a certain complexity guarantee that comes with it in terms of keeping things simple that I, personally, enjoy.
  - sfvisser 5y ago
    Yeah, so the trade-off is you get some stuff for free that you might not need. Paying with some boilerplate. Fine design choice obviously. Writing a lot of react (without redux) I never really miss serializeability and it’s easy to bolt on locally if you need it.
    - k_bx 5y ago
      My personal outcome on this is that I am afraid to touch React after some time or some number of other devs were working on the codebase, while with Elm I’m not afraid to take over a large codebase that was written by someone else. This is very anecdotally and is my personal taste, but I totally stand by it and am having one of these experience right now.
      - mejutoco 5y ago
        This has been my exact experience. After not touching a project I can come back to it pretty much immediately. Also code location (files, one module per file) stops being so important, because the type system just catches everything. Once I learned how to use the occasional escape hatch, with ports, I could mix the random quick hack with the very solid system of elm.
vyuh 5y ago
Elm handicaps my attempts of "making impossible states impossible" because: - I can't have Sets of arbitrary Types they must be `comparable`. I cannot create a custom comparable type. - Records, Bool and custom Union Types are not `comparable` - Bool and Simple Union Types could have been comparable if their comparison worked like they were Enumerated Types. Elm does not have Enumerated types. Basically https://github.com/elm/compiler/issues/1008 https://github.com/elm/compiler/issues/1008 made me look for better alternatives.
- mrweasel 5y ago
  Did you find better alternatives? I'm currently trying to learn a bit of Elm. So far it's basically the only "Javascript framework" that I've been able to get up and running, while still understanding how things actually work.
  - mvolfik 5y ago
    I'm also this kind of i-want-to-know-how-things-work person and also never managed to stay at learning React, Vue etc. But a few months ago, I discovered Svelte and I absolutely love it. I recommend you to give a shot to their excellent tutorial which you can finish in < 1 hour https://svelte.dev/tutorial/ https://svelte.dev/tutorial/
  - cies 5y ago
    This post links to a PureScript project that is probably the easiest PS framework around. ReScript + rescript-react is a good alternative. Less safe, waaaay more verbose; but backed by Facebook. This is quite cute (in TypeScript though): https://github.com/cyclejs/cyclejs https://github.com/cyclejs/cyclejs And Yew is super cool, it goes the WASM route (in Rust): https://github.com/yewstack/yew https://github.com/yewstack/yew
    - otabdeveloper4 5y ago
      > while still understanding how things actually work was, methinks, the salient part of his point. (I emphasize, I too think Elm is coherent enough so you understand how it works, which other Javascript frameworks lack.)
pjmlp 5y ago
Amazed to see PureScript is still around, I guess. It was everywhere on conferences like 5 years ago.
emptyparadise 5y ago
Misread that as "PostScript" and was confused but curious.
haskman 5y ago
Purescript-Concur is simpler, and allows you to use elm-architecture as well, but also allows you to use your existing functional programming toolkit to the fullest. It also has react bindings - https://github.com/purescript-concur/purescript-concur-react https://github.com/purescript-concur/purescript-concur-react. Here's what a counter example looks like - counter count = do button [onClick] [text (show count)] counter (count + 1) Check out a comparison with elm-architecture at https://ajnsit.github.io/concur-documentation/ch03-01-replicating-elm-architecture.html https://ajnsit.github.io/concur-documentation/ch03-01-replic....
- dorian-graph 5y ago
  That Elm comparison is so nice. I felt like half the time I was writing Elm, it was spent on the manual work of the things described in there.
  - haskman 5y ago
    Thank you! All the manual wiring in Elm can be very frustrating! Also not having to expose all the action datatypes when they are only being used in a single place can really improve code structure.
- DylanSp 5y ago
  Two questions that I didn't see answered in the docs: - How do I manage state that isn't local to one widget? A counter's nice and local, but I don't see how application-wide state gets handled. - How are data fetching and other asynchronous actions wired in?
  - dwhitney 5y ago
    I was wondering that myself. Here's an Ajax example: https://github.com/purescript-concur/purescript-concur-react/blob/master/examples/src/Test/Ajax.purs https://github.com/purescript-concur/purescript-concur-react... It could use some type signatures, but it makes sense. As for managing state, my understanding of the Elm Architecture is that there is one "global" state data structure, and various parts of it are handed down from parent to child. So my question would be the opposite of yours: what if I want local state? Is that possible? There are situations where some toggle being on or off isn't very important and keeping track of it in a global data structure is burdensome
wagslane 5y ago
I'm really happy to see more PureScript support! I recently built a playground for purs in the browser: https://app.qvault.io/playground/purs https://app.qvault.io/playground/purs

156 points by vyuh 5y ago

agumonkey 5y ago

Impressive metrics https://flame.asafe.dev/benchmarks https://flame.asafe.dev/benchmarks

eyelidlessness 5y ago
I look forward to seeing this in the Solid benchmark suite.

sfvisser 5y ago

Nice, looks very clean. As in Elm, I’ve never fully understood why the events emit a value of some message type that gets interpreted into a function from ‘state -> state’ instead of handling with a state transformation directly. Feels like boilerplate to me. I can see situations where this approach is useful, but should it be the default? I guess you can always change your message type to ‘a -> a’ and interpret with ‘id’ if you want to.

fpoling 5y ago
The whole state is immune so it is not possible to handle state change locally in a sub-component. The parent component that embeds it needs to call it and place a new updated component state into a new whole state. But then the parent needs to know which events go into the component. The messages nicely allow for that. Besides already mentioned ability to serialize messages it also allows to preprocess or filter messages in the parent.
pdamoc 5y ago
> I’ve never fully understood why the events emit a value of some message type In Elm, the Model can be updated faster than the DOM. In other words, the view is rendered at the speed of requestAnimationFrame but the model can change in between animation frames. This means that if you handle model changes inside the view you might get out of sync with the model. Here is a program [1] that shows this problem. If you click "SnapShot" you will sometimes get the same number but sometimes get different numbers. [1] https://ellie-app.com/dmddFd9whtYa1 https://ellie-app.com/dmddFd9whtYa1
k_bx 5y ago
Events are always serializeable, inspectable, and can be rewinded backward/forward in Elm. It is indeed producing a lot of boilerplate from my experience, but there is a certain complexity guarantee that comes with it in terms of keeping things simple that I, personally, enjoy.
- sfvisser 5y ago
  Yeah, so the trade-off is you get some stuff for free that you might not need. Paying with some boilerplate. Fine design choice obviously. Writing a lot of react (without redux) I never really miss serializeability and it’s easy to bolt on locally if you need it.
  - k_bx 5y ago
    My personal outcome on this is that I am afraid to touch React after some time or some number of other devs were working on the codebase, while with Elm I’m not afraid to take over a large codebase that was written by someone else. This is very anecdotally and is my personal taste, but I totally stand by it and am having one of these experience right now.
    - mejutoco 5y ago
      This has been my exact experience. After not touching a project I can come back to it pretty much immediately. Also code location (files, one module per file) stops being so important, because the type system just catches everything. Once I learned how to use the occasional escape hatch, with ports, I could mix the random quick hack with the very solid system of elm.

vyuh 5y ago

Elm handicaps my attempts of "making impossible states impossible" because: - I can't have Sets of arbitrary Types they must be `comparable`. I cannot create a custom comparable type. - Records, Bool and custom Union Types are not `comparable` - Bool and Simple Union Types could have been comparable if their comparison worked like they were Enumerated Types. Elm does not have Enumerated types. Basically https://github.com/elm/compiler/issues/1008 https://github.com/elm/compiler/issues/1008 made me look for better alternatives.

mrweasel 5y ago
Did you find better alternatives? I'm currently trying to learn a bit of Elm. So far it's basically the only "Javascript framework" that I've been able to get up and running, while still understanding how things actually work.
- mvolfik 5y ago
  I'm also this kind of i-want-to-know-how-things-work person and also never managed to stay at learning React, Vue etc. But a few months ago, I discovered Svelte and I absolutely love it. I recommend you to give a shot to their excellent tutorial which you can finish in < 1 hour https://svelte.dev/tutorial/ https://svelte.dev/tutorial/
- cies 5y ago
  This post links to a PureScript project that is probably the easiest PS framework around. ReScript + rescript-react is a good alternative. Less safe, waaaay more verbose; but backed by Facebook. This is quite cute (in TypeScript though): https://github.com/cyclejs/cyclejs https://github.com/cyclejs/cyclejs And Yew is super cool, it goes the WASM route (in Rust): https://github.com/yewstack/yew https://github.com/yewstack/yew
  - otabdeveloper4 5y ago
    > while still understanding how things actually work was, methinks, the salient part of his point. (I emphasize, I too think Elm is coherent enough so you understand how it works, which other Javascript frameworks lack.)

pjmlp 5y ago

Amazed to see PureScript is still around, I guess. It was everywhere on conferences like 5 years ago.

emptyparadise 5y ago

Misread that as "PostScript" and was confused but curious.

haskman 5y ago

Purescript-Concur is simpler, and allows you to use elm-architecture as well, but also allows you to use your existing functional programming toolkit to the fullest. It also has react bindings - https://github.com/purescript-concur/purescript-concur-react https://github.com/purescript-concur/purescript-concur-react. Here's what a counter example looks like - counter count = do button [onClick] [text (show count)] counter (count + 1) Check out a comparison with elm-architecture at https://ajnsit.github.io/concur-documentation/ch03-01-replicating-elm-architecture.html https://ajnsit.github.io/concur-documentation/ch03-01-replic....

dorian-graph 5y ago
That Elm comparison is so nice. I felt like half the time I was writing Elm, it was spent on the manual work of the things described in there.
- haskman 5y ago
  Thank you! All the manual wiring in Elm can be very frustrating! Also not having to expose all the action datatypes when they are only being used in a single place can really improve code structure.
DylanSp 5y ago
Two questions that I didn't see answered in the docs: - How do I manage state that isn't local to one widget? A counter's nice and local, but I don't see how application-wide state gets handled. - How are data fetching and other asynchronous actions wired in?
- dwhitney 5y ago
  I was wondering that myself. Here's an Ajax example: https://github.com/purescript-concur/purescript-concur-react/blob/master/examples/src/Test/Ajax.purs https://github.com/purescript-concur/purescript-concur-react... It could use some type signatures, but it makes sense. As for managing state, my understanding of the Elm Architecture is that there is one "global" state data structure, and various parts of it are handed down from parent to child. So my question would be the opposite of yours: what if I want local state? Is that possible? There are situations where some toggle being on or off isn't very important and keeping track of it in a global data structure is burdensome

wagslane 5y ago

I'm really happy to see more PureScript support! I recently built a playground for purs in the browser: https://app.qvault.io/playground/purs https://app.qvault.io/playground/purs