What are you using ports for in 0.19?

Learn
1

Now that 0.19 has been out for a while, what things are you still using ports for? Could you feasibly write your entire app in Elm? Why/why not?

4 Likes
2

Svg editor app:
I need the Svg userspace coordinates, not the px position for mouse events.
This is only possible to get from a port or a custom element.

2 Likes
3

I use ports extensively to communicate with the Media API, which is a key part of just about everything I do, to control video and audio playback, etc.

2 Likes
4

The elm-vega and elm-vegalite packages both use ports to send visualization specifications to javascript to do the actual graphics rendering. While I would love to be able to keep everything in-house in Elm, there seems little point in duplicating what would be a very complex and diverse set of operations for rendering (from simple charts to map projections, force-directed graphs, treemaps, voronoi diagrams, word clouds, complex interaction etc.).

1 Like
5

I have not updated NoKey to 0.19 yet, but here are the things that I’ve used ports for that Elm currently can’t do:

  • Interact with local storage
  • Listen to ‘online’ and ‘offline’ events
  • Reading files
  • Using the Web Crypto API
  • Interact with the WebExtensions API
  • Scan QR code on Android: This actually calls a function written in Kotlin in the surrounding Android app, so this is something that will always require using a port.

I also use MutationObserver to provide ‘copy to clipboard’ functionality.

1 Like
6

Haven’t hit a great deal yet, but these two for sure.

  • Interop with KaTeX (specifically getting it to typeset math in markdown previews & rendered markdown strings)
  • LocalStorage

Something else that may be a problem still, but haven’t looked into upgrading this bit of one of my tools yet:

  • Identifying the closest H1 element to pull in a document title
function closestTitle(el) {
        var previous;
        // traverse previous elements to look for a h1
        while (el) {
            previous = el.previousElementSibling;
            if (previous && previous.tagName == "H1") {
                return previous.innerText;
            }
            el = previous;
        }
        return document.title; //If not found, use the page title
    }
7
  • LocalStorage, in most apps
  • Text selection
  • Clipboard
  • Text metrics, which was much more convenient as behind the scenes native code in one of the modules I used.
  • FileReader
  • Browser notifications
  • Calling JS libraries (libsodium)
  • I’ve been putting off websocket updates so far, but if I needed it that would have to be ports.
1 Like
8
  • Download csv files
  • Talk to Stripe
  • Local storage
  • Interact with the video element
  • Send errors to rollbar
1 Like
9

I’m using ports to:

  • read image files and generate local url for the in-memory image binary file
  • trigger saving of text files on disk
  • access the gamepad controller API for games
  • access sound API for games
  • capture pointer events
  • html5 drag API (often not good idea)
1 Like
10

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