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
Elm workshop
- 270