ELM |> PHOENIX

Who am I?

▸ Jechol Lee (github.com/jechol, mr.jechol@gmail.com)

▸ Software engineer at Skelter Labs

▸ We are hiring!

What is ELM?

What is ELM?

▸ Functional Programming Language derived from Haskell.

What is ELM?

▸ Functional Programming Language derived from Haskell.

▸ NO RUMTIME ERROR.

What is ELM?

▸ Functional Programming Language derived from Haskell.

▸ NO RUMTIME ERROR.

▸ Opinionated about "How web application should be organised"

▸ Virtual DOM

▸ One-way data flow

What is ELM?

▸ Functional Programming Language derived from Haskell.

▸ NO RUMTIME ERROR.

▸ Opinionated about "How web application should be organised"

▸ Virtual DOM

▸ One-way data flow

▸ Includes

▸ Package manager

▸ Build tools

Core Lib

App LifeCycle

Transpiler

Build

Pkg Mgr

Core Lib

App LifeCycle

Transpiler

Build

Pkg Mgr

Modern JS

React

Redux

Babel

Webpack

NPM

Core Lib

App LifeCycle

Transpiler

Build

Pkg Mgr

Modern JS

React

Redux

Babel

Webpack

NPM

Elm

Elm

Elm

Elm

Elm

Elm

What do you expect when you first run your Javascript?

UNDEFINED IS NOT A FUNCTION

Undefined is not a function.

Javascript No static type checking

Control-flow leaps to here,

and returns 'undefined'

Control-flow leaps to here,

and returns 'undefined'

Elm is static type language.

COMPILE ERROR

Function should return a same type of values.

COMPILE ERROR

No null in Elm

Elm Null 에러 캡쳐

Null is EVIL

Maybe

No runtime error

Immutable Data

State is managed by Elm architecture.

ELM architecture

UPDATE

INIT MODEL(0)

VIEW

ELM architecture

UPDATEINIT MODEL(0)

VIEW

ELM architecture

UPDATE

VIEW

ELM architecture

UPDATE

VIEW

STATE (0)

ELM architecture

UPDATE

VIEW

STATE (0)

ELM architecture

UPDATE

VIEW

STATE (0)

ELM architecture

UPDATE

VIEW

STATE (0) +- 0

Update

UPDATE

VIEW

STATE (0) +- 0

Update

UPDATE

VIEW

STATE (0) +- 0CLICK

Update

UPDATE

VIEW

STATE (0) +- 0

Increment

CLICK

Update

UPDATE

VIEW

STATE (0) +- 0

IncrementNew model (=1)

CLICK

Update

UPDATE

VIEW

+- 0

IncrementNew model (=1)

CLICK

Update

UPDATE

VIEW

+- 0

IncrementNew model (=1)

STATE (1)CLICK

Update

UPDATE

VIEW

+- 0

IncrementNew model (=1)

STATE (1)CLICK

Update

UPDATE

VIEW

+-

IncrementNew model (=1)

STATE (1)CLICK

Update

UPDATE

VIEW

+-

IncrementNew model (=1)

STATE (1) 1CLICK

Side effect in Elm - WebSocket push

Cmd is just data describing

a side effect we want.

JS inter-op : Port

JAVASCRIPT VIDEO PLAYER

ELM

seekToplayTime

Player Annotation page

Book example

VIDEO ANNOT

curPlaytime

seekTo(sec)

PHOENIX CHANNEL

WebSocket

Clone with Elm

PHOENIX CHANNEL

VIDEO

JS ELM

PHOENIX CHANNEL

VIDEO

JS ELM

JS inter-op = ELM Port

PHOENIX CHANNEL

VIDEO

JS ELM

Writes to Socket

→ Side effect

→ ELM Cmd

JS inter-op : ELM port

Our Elm code Elm Runtime

PHOENIX

Controlled side effects

Socket.push

Our Elm code Elm Runtime

PHOENIX

Controlled side effects

Socket.push

Our Elm code

CMD

Elm Runtime

PHOENIX

Controlled side effects

Socket.push

Our Elm code

CMD

Elm Runtime

PHOENIX

Controlled side effects

Socket.push

Our Elm code

CMD

Elm Runtime

PHOENIX

Actual push is done here.

Controlled side effects

Socket.push

Our Elm code Elm Runtime

PHOENIX

Actual push is done here.

Controlled side effects

Socket.push

Our Elm code Elm Runtime

PHOENIXDATA

Actual push is done here.

Controlled side effects

Socket.push

Our Elm code Elm Runtime

PHOENIXDATA

Actual push is done here.

Controlled side effects

Socket.push

Our Elm code Elm Runtime

PHOENIX

Actual push is done here.

Controlled side effects

Socket.push

Our Elm code Elm Runtime

PHOENIX

Actual push is done here.

No side effect → 100% testable

Controlled side effects

Live Code

Thanks

source code: bit.ly/elm-phx