[004.6] Elm Weekly Drip #4 and Exercise: Ports, Outbound and Inbound

The week's links, and an exercise to implement both inbound and outbound ports from scratch to reinforce our understanding.

Subscribe now

Elm Weekly Drip #4 and Exercise: Ports, Outbound and Inbound [05.13.2016]

This week we'll combine inbound and outbound ports in the exercise. First, though, some links from around the internet.

There are a lot of fun links this week. A bit of learning, a bit of new libraries, and a great Richard Feldman video.

VIDEO - LambdaConf 2015 - Shipping a Production Web App in Elm, by Richard Feldman


Modals for elm, from Kris Jenkins.


A simple Webpack setup for writing Elm apps:

  • Dev server with live reloading, HMR
  • Support for CSS/SCSS (with Autoprefixer), image assets
  • Bootstrap 3.3+ (Sass version)
  • Bundling and minification for deployment
  • Basic app scaffold, using Html.beginnerProgram
  • A snippet of example code to get you started!

Elm Friday - Type System Basics - Union Types and Tagged Unions (Part X)

A nice writeup explaining Union Types and Tagged Unions.

A discussion of the elm-light plugin for LightTable

A discussion of interop between an Elm app and a Clojurescript app, for building the Elm plugin for lighttable.


Contains elm-for-js right now, which is a community-driven Elm guide for JS people. Not yet updated for 0.18 as of this writing.

How Elm made our work better

A discussion from futurice about how they switched to Elm and got happy about it.

Elm's Style Guide

elm-vim - Pretty useful if you're a vim user.

Learn X in Y Minutes (let X = Elm)


In the last few episodes, we saw how Elm and JavaScript could interact via ports, both inbound and outbound.

For this exercise, create a new project that has both inbound and outbound ports:

  • On the elm side:
    • Add a text field to reflect a number from the model.
    • Add an inbound port that increments the number when it receives any value.
    • Add a button.
    • Add an outbound port, and send the number from the model to the port whenever the button is clicked.
  • On the html side:
    • Add a button that sends a value to the inbound port when clicked.
    • Each time the Elm outbound port sends a number, add it to an li inside of a ul.
  • Note:
    • Since you have both elm and html content at play, you'll want to use Elm.Main.embed(someElement) rather than Elm.Main.fullscreen().