Sharing code between production JS and PureScript apps (Experience reports wanted!)

[thomashoneyman]

I’m curious to hear from anyone who has needed to mix JS frameworks with Halogen in PureScript. I’m especially interested in integration on both sides: mounting Halogen components in a React/Angular/Vue application, and mounting React/Angular/Vue components in a Halogen app.

At my company we’re migrating an Angular app and so we’ve had some experience mounting Halogen components in Angular. But we’ve taken an odd approach because we’re wholesale replacing the application — we mount our Halogen router in the sections of the app that are 100% Purescript, and in the rest of the app, the components we mount are fairly small / localized. This has worked well for us so far.

We may need to integrate a 100% Halogen application with a 100% JS application in the future, and that kind of major code sharing will be new to me.

For those of you who have done this or something like it, I’d love to hear more about strategies you took to make it work – or why it didn’t work.

[cvlad]

We have an application that looks much like a mobile OS’ desktop. After logging in, you are presented with an application selection screen. Each of these applications is pretty much just a ui-router route, which loads up an angular1 controller.

For our first PureScript application, we simply created a new route with a basic controller that loads a PureScript Halogen application (through the usual runUI). There is one important limitation, due to the legacy router we use, which means I can’t use hashtag-based routing in the PureScript apps because the angular router kicks in and reloads the application, so we ended up using a custom routing scheme (which is very similar to the routing I use in my halogen example repository).

The main function that starts the Halogen app also takes an object as input which has things such as, the target element id for where the app should load, and a few of the services we use (the localization service, the toastr service, etc) in angular as well.

The second app we created is very similar: new route, new controller, new entry point etc. Everything works just fine.

What we haven’t done yet is mix PureScript and Angular in the same application, although we have a very basic PoC where we load a hello world PureScript app inside an angular app, which also works just fine. The only problem is that there’ll probably be a lot of noise with moving messages and data between angular and PS. I’ll come back with details whenever we get to it.

All in all, IME, keeping the applications separate has proven to be very simple and worth-while. I’m also curious whether people have used JS frameworks along with Halogen in apps where components need a lot of back and forth.