Beyond ReactFunctional Programming with Elm

damienklinnert

What does this evaluate to?

['10', '10', '10', '10', '10'].map(parseInt)

Obvious?

['10', '10', '10', '10', '10'].map(parseInt)

=> [ 10, NaN, 2, 3, 4 ]

mathiasverraes

ReactA great JavaScript library

ElmA language designed for the browser

Basics

JS Elm

Bools

Numbers

Strings

Arrays

Objects

true, false True, False

42, 3.14 42, 3.14

'abc', "abc", `abc` 'a', "abc", """abc"""

[1, 2, 3] [1, 2, 3], [1..4]

{ x: 0, y: 1 } { x = 0, y = 1 }

JS Elm

if

switch

if (key === 40) { n += 1 } else if (key === 38) { n -= 1 } else {}

(n > 10) ? 'a' : 'b'

if key == 40 then n + 1 else if key == 38 then n - 1 else n

if n > 10 then "a" else "b"

switch (msg) { case "greeting": return true; break; default: return false; break; }

case msg of

"greeting" -> True

_ -> False

JS Elm

var / let

comments

var twenty = 2 * 10; var sixteen = 4 * 4; var r = twenty + sixteen

let twenty = 2 * 10 sixteen = 4 ^ 2 in twenty + sixteen

// single line

/* multiline */

-- single line

{- multiline -}

JS Elm

Functions

Lambdas

Invocation

function add(a, b) { return a + b; }

add a b = a + b

(a, b) => a + b

\a b -> a + b

add(2, 3)

true && !(true || false)

add 2 3

True && not (True || False)

New Stuff

ImmutabilitypointA = { x = 3, y = 4 }

-- can read fields

pointA.x

-- but can't set them

pointA.x = pointA.x + 1 -- ERROR

-- create a new point instead!

pointB = { pointA | x = pointA.x + 1 }

TypesAnnotations & Inference

Types-- values 25 : Int'a' : Char "abc" : String

(1, 'a') : (Int, Char)

[1, 2, 3] : List Int { x = 1, y = 2 } : { x: Int, y: Int }

-- aliases type alias Point = { x: Int, y: Int }

Types-- functions

add : Int -> Int -> Int

id : a -> a

map : (a -> b) -> List a -> List b

Types-- union types

type Result value reason = Ok value | Err reason

No null exceptions, evertype Maybe a = Just a | Nothing

case maybeUser of

Just user -> "welcome " ++ user.name

Nothing -> "please login"

Elegant Code* with guarantees

length : List a -> Int length list = case list of

[] -> 0

first :: rest -> 1 + length rest

The Elm Architecturelike React, Redux, immutableJS, �ux, �ow

Building BlocksModel, Message, Update, View

Modeltype alias Model = { tasks : List Task , count: Int }

type alias Task = { description : String , completed : Bool , id : Int }

Messagetype TodoMsg = CreateTask String | UpdateDescription Int String | CompleteTask Int

Updateupdate : TodoMsg -> Model -> Model update msg model = case msg of

CreateTask description -> let newId = model.count newTask = Task description False newId in { model | tasks = model.tasks ++ [newTask], count = model.count + 1 }

-- etc

ViewtaskView : Task -> Html Msg

taskView task =

div

[ class "task"

]

[ input

[ type "checkbox", onClick CompleteTask ]

[]

, text task.description

]

The Magic Gluemain =

Html.beginnerProgram

{ model = model

, view = view

, update = update

}

Result?

Code you canreason aboutone way data �ow, stateless functions, guarantees

Code that istestable

side-effect free, stateless, no mocking

Code that iseasy to change

less boilerplate, powerful refactoring

Elegant, simple andmaintainable code!

\o/

Toolingcompiler with friendly error messagespackage manager enforces semverone command, zero build setupelm-formatjs interop

Communityactive, inclusive and beginner friendlygreat documentation with heaps of examplesfocus on building things

I'm sold! How do I get started?

Elm Website - elm-lang.org

The Elm Guide - guide.elm-lang.org

Sydney Elm Meetup

meetup.com/Sydney-Elm-Meetup/

Questions?Resources

github.com/evancz/elm-todomvcelm-lang.org/docs/syntax