React -> React-Purescript

Help
#1

I’m currently trying to analyse how reasonable it would be to convert a React app into a Purescript React app.

I’ve read the great article by @thomashoneyman here.

But I had a couple of questions in regards to the experience/technicalities of that journey:

  1. We’re lucky that the existing React app is written in Typescript so was thinking of utilising those types. Has anyone managed to do that? (I know of this article, but wondered if there was anything more up to date)

  2. Has anyone played with something going the other way so Purescript-React app as the wrapper to React components? (we have React components that are complex/useful but the overall architecture routing isn’t the best and to have that as PS would be really nice)

  3. What was the overall experience of the conversion any caveats that one should look out for?

Any experience on this would be great :slight_smile:

3 Likes
#2

We migrated our entire TS React app to PureScript over the course of maybe half a year (while getting other things done of course) and had a rather pleasant experience.

  1. We wrote our own TS/PS interop layer manually. The interop layer is definitely the most work and the most error prone, so if you’re writing it manually it’s a lot more efficient to bite off big chunks at a time rather than doing just one component at a time so that you can avoid having to write TS/PS interop for every single component. I haven’t had any luck finding ways to generate interop code, but I didn’t try all that hard. Any automated tool would involve a lot of guesswork though since a lot of types in PS (especially effects) just aren’t represented on the TS side.

  2. We generally used PS at the lower level and had TS components render PS ones, but for various reasons sometimes that was inverted, and it worked equally well in both directions. But the top level was TS until the day we finally removed TS altogether. However, I have confidence that having PS at the top would work well, considering our experience with having PS components render TS ones.

  3. One caveat I can think of is when writing PS tests, it can get really tricky if your PS code is trying to reference TS code. The spago test command just calls node on the contents of your “output” directory directly, so you can end up having to run a time-consuming TS compilation in your npm test command or even a bundler in order to run tests. Same issue with spago repl. If you do PS from the “bottom-up,” this isn’t an issue. Or maybe a TS sandwich? Just use a thin PS layer at the top with no tests, and then do bottom-up dev with tests until your two PS sections meet?

5 Likes
#3

@ntwilson thanks that’s very informative.

Would you say that you dealt with the interop code in a similar way to writing FFI? In the examples given in the article, the functions such as EffectFn1 it felt very FFI :thinking:

Also for others reading this I found this article, not read it fully yet but seems quite extensive blog-posts/PureScript-React.md at master · xc-jp/blog-posts · GitHub

2 Likes
#4

It was similar to writing FFI, but I was a little less strict on account of a couple points:

  1. The interop layer was constantly moving as more TS code was ported, so any interop code was very much temporary
  2. The foreign code in this case was our code, so it’s simpler in some cases to just ensure on the TS side that some illegal case doesn’t happen than it is to properly guard against it on the PS side.

So for typical FFI code, we would normally exercise more caution, but for our interop layer we definitely cut some corners.

2 Likes
#5

ah cool thanks, that makes it feel a little better. Going to have to see how that interop functionality would work together with Typescript as not really sure on that side of things :thinking:

but like you said, think ideally moving things over in reasonably sized chunks would be helpful.

The problem is I’d really like to replace the router but that’s going to be one of the last pieces I would imagine :sweat:

#6

Should add that I was also pointed to this great repo by @andys8 that he created, which I’m sure will also help GitHub - andys8/create-react-app-purescript: Example how to use create-react-app with purescript

1 Like
#7

Here is another good example repository:

#8

At my company we converted a TypeScript/React application to PureScript. We started with adding a single component as an example, and then expanded. Then it allowed to rewrite types and logic. And we could over time we could completely drop TypeScript and uninstall the dependency. From my perspective gradual migration has worked nicely and allows you to go at your own pace.

2 Likes
#9

Well sad news for me, team member was realllllllly against the move to PS so it got vito’d :frowning:
But the good news is I can report that with the use of craco and @andys8 great plugin it worked a treat :slight_smile:

#10

can you elaborate more? what plugin are you mentioning?

#11

I believe they are talking about this: GitHub - andys8/craco-purescript-loader: craco plugin to add purs-loader with create-react-app

2 Likes
#13

A colleague of me recently wrote an article on how to get started with PureScript and React. This one is based on Parcel and there is an example repository. Could also be interesting for you.

5 Likes