# Loading Javascript scripts that interact with ports

**URL:** <https://discourse.elm-lang.org/t/loading-javascript-scripts-that-interact-with-ports/5944>\
**Category:** Learn\
**Created:** [June 20, 2020, 12:37pm UTC](https://discourse.elm-lang.org/t/loading-javascript-scripts-that-interact-with-ports/5944 "2020-06-20T12:37:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![allanderek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/allanderek/32/1360_2.png) [@allanderek](https://discourse.elm-lang.org/u/allanderek)\
**Post date:** [June 20, 2020, 12:37pm UTC](https://discourse.elm-lang.org/t/loading-javascript-scripts-that-interact-with-ports/5944/1 "2020-06-20T12:37:41Z")

</div>

Hello, this is a question about optimal script loading.  
Suppose you need to interoperate with some Javascript library, which you are doing through ports, so in the `head` you have something like:

```auto
 // This is the script that needs loading, let's suppose it defined `SomeJsWidget`
  <script src="http://somejswidgetthing.com/script.js"></script>

```

and after you have initialised your Elm app when you’re setting up your ports you have something like:

```auto
// Here I have to use `SomeJsWidget`
app.ports.initialiseSomeJsWidget.subscribe(function(args) {
    SomeJsWidget.init(args.config);
});

```

So putting it all together you might have an `index.html` file like:

```auto
<html>
<head>
  <meta charset="UTF-8">
  <title>Elm + Javascript</title>
  <script type="text/javascript" src="elm.js"></script>
  // This is the script that needs loading, let's suppose it defined `SomeJsWidget`
  <script src="http://somejswidgetthing.com/script.js"></script>
</head>
<body> <div id="myapp"></div>
</body>
<script type="text/javascript">

// Start the Elm application.
var app = Elm.Main.init({
    node: document.getElementById('myapp')
});
// Here I have to use `SomeJsWidget`
app.ports.initialiseSomeJsWidget.subscribe(function(args) {
    SomeJsWidget.init(args.config);
});
</script>
</html>

```

Now as I understand it, this is somewhat sub-optimal because rendering of the page is blocked so that `http://somejswidgetthing.com/script.js` can be downloaded and loaded. The normal solution is to add either `async` or `defer` attribute to the `<script>` tag a la:

```auto
  <script async src="http://somejswidgetthing.com/script.js"></script>

```

However, this unfortunately causes a problem in that when the port setup Javascript is run `SomeJsWidget` is not yet defined.

So I guess my question is, has any one looked into this issue and come up with a workable solution?  
Or perhaps we just accept that script downloading takes place synchronously, maybe it doesn’t matter so much that rendering is blocked since it’s the Elm app that does most of the rendering. In my particular case here it’s a full SPA so Elm does all the rendering but in theory elm might only be rendering a single `div` in a larger page.

I also realise that if you do get something working so that you can asynchronously load `SomeJsWidget` whilst the Elm app gets to render, then you are necessarily delaying the setting up of the port, and hence you might want to send an additional message to the Elm app when that port _is_ setup and ready.

Anyway I guess I’m asking is there a best practice here?

---

<div class="post-metadata">

**Author:** ![jackwilsdon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jackwilsdon/32/2812_2.png) [@jackwilsdon](https://discourse.elm-lang.org/u/jackwilsdon)\
**Post date:** [June 20, 2020, 4:27pm UTC](https://discourse.elm-lang.org/t/loading-javascript-scripts-that-interact-with-ports/5944/2 "2020-06-20T16:27:57Z")

</div>

I’ve not tried this, but you could possibly leave the script async and then add an onload listener to connect up the ports? This means you only end up actually connecting to the elm ports once the script has loaded.

---

<div class="post-metadata">

**Author:** ![allanderek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/allanderek/32/1360_2.png) [@allanderek](https://discourse.elm-lang.org/u/allanderek)\
**Post date:** [June 20, 2020, 8:00pm UTC](https://discourse.elm-lang.org/t/loading-javascript-scripts-that-interact-with-ports/5944/3 "2020-06-20T20:00:04Z")

</div>

That’s definitely worth trying, thanks. I’ll post if this is successful.

# Update

Yes that’s working for me. In my particular case I don’t need to worry about it, but it’s possible the initialise doesn’t occur before you attempt to use the port in the Elm app. In that case, you need to send a message to the Elm app when the initialisation is complete.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [June 30, 2020, 8:00pm UTC](https://discourse.elm-lang.org/t/loading-javascript-scripts-that-interact-with-ports/5944/4 "2020-06-30T20:00:05Z")

</div>

Closed on June 30, 2020, 8:00pm UTC

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.