Integrating Elm with JS using ports with FSAs?

Because the question of how to actually implement what Murphy suggests in his awesome talk on the importance of ports comes up from time to time I’ve created a somewhat “minimal” gist for integrating Elm with outside JS via Flux-Standard-Actions (FSA) using ports. It’s not exactly simple in a “Hello World” sense but I’m not sure how to boil it down further. So I’m looking for feedback on how to make this nicer for newcomers. If something like this already exists somewhere, please let me know :sweat_smile:

Right now, as a rookie, I’d probably drop everything and run away from this :slight_smile:

Have you seen my exploration with elm-ports-driver?

1 Like

Yes, I know about that and I like the approach of having the glue logic in a library and just composing drivers very much. But I don’t think that counts as a “simple” example for newcomers to understand what’s going on either :slight_smile:

An opinion from someone with “light” Elm experience: The example looks very understandable and the logic easy to follow. The main difficulties I could see here would be:

  • Decoders. I remember it being one of the part taking me time to assimilate. There’s no way to avoid them but maybe mentioning them as a prerequisite could help the person get a good base on that.
  • I feel like ‘fsa’ is not something that should appear in the code itself. It’s just my opinion but it doesn’t really speak to me when reading the code. I would have understood right away what the fsa function did if it was named createAction for example.
  • One last minor thing: It is generally discouraged to recursively call update, so a beginner might find it disturbing to see it presented as part of the pattern. Maybe adding a comment to justify the use would clarify?

Anyway, great example that I will steal for my current side project (I now have 6 ports and it’s messy and polluting). I was just wondering what a good/simple implementation of that would be!

@Pauld thanks for your valuable input, I added comments about the JSON decoding logic and the recursive update call and tried to avoid the FSA nomenclature in code - reasonable changes, thank you! I also added an explicit public domain CC0 license so your legal department may sleep tight :sunny:

No problem, happy to help :slight_smile:
Sorry, I took the sharing of your code for granted and didn’t really think about licensing… I wonder what my legal department was thinking :sweat_smile:

1 Like

Interesting, what is the aim for doing something like this?

As the same can be done by creating several ports and calling those from JS. Seems to me that you are moving the complexity of matching the action type from JS to Elm.

A matter of choice I guess, I’d rather have two ports with a unified interface than twenty ports. Also, this is kind of meant for folks coming from React to see how one could interact between redux and Elm