Introduction to Elm

What is it?

Elm is a functional language that compiles to JavaScript.

Elm is about

  • No runtime errors in practice
  • Friendly error messages 
  • Well-architected code 
  • Automatic enforced semantic versioning

Instalation

# Mac OS X
# Homebrew
$  brew cask install elm-platform

# Test install
$ elm make --version

Tools

elm

elm-package
    install

    publish

    bump

    diff

elm-make

elm-repl

elm-reactor

Creating a project

# Just create a dir
$ mkdir helloworld; cd $_

# Install core language package
$ elm package install

# Install html package
$ elm package install elm-lang/html

Hello World!

module Hello exposing (..)

import Html exposing (text)

welcome name = "Qué tranza, " ++ name

main =
  text(welcome "la banda")

Visualization

# Compiles to index.html
$ elm make Hello.elm --output index.html

$ open index.html

# Report warnings to improve code quality
$ elm make --warn Bingo.elm --output index.html

$ rm index.html

# See changes automatically
$ elm reactor

# Change address and/or port
$ elm reactor -a=localhost -p=9000

Documentation

http://package.elm-lang.org

Functions

Usage

$ elm repl
---- elm repl 0.17.0 -----------------------------------------------------------
 :help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
--------------------------------------------------------------------------------
> import String
> String.toLower
<function:toLower> : String -> String

> String.pad
<function:pad> : Int -> Char -> String -> String

> String.pad 9 '\'' "pad"
"'''pad'''" : String

> String.trim "  title "
"title" : String

> String.padRight 20 '.' "Title"
"Title..............." : String

> String.padRight 20 '.' "Title 2"
"Title 2............." : String

Pipe operator

> String.toUpper(String.padRight 20 '.' (String.trim "  tile "))
"TILE................" : String


> "  tile " |> String.trim |> String.padRight 20 '.' |> String.toUpper
"TILE................" : String

Declaration

> cube number = \
|   number * number * number
<function> : number -> number

> cube 3
27 : number

> divide number anotherNumber = \
|  number / anotherNumber
<function> : Float -> Float -> Float

> divide 6 3
2 : Float

Exercise

Elm workshop

By Raúl Vázquez