Transcript Elm 1

Elm
A Functional Reactive Programming Language
Elm in general



Elm is a purely functional, single-assignment language
 Elm syntax is strongly influenced by Haskell
 Concepts are more like ML
 Some ideas have been borrowed from #
The new feature of Elm is signals
 Signals are “variables” whose value changes in
response to external events
 This makes Elm a functional reactive language
Elm compiles into JavaScript
 Thus, Elm is designed to create interactive web pages
2
import Statements





> List.isEmpty []
-- List is automatically imported
True : Bool
import List -- Explicit qualified import
 > List.isEmpty []
True : Bool
import List as L -- Renaming
 > L.isEmpty []
True : Bool
import List exposing (isEmpty, map)
 > isEmpty []
True : Bool
import List exposing (..)
 > isEmpty []
True : Bool
3
Data types


Elm has the usual data types

Integers, Int

Floats, Float

Booleans, Bool, True and False

Strings, String, in double quotes

Characters, Char, in single quotes

Lists, List, [value, value, ..., value]

All elements of a list must be of the same type

Tuples, (value, value, ..., value)

Records (like maps)

{ name = value, name = value, ..., name = value }

The name is part of the data type
Comments are -- (single line) or {-...-} (multiline, nestable)
4
Polymorphism

Elm is polymorphic -- that is, it figures out the most
general type that will work
 A number without a decimal point (for example, 5) is
just a number, and may be used as either an integer
or a float
 > concat x y = x ++ y
function> : appendable -> appendable ->
appendable
5
Operators



Logical: &&, ||, and not
Arithmetic: +, -, *, /, // (integer division), % (mod),
^ (exponentiation)
 Mixed mode arithmetic (mixing integers and floats in
an expression) is not allowed
 There are functions toFloat (for integers) and
round and truncate (for floats)
Strings and lists: Append with ++
6
Lists

Lists are values of the same type, enclosed in brackets
 Example: [1, 2, 3]
 Syntax inversion: Elm and Haskell both use : and :: but
reverse their meanings
 Haskell:
 Prelude> :t head
head :: [a] -> a
 Prelude> 1 : [2, 3]
[1,2,3]
 Elm:
 > 1 :: [2, 3]
[1,2,3] : List number
7
Tuples


Tuples are comma-separated values enclosed in
parentheses
 Example: ("Joe", 55)
There are functions for creating tuples from values; these
functions have the names (,), (,,), (,,,), and so on
 Example: (,) "Joe" 55
8
Functions

Functions are defined much as they are in Haskell,
although fewer variations are possible
 Function literals: square = \n -> n ^ 2
 Simple functions: add x y = x + y
 Pattern matching: first (head::tail) =
head
9
Records I

point = { x = 3, y = 4 }
-- create a record

point.x
map .x [point,{x=0,y=0}]
-- access field
-- field access function

{
{
{
{
-----





point
point
point
point
|
-
x
z
x
x
}
= 12 }
| z = point.x }
| x = 6 }
remove field
add field
rename field
update field
{ point | x <- 6 }
-- nicer way to update a field
{ point | x <- point.x + 1
, y <- point.y + 1 }
-- batch update fields
10
Records II

-- pattern matching on fields

dist {x,y} = sqrt (x^2 + y^2)
This shows a polymorphic function -- dict will accept any
record with x and y fields
\{x,y} -> (x,y)



-- polymorphic fields

lib = { id x = x, flip f x y = f y x }
Here the fields are polymorphic functions
lib.id 42 gives 42
lib.flip (++) "ab" "cd" gives "cdab"




http://elm-lang.org/docs/syntax#functions
11
Records III

The type of a record includes the field names as well as
their types

> { x = 0.0, y = 0.0 }
{ x = 0, y = 0 } : { x : Float, y : Float }
12
Types and type aliases

The type statement defines a new type
 type Direction = Left | Right
 type Shape
= Point Float Float
| Line Point Point
| Circle Point Float

A type alias just gives a name to an existing type
 type alias Location =
{ row:Int, column:Int }
13
if expressions


Elm is expression-oriented, not statement-oriented, so
if expressions must have both an else and a then part
 Example: if 2+2 == 4 then "yes" else
"no"
Elm has multi-way if expressions
 Example:
if | n < 0 -> "negative"
| n == 0 -> "zero"
| otherwise -> "positive"
14
Multi-line expressions in the REPL




In the REPL, hitting Return/Enter ends the expression
To enter multiple lines, put \ after each line
 Do not put a space after the \ !
Elm will respond with a | prompt
 This is not the | you need in a multiline if expression!
Example:
> if | n < 0 -> "negative" \
| | n == 0 -> "zero" \
| | otherwise -> "positive"
"positive" : String
15
case expressions


Example:
case xs of
hd :: tl -> Just hd
_ -> Nothing
Notes:
case expressions use pattern matching
 Indentation is relevant, and each case after the first
must begin in the same column as the first
 The _ acts as a “wild card”--it will match anything
 The result is of type Maybe.Maybe, that is, class
Maybe from the Maybe module
16
let expressions


A let expression defines some values to be used in a
expression
 Example:
let a = 5
b = 12
in
sqrt(a ^ 2 + b ^ 2)
As with case expressions, each value after the first must
begin in the same column as the first
17
Reducing the number of parentheses





The function f can be applied to the value x in any of three ways
 f x
 f <| x
 x |> f
The x is put as the last argument of f
Expressions with parentheses have to be evaluated “from the inside out”
The above operators allow such expressions to be linearized
The following are equivalent:
 scale 2 (move (20,20) (filled blue (circle 10)))
 circle 10
|> filled blue
|> move (20,20)
|> scale 2
18
Callbacks


A callback is a construction in languages such as Java,
C++, and JavaScript
 A callback attaches listeners to events, such that when
an event occurs, the listener is invoked (called)
Callbacks require the programmer to write listeners for
each expected kind of callback
 The callback then manipulates data in some other part
of the program
19
Signals

A signal is a variable that varies over time
 Example: Mouse position
 import​​
Graphics​
.​
Element​exposing (..)
 ​
import​​
Mouse​
 main = ​
Signal​
.map show ​
Mouse​
.position
 Mouse.position is an (x, y) pair
 show is a function to turn a value into a string; it has type
a -> Graphics.Element.Element
 map applies show to the elements of the pair
 Signal.map has type
(a -> b) -> Signal.Signal a -> Signal.Signal b
 (Signal.map show) therefore has the (unqualified) type
Signal a -> Signal Element
 If you run this example, the result will be a continuous display of the mouse
position
20
Algebraic Data Types

You can build your own data types with the type declaration

Examples:
type Color = Black | White

This is a union type

type Piece = Pawn | Knight | Bishop | Rook |
Queen | King

type ChessPiece = CP Color Piece

piece = CP Black Queen


Excerpt From: Bruce A. Tate, Fred Daoud, Ian Dees, Jack Moffitt. “Seven More
Languages in Seven Weeks”
You can use type variables in data type definitions

Example:
type Tree a = Empty | Node a (Tree a) (Tree a)
21
References







Elm web site: http://elm-lang.org
Introductory video:
http://www.infoq.com/presentations/elm-reactive-programming
More extensive video tutorial (2½ hours):
https://www.youtube.com/playlist?list=PLtdCJGSpculbDT_p4ED9oLTJQ
rzoM1QEL
Syntax summary: http://elm-lang.org/learn/Syntax.elm
First chapter of an excellent tutorial series:
http://elm-by-example.org/Chapter1HelloWorld.html
Other learning resources: http://elm-lang.org/Learn.elm
Sublime Text 2 (not 3) plugin:
https://github.com/deadfoxygrandpa/Elm.tmLanguage


I have not gotten this to work; if you do, post what you did to Piazza
The Haskell mode works well if you don’t use Markup
22
23