An introduction to programming in Elm
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
elm-stuff
public
src
tests
.DS_Store
.gitignore
README.md
elm-package.json
errors.png
literals.png
speed-graph.png
time-travel.png

README.md

Introduction to Elm

Daniel Risdon, JR Rene, Rebekah Bae

What is Elm?

Elm is a functional language that compiles to JavaScript and runs in the browser. It was first introduced as a front-end language in 2012 by Evan Czaplicki and focuses on usability, performance, and robustness. Elm is statically typed, and encourages a separation of data and logic, effectively creating a state machine, bearing some similarities to React.

If you have an hour to kill this evening, watch Evan’s keynote in Prague.

Advantages of Using Elm

  • Time travel debugger

  • Friendly error messages

  • Excellent documentation and examples - can be found here

Basic Elm Architecture

  • Model - a representation of your application state
  • View - a function that turns models into HTML
  • Update - produces a new model

Installing Elm

Elm can be downloaded via npm by entering $ npm install -g elm into the terminal. This will give access to several new terminal commands, elm-repl, which will open up a repl in the terminal, elm-reactor, which will locally host your Elm app, elm-make, which compiles Elm code into HTML and JavaScript and elm-package, which is used similarly to npm to install Elm-specific packages. You should also make sure to use your text editor’s package manager to install syntax highlighting for Elm.

Elm Boilerplate

An elm app has this general structure. With sections for Model, View, and Update.

import Html exposing (..)

-- MODEL

type alias Model = { ... }

-- UPDATE

type Msg = Reset | ...

update : Msg -> Model -> Model
update msg model =
  case msg of
    Reset ->

-- VIEW

view : Model -> Html Msg
view model =

Similarities

Mathematical expressions are fundamentally the same as they are in most languages. 1 + 1, 2 * 2, etc... Division is done with either floating point division / or integer division //. String concatenation is similar, but uses ++, rather than just +.

Syntax Differences

That’s pretty much where the similarities end. Functions, for example, are written first by declaring the function name and the data types it takes and returns, and then writing out the function. I.e.

addTwo : Int -> Int
addTwo x =
	x + 2

Conditionals are written as such:

if true then "option 1" else "option 2"

Lists are used similarly to arrays in javascript, and are written the same way: [1, 2, 3]

Tuples are a data structure not found in JS, and are useful for returning multiple values from a function: (1, 2).

Records fill the place of objects, and are written similarly, as key-value pairs, contained within curly brackets: { a = 1, b= 2 }, but using equals signs rather than colons.

Creating and manipulating DOM elements is done using tag names like in HTML, but with square brackets for element properties and content:

div []
   [ h1 [] [ text "WOW LOOK AT THIS" ]
 ]

The first set of brackets after the div tag would hold properties such as class, id, or even listeners, and the second set holds content such as text.

Speed

When comparing React Elm, and Angular in particular, you will find that Elm is the fastest. React takes about twice the amount of time that Elm takes to do the same work. Even without optimization, Elm is extremely fast. You can run the test for yourself here. ( https://evancz.github.io/react-angular-ember-elm-performance-comparison/ )