Integrating Elm with JS using ports with FSAs?

mfeineis 2018-03-04 17:02:49 UTC #1

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

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

gist.github.com

https://gist.github.com/mfeineis/b5dea2ecf8c93085079f8876c6cb75c2

FsaPorts.elm

port module FsaPorts exposing (main)

import Html exposing (Html, text)
import Json.Decode as Decode exposing (Decoder, Value)
import Json.Encode as Encode


port fromElm : Value -> Cmd msg

This file has been truncated. show original

index.html

<html>
<head>
  <style>
    /* you can style your program here */
  </style>
</head>
<body>
  <script>
    const app = Elm.FsaPorts.fullscreen();

This file has been truncated. show original

pdamoc 2018-03-04 17:34:33 UTC #2

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

mfeineis 2018-03-04 17:55:43 UTC #3

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

Pauld 2018-03-04 23:21:55 UTC #4

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!

mfeineis 2018-03-05 04:45:07 UTC #5

@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

Pauld 2018-03-05 23:44:54 UTC #6

No problem, happy to help
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

Sebastian 2018-03-06 07:08:12 UTC #7

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.

mfeineis 2018-03-06 08:23:31 UTC #8

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