24: Adding Elm - JSToElm
All Episodes

24: Adding Elm

We've got our project up and running, and now's the time to start refactoring it into Elm. How do we get Elm to play nice with our React app, better still what part of the app should we start with? There seems to be more questions than answers, but we'll work our way through it.

Recapping our app

  • We talked a little bit about our app last week, mostly I think we highlighted the backend stack. S3, Lambda functions, DynamoDB blah blah blah.
  • Haven’t added Redux at this point. We’ve got a handle full of containers or smart components that have their own state management. Yeah Yeah Yeah, best I could scramble together in a week, ok?
  • But that gives a unique opportunity. Evan makes a point in Elm at work:

    Fix a Problem

  • Adding Elm to any project will produce 2 results:

    1. “You know that code that was totally fine? It is different now.” OR
    2. “You know that crazy code that everyone fears touching? It is simpler now and I resolved some bugs.”
  • So the idea in recapping our app is to hopefully bubble up some of these “opportunities”
  • No offline usage, we had specifically listed this in our beginning features with the release of iOS 11.3 beta that has service workers. I know know, Android for like 2 plus years.
  • All auth is done through aws incognito, so we don’t really have to worry to much about that.
  • our lib/awsLib.js is doing a lot of our heavy lifting service wise

    • invokeApig sending/receiving http requests
    • auth users
    • signout users and clear awsCache
    • s3 upload - yeah, you forgot our app can upload a file attached to a note!!!!

Adding Elm to Our Project

Should be pretty straight forward, right? Yeah I think so. We’ll just need a few things first

  • eject our react app
  • elm-webpack-loader link
// loader for elm files
	test: /\.elm$/,
	exclude: [/elm-stuff/, /node_modules/],
	loader: require.resolve('elm-webpack-loader')
  • react-elm-components

    • rewrite
    • bc it’s a good idea
    • and bc no choice
import React, { Component } from "react";

export default class extends Component {
  shouldComponentUpdate() {
    return false;

  initialize = node => {
    if (node === null) return;
    const app = this.props.src.embed(node, this.props.flags);

    if (typeof this.props.ports !== "undefined") {

  render() {
    return React.createElement("div", { ref: this.initialize });

Finding that part to venture into

  • the elm part…
port module Lander exposing (main)

import Html exposing (Html, div, h1, p, text)
import Html.Attributes exposing (class)

main : Html msg
main =
    div [ class "lander" ]
        [ h1 [] [ text "Meow Notes" ]
        , p [] [ text "A simple meow taking app... elm" ]
  • the actual render as react component part
import Elm from "../libs/react-elm-components";
import { Lander } from "../elm/Lander";


  renderLander() {
    return <Elm src={Lander} />;


  • Meow Notes in Elm
  • State of Elm 2018

    • The State of Elm 2018 is on! We put on this survey every year to take the pulse of the Elm community. Where have we been, and where are we going?
  • Elm Conf Europe

    • Elm Europe will be a two-day conference dedicated to Elm, taking place at the EFREI Engineering School in Villejuif (near Paris, France) on July, 5-6th 2018.
    • Organizers Thibaut Assus and co-organizer Guillaume BOUDON



Published 8 Feb 2018

A show about learning Elm, Functional Programing, and generally leveling up as a JS developer.
JavaScript To Elm on Twitter