Live data from Hacker News

How to write PureScript react components to replace JavaScript

thomashoneyman.com

51–60 of 74 posts

Re: How to write PureScript react components to replace JavaScript

#51
post #50

How is Purescript these days? I haven't heard many news from its ecosystem since Phil Freeman stepped down from its active development. Purescript by Example must be quite outdated by now? I know that Alex Kelley is still working on his set of tutorials "Make the Leap from Javascript to Purescript"[0]. Anything else interesting going on? I feel like there was a lot of excitement about Purescript in around 2015-2016,…

The book is being kept up to date by the community:

https://github.com/purescript-contrib/purescript-book

Re: How to write PureScript react components to replace JavaScript

#52
post #50

How is Purescript these days? I haven't heard many news from its ecosystem since Phil Freeman stepped down from its active development. Purescript by Example must be quite outdated by now? I know that Alex Kelley is still working on his set of tutorials "Make the Leap from Javascript to Purescript"[0]. Anything else interesting going on? I feel like there was a lot of excitement about Purescript in around 2015-2016,…

There's plenty of interesting activity going on:

The Discourse ( https://discourse.purescript.org/ ) and Slack channels ( https://fpchat-invite.herokuapp.com/ ) are active (and quite welcoming / helpful).

A community fork of "PureScript by Example" is being updated / maintained, here: https://book.purescript.org/

Try PureScript is back online after a hiatus: https://try.purescript.org/

The compiler is now at version 0.13.8 with reasonably regular updates (and 0.14.0 should be on the way reasonably soon): https://github.com/purescript/purescript/releases

Spago, the new(ish) package manager, is quite nice: https://github.com/purescript/spago

The VSCode integration is solid. I'd say the tooling story is pretty good, over all.

Work is underway to provide a package registry, since bower is being phased out: https://github.com/purescript/registry

Halogen 5 was released recently: https://github.com/purescript-halogen/purescript-halogen

Re: How to write PureScript react components to replace JavaScript

#53
post #36

Earlier quoted context omitted.

FWIW here's a Purescript example from the `purescript-react-basic-hooks` homepage[1]. It's not 100% identical but it is fairly close. mkCounter :: Effect (ReactComponent {}) mkCounter = do component "Counter" \props -> React.do counter /\ setCounter show counter ] } Your aesthetic / background may differ from mine, but I find the Purescript version easier to read. [1]: https://github.com/spicydonuts/purescript-react-…

Not sure I misunderstand the code that you're posting, but seems to not have the whole increment vs decrements parts in it, which would be interesting to see.

The following line defines a function (the syntax is known as an 'operator section'):

  (_ + 1)
Equivalent to this JS function:

  x => x + 1
Operator Sections: https://github.com/purescript/documentation/blob/master/lang...

Re: How to write PureScript react components to replace JavaScript

#54
post #36

Earlier quoted context omitted.

Not sure I misunderstand the code that you're posting, but seems to not have the whole increment vs decrements parts in it, which would be interesting to see.

The following line defines a function (the syntax is known as an 'operator section'): (_ + 1) Equivalent to this JS function: x => x + 1 Operator Sections: https://github.com/purescript/documentation/blob/master/lang...

I think the parent's point is that it only includes increment and not decrement.

Re: How to write PureScript react components to replace JavaScript

#55
post #23

Why would anyone write purescript when we have typescript?

I would phrase the question as "why would you write Typescript when we have Purescript (or ReasonML)"?

Why would you choose to write a language who's type system is much less expressive than languages like Purescript? Why not have that expressive power and its ability to prevent some classes of bugs, and still have good interop with JS?

Re: How to write PureScript react components to replace JavaScript

#56
post #36

Earlier quoted context omitted.

FWIW here's a Purescript example from the `purescript-react-basic-hooks` homepage[1]. It's not 100% identical but it is fairly close. mkCounter :: Effect (ReactComponent {}) mkCounter = do component "Counter" \props -> React.do counter /\ setCounter show counter ] } Your aesthetic / background may differ from mine, but I find the Purescript version easier to read. [1]: https://github.com/spicydonuts/purescript-react-…

Not sure I misunderstand the code that you're posting, but seems to not have the whole increment vs decrements parts in it, which would be interesting to see.

You are correct, which is why I said "[I]t's not 100% identical".

Although I can read Purescript reasonably well I'm not so proficient writing it (I do most of my programming in a different FP language, so I understand the concepts but not the specifics.) I didn't attempt to modify the code I pulled from the example because it would take more time than I have to install Purescript and check my modifications.

It would be simple to add this functionality. This equivalent of the `counterType` would be an algebraic data type, defined looking something like

  data counterType = Increment | Decrement
and usage something like

  case counterType of
    Increment -> ... make increment here ...
    Decrement -> ... make decrement here ...

Re: How to write PureScript react components to replace JavaScript

#58
post #26
post #3

This is the corresponding code written in React using hooks: export const Counter = ({label, counterType, onClick}) => { const [counter, setCounter] = useState(0); return ( { counterType == "Increment" && setCounter(counter + 1); counterType == "Decrement" && setCounter(counter - 1); onClick && onClick(); }}> {label}: {counter} ); } I think the case for PureScript React would be more convincing if the code you ended…

Posting code on the internet - dangerous business! I think the counter updates should use functional updates, since they depend on the current state. My understanding is that this can lead to a potential race condition, although I'm not 100% on the details. setCounter(currentCounter => currentCounter + 1) https://reactjs.org/docs/hooks-reference.html#functional-upd... Interestingly your code is similar to some the fi…

The code I wrote is perfectly fine. There is no possibility of race conditions in the code I wrote.

Re: How to write PureScript react components to replace JavaScript

#59
post #6
post #3

This is the corresponding code written in React using hooks: export const Counter = ({label, counterType, onClick}) => { const [counter, setCounter] = useState(0); return ( { counterType == "Increment" && setCounter(counter + 1); counterType == "Decrement" && setCounter(counter - 1); onClick && onClick(); }}> {label}: {counter} ); } I think the case for PureScript React would be more convincing if the code you ended…

Exactly my thought. I've always loved FP, I write JS in a FP style at work, and have always wanted to get into learning something like Elm/PureScript (and eventually Haskell) but I feel like it takes ages to get productive. That PureScript React example alone has me thinking twice. But as a general question, what would be a better way to approach these languages?

I think FP UI solutions don't necessarily win the 10-liner demo (except for representing client state with an AGDT), but your app also isn't a 10-liner.

FP approaches to UI like Elm win the 100+ line comparisons for reasons you can't see, like minimizing runtime errors and making it so that impossible states are impossible at the type level.

Unfortunately it's hard to see the benefits until you get your hands dirty.

I use Elm in production on some apps and its a good place to start if you want simplicity. Personally, Purescript never interested me because I don't like all the complexity of more advanced Haskell features. While Elm specifically avoids certain advanced features to stay simple. You might like it given your concerns.

Post reply on HN