Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to write PureScript react components to replace JavaScript

thomashoneyman.com

Post reply on HN
Print view View original

31–40 of 74 posts

Re: How to write PureScript react components to replace JavaScript

#31

Post by lightgreen »

> JavaScript apps to PureScript > Both companies have seen a dramatic drop in bugs in production.

I suspect if they migrated from JavaScript to TypeScript instead they would have seen the same dramatic drop in bugs, but also migrated much quicker and would be able to hire engineers easier, and development speed would have increased (because of much better tooling/IDE/interop).

I think PureScript is a very bright project, I even want to try it myself, but realistically, comparison to plain JavaScript is not the best benchmark.

Re: How to write PureScript react components to replace JavaScript

#32

Post by edjroot »

diggan wrote: post #25
chvid wrote: 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…

Did someone say concise? Here is a ClojureScript + Reagent example for whoever is interested in that: (defn Counter [{:keys [label counterType onClick] :or {onClick (fn [])}}] (let [count (r/atom 0)] [:button {:onClick #(do (swap! count (condp = counterType :increment inc :decrement dec)) (onClick))} (str label ": " @count)])))

Awesome! Would you mind talking some more about your experience with it? I just got started with Clojure and Fulcro[1] (a full-stack framework) and I'm really, really excited about the possibilities. Have you heard about it?

Here are some features off the top of my head (at least that's what they claim):

- Well-integrated stack, so very little friction

- “Datomic on the front end”: Client-side time-traveling database with automatic normalization, querying via EQL (kinda like GraphQL but more idiomatic and supposedly more powerful), “co-locating” queries in the UI.

- React bindings and a Semantic UI library

- Lets you swap anything you “outgrow”

- Lots of learning material (but still lacking in some areas from a cursory look). The author seems to be very active on Slack (Clojurians #fulcro).

- Fulcro RAD[2] (currently alpha) looks like it's going to reduce friction even further.

There's probably more cool stuff I don't remember now.

The two things I'm still insecure about with Clojure are its dynamically typed nature (but I'd be glad to hear about how that isn't a problem) and that the ecosystem doesn't seem to hold your hand too much (again, I'd like to hear another point of view).

[1] https://fulcro.fulcrologic.com/benefits.html

[2] https://github.com/fulcrologic/fulcro-rad

Re: How to write PureScript react components to replace JavaScript

#33

Post by slifin »

edjroot wrote: post #32
diggan wrote: post #25

Earlier quoted context omitted.

Did someone say concise? Here is a ClojureScript + Reagent example for whoever is interested in that: (defn Counter [{:keys [label counterType onClick] :or {onClick (fn [])}}] (let [count (r/atom 0)] [:button {:onClick #(do (swap! count (condp = counterType :increment inc :decrement dec)) (onClick))} (str label ": " @count)])))

Awesome! Would you mind talking some more about your experience with it? I just got started with Clojure and Fulcro[1] (a full-stack framework) and I'm really, really excited about the possibilities. Have you heard about it? Here are some features off the top of my head (at least that's what they claim): - Well-integrated stack, so very little friction - “Datomic on the front end”: Client-side time-traveling database…

I'm making this same journey (I'm on video 5), and I'm making some notes for each video in Roam and teaching/learning each video every week via Google Meet on Bristol's Clojure Meetup

I recommend using clj-kondo to catch the kinds of silly mistakes a type system is usually good for, yesterday we discovered that the react component interop is really good, we decided to try using https://chakra-ui.com/ over semantic ui and it's really straight forward to use React components that have no awareness of Fulcro or CLJS

I think in terms of hand holding Fulcro does a really good job once you get into the weeds because it has an opinion and documentation for many problems, if you want to join us we're #bristol-clojurians on slack

Re: How to write PureScript react components to replace JavaScript

#34

Post by rhlsthrm »

kalyantm wrote: post #6
chvid wrote: 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?

Can you explain more about writing JS in an FP style? I'd love to start to incorporate more FP in my JS but I don't really know how to start doing that. I've looked at fp-ts but it seems like that would require a full rewrite. Any tips for how to basically start from 0 and start to implement FP into an existing JS/TS codebase?

Re: How to write PureScript react components to replace JavaScript

#35

Post by roebk »

Osiris wrote: post #22

The article says that PureScript helped them reduce bugs but fails to give any examples of how PureScript prevented bugs. Looking at the examples, the code seems to function the same so it's not obvious what problem is being solved that warrants teaching a whole dev team a new language. In my experience, the vast majority of React app bugs are 1) state management, or 2) asynchronousisty. How does PureScript help to p…

In my experience the vast majority of React bugs are standard bugs you'd find in any JavaScript program, null reference errors. PureScript will force you to handle nulls as a Maybe, preventing a whole class of bugs.

Re: How to write PureScript react components to replace JavaScript

#36

Post by diggan »

noelwelsh wrote: post #24
chvid wrote: 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…

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.

Re: How to write PureScript react components to replace JavaScript

#37

Post by quickthrower2 »

quickthrower2 wrote: post #21
jamil7 wrote: post #13

Earlier quoted context omitted.

I'm also wondering the same thing, after the whole Elm meltdown I've been looking for something similar to learn on the side.

I'm not in the market myself at the moment, but I would consider Fable (F#) for that job.

Sorry that was a brain fart nonseq

Re: How to write PureScript react components to replace JavaScript

#38

Post by jamil7 »

edem wrote: post #23

Why would anyone write purescript when we have typescript?

Why write in any other language when we have typescript? /s

There is a world outside the JS/TS/Node ecosystem, pick up some of these other languages and it will answer your question.

Re: How to write PureScript react components to replace JavaScript

#39

Post by johnrackles »

Softcadbury wrote: post #20
Cthulhu_ wrote: post #18

Earlier quoted context omitted.

Pedantic and what always happens when someone posts code on the internet, but, I'd extract the onClick function and provide a default value for the onclick parameter for readability, and use cleverness to show off: export const Counter = ({label, counterType, onClick}) => { const [counter, setCounter] = useState(0); onClick = onClick || () => {}; const handleClick = () => { const modifier = counterType === "Increment…

You should also use useCallback for handleClick

Can you explain why? I don't think I've ever used useCallback and certainly not for this type of functionality. I'd love to learn

Re: How to write PureScript react components to replace JavaScript

#40

Post by pocket_titan »

rhlsthrm wrote: post #34
kalyantm wrote: post #6

Earlier quoted context omitted.

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?

Can you explain more about writing JS in an FP style? I'd love to start to incorporate more FP in my JS but I don't really know how to start doing that. I've looked at fp-ts but it seems like that would require a full rewrite. Any tips for how to basically start from 0 and start to implement FP into an existing JS/TS codebase?

I'd suggest just learning and applying fp principles in JS incrementally. You'll feel a bit constrained at first (in part b/c JS allows you to do many "dirty" things), but you'll end up writing better code. Try to rely on 1) pure functions/no side-effects: a functions return value should be completely determined by its input 2) immutability: no Array.push, pop, or any method that modifies its input values 3) recursion instead of for & while loops.

You'll probably feel the need for stronger typing at some point when adhering to these principles, and that's when I'd suggest looking at Typescript. By trying the things above you'll likely get familiar with the issues TS is trying to solve & you'll appreciate it more. Note that fp-ts is just a "helper" library for functional concepts, but it won't teach you their value or how to use them.

Also: many libraries have fp variations! Next time you reach for lodash, try lodash/fp instead: it has the same tools you'll already be familiar with, but implemented in a functional manner.

Post reply on HN