search

purescript-react / purescript-react-basic

An opinionated set of bindings to the React library, optimizing for the most basic use cases
https://pursuit.purescript.org/packages/purescript-react-basic
Apache License 2.0
281 stars 40 forks source link

Difference between this and purescript-react? #134

Open Eugleo opened 3 years ago

Eugleo commented 3 years ago

Hey, I'm a total PS newbie, so I'm kinda lost in all of the purescript react options. There are the following libraries:

There's mutiple comparison points between them, and I'm unsure in all of those points. Here I list my presumptions. Could somebody experienced with this library (-ies) shine some light on this and provide some proper comparisons?

Power

purescript-simple is just a base library for the -classic and -hooks implementations. It doesn't do anything by itself.

All of the rest are equivalent in 'power' — all are standalone React libraries that you can use to use external React components or write your own (in purescript). Not sure if you can write your own hooks with the -hooks lib.

Types

AFAIK purescript-react doesn't have typed props and elements (i.e. you can pass a href attribute to a div), not sure if react-basic-X is different.

Biggest issues

Why are the libraries struggling with? purescript-react seems to want to implement hooks (for a few years now), and lack of typed props also seems like a problem (at least to me), while purescript-simple's current biggest ambition seems to be adding proper documentation.

The implementations of purescript-simple seem to be documented, but rather sparsely (relying probably on the React docs) and don't have (m)any examples. Not sure if those libraries are feature-complete, at least when it comes to the common React use-cases, but it seems like it. The docs would then be the biggest problem.

Custom components

When it comes to creating custom components (i.e. not being limited to the default html ones) I think you can do this in all three, but purescript-react and purescript-react-basic-classic presumably generate class-based ones, and purescript-react-basic-hooks function-based ones. Not sure if that affects anything besides the generated JS (which shouldn't matter in 99% cases).

megamaddu commented 3 years ago

Hi @Eugleo, welcome to PS!

I'm not sure what you mean by purescript-simple. It sounds like you're describing purescript-react-basic, but there's also an old purescript-react-simple library which I don't believe still works with recent PureScript compliers. I'm going to assume the former for the rest of this.

react (omitting the purescript- prefixes from here on) was the first React library for PureScript. It as built before hooks existed and can sometimes be fairly verbose when you need to work with React's class lifecycles. It also has the prop shortcomings you mentioned above. It may have changed a bit since then, I haven't kept up with it much since we started using react-basic.

react-basic was created a few years ago to avoid some of the ceremony around converting JS React components to PS. It had some problems but it mostly worked for our use cases, and it introduced the Union trick for making DOM components with optional props. The original version of this API doesn't exist anymore, but versions 2, 3, and 4 are still available, and will all be indefinitely.

If you go the react-basic route, you can mix and match the available APIs. react-basic was split out into two implementations: react-basic-hooks and react-basic-classic. If you want hooks, react-basic-hooks is the only option I know of. react-basic-classic is closer to the original react library mentioned above, or Reason-React if you're familiar with that. It builds off of React's class-based API. But both react-basic-hooks and react-basic-classic use the same ReactComponent and JSX types, so you can define components using both in the same project.

If you're starting from scratch, I recommend react-basic-hooks. You don't need to install anything else explicitly, as it depends on react-basic. It's very close to the JS React hooks API, making it easy to translate code and concepts, as well as make use of existing JS React hooks. This slightly makes up for the terrible documentation (it's mostly "do it how you'd do it in JS hooks"), but it's definitely still an issue we should address someday. The next branch of lumihq/react-basic-starter was meant to be an updated docs/demo/starter repo for all this, but I've been putting it off for a long time. In the meantime I'm happy to answer questions if you have any.

Regarding your last question about custom components, react-basic, both -hooks and -classic allow JS interop. You'll want to use the ReactComponent {props} type if you're using foreign import to pull in a JS React component. To create components in PS which are meant to be consumed in JS, look for the functions which return ReactComponent. With -hooks, each component function has a ReactComponent variant, like component and reactComponent. With -classic, you'd use toReactComponent to wrap a component created with make or makeStateless. I'm not sure what the correct way to do this in react is but I'm sure there's something similar.