23
Elm A Functional Reactive Programming Language

Elm A Functional Reactive Programming Language. Elm in general Elm is a purely functional, single-assignment language Elm syntax is strongly influenced

Embed Size (px)

Citation preview

Page 1: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

Elm

A Functional Reactive Programming Language

Page 2: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 3: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

import Statements > List.isEmpty [] -- List is automatically importedTrue : 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

Page 4: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 5: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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 ++ yfunction> : appendable -> appendable -> appendable

5

Page 6: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 7: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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 headhead :: [a] -> a

Prelude> 1 : [2, 3][1,2,3]

Elm: > 1 :: [2, 3][1,2,3] : List number

7

Page 8: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 9: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 10: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

Records I point = { x = 3, y = 4 } -- create a record

point.x -- access fieldmap .x [point,{x=0,y=0}] -- field access function

{ point - x } -- remove field { point | z = 12 } -- add field { point - x | z = point.x } -- rename field { point - x | x = 6 } -- update field

{ point | x <- 6 } -- nicer way to update a field { point | x <- point.x + 1 , y <- point.y + 1 } -- batch update fields

10

Page 11: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 12: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 13: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 14: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 15: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 16: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 17: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 18: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 19: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 20: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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 typea -> 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) typeSignal a -> Signal Element

If you run this example, the result will be a continuous display of the mouse position

20

Page 21: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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

Page 22: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

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_p4ED9oLTJQrzoM1QEL

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

Page 23: Elm A Functional Reactive Programming Language. Elm in general  Elm is a purely functional, single-assignment language  Elm syntax is strongly influenced

23