[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

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().

Published on 05.13.2016