valuemotive / friday-hacks-elm

Intro to Elm language with examples

Friday Hacks: Elm

About Friday Hacks

Friday Hacks is an informal event that takes place on most Fridays at 1pm, at the Valuemotive office.

Valuemotive has a culture of sharing interesting ideas. Our employees are curious, which leads to ad hoc exchanges. Folks will test the validity of their ideas, ask for feedback on complicated things and discuss their work with others.

We play with an interesting piece of tech and have a discussion about it with an expert present. We often weight on pros and cons of using the tech at work. We always learn something new! You are looking at a demo/boilerplate/guide that was prepared in advance to support the ’Hack.

Examples of previous Friday Hacks: AWS Lambda + Serverless framework, Apache Airflow, Rust, Elm.

Useful Links

Elm-lang website

Official package registry

Official Elm guide

Ellie, Elm playground

Running Elm apps

In order to build/run these examples you need to have the Elm platform and create-elm-app installed.

Easiest way to get both is to use NPM:

npm install -g elm create-elm-app

You might be able to find the Elm platform in your OS package manager registry, like in Homebrew (brew install elm).

The Elm community has adopted a pseudo-official formatter, elm-format. It's supported by most editor plugins. Get it via:

npm install -g elm-format

The VS Code extension is great. It can format and check your code, and autocomplete your code.

Examples

A Simple Counter

Subfolder counter-simple

This example is practically the same as in the official Elm guide. You can increment and decrement a counter :)

A pure Elm app, and therefore can be built via elm make src/Main.elm, or you can use elm reactor (recommended) to run it locally and built on demand.

Http-based Counter

Subfolder counter-http

Looks the same as above, but the state lives in a backend service, and incrementing/decrementing the counter triggers a HTTP request. This example gives you an idea of how fetching JSON works in Elm, and how it can be done without worrying about runtime exceptions.

Uses counter-as-a-service as the backend. Deployed to Heroku as caas-demo.

A pure Elm app, and therefore can be built via elm make src/Main.elm, or you can use elm reactor (recommended) to run it locally and built on demand.

JavaScript Interop

Subfolder js-interop

This example is adapted from the "Taking still photos with WebRTC" guide on MDN. The still image and the photo capture trigger have been ported in to Elm.

Now the flow is such: JS draws the video stream into a canvas. Elm renders the capture button, and sends a message to JS when it's pressed. JS then encodes a still image into a data URL and sends it to Elm, which renders it.

Project generated by create-elm-app. elm reactor doesn't support JavaScript interop, so you'll need to use the elm-app start command to see the project in action.