Using Ports in Elm

Last week I had the opportunity to speak at a local meetup here in Portland about my favorite new technology: Elm! Specifically how to use your Elm code in connection with other JavaScript code or libraries.

If you don't know what Elm is, or have somehow managed to avoid my endless tweets about it, it's a functional language that compiles down to JavaScript for us in the browser. You might wonder why you'd ever want to learn another language if you can already write JavaScript, but Elm's type system, along with it's super helpful compiler, mean you can build reliable apps that never have any runtime exceptions!

Add to that a super fast virtual DOM implementation that's faster than those other JS frameworks, and it's a winning combination. No more JavaScript fatigue keeping up with the latest frameworks and libraries. Just write code with guarantees and apps that just work.

Since Elm is a newer language though, it doesn't cover every browser API yet, and sometimes you have a use case that is already solved by a JavaScript library on npm, and there isn't an equivalent on the Elm Package repository yet.

This is where Ports come in. They open up a hole in your Elm app that allows you to send values in and out, to and from JavaScript. This allows you to leverage the entire JavaScript ecosystem without losing all of the guarantees that Elm can provide you.

In my talk, I went into detail about how Ports work, went over how Elm protects your app from bad JavaScript code, and built out a small audio demo that leveraged the browser's Audio API and a few npm packages to detect pauses in the audio and save the audio segments to a database.

You can view the slides and the demo code on Github. If you have any questions or thoughts, let me know!

Also, if you're in Portland, my fellow organizers and I are working on bringing more Elm meetup events to the area, so sign up for the Meetup group so you can get notified when new events are scheduled. We'd love to see you there!