Elm on the Functional Frontier

Presentate

Elm

on the functional frontier

github.com/rtfeldman/dreamwriter
CoffeeScript
Elm
type alias Note = {
  title : String,
  body  : String
}

type alias SidebarModel = {
  notes       : List Note,
  currentNote : Maybe Note
}
-- examples of Maybe String

Just "foo"   -- a Maybe container with "foo" in it
Just "stuff" -- a Maybe container with "stuff" in it
Nothing      -- an empty Maybe container
type alias Note = {
  title : String,
  body  : String
}

type alias SidebarModel = {
  notes       : List Note,
  currentNote : Maybe Note
}
-- examples of Maybe Note

Just { title = "Note to self", body = "useful note" }
Just { title = "Another note", body = "also useful" }
Nothing
note1 = { title = "Note to self", body = "useful note" }
note2 = { title = "Another note", body = "also useful" }
note3 = { title = "A note again", body = "pretty cool" }

sidebarModel = {
  notes       = [note1, note2, note3],
  currentNote = Nothing
}
sidebarModel = {
  notes       = [note1, note2, note3],
  currentNote = Nothing
}


view model =
  case model.currentNote of

    Nothing ->
      ul [id "note-list"] (map viewNote model.notes)

    Just currentNote ->
      viewNoteEditor currentNote
elm-html

blazing fast rendering

view model =
  case model.currentNote of

    Nothing ->
      ul [id "note-list"] (map viewNote model.notes)

    Just currentNote ->
      viewNoteEditor currentNote

Stateless function

same arguments, same result
all stateless functions are

cacheable

model = {
  notes       = [note1, note2, note3],
  currentNote = Nothing
}

view model
model = {
  notes       = [note1, note2, note3],
  currentNote = Just note2
}

view model
type Update = NoChange | SetCurrentNote (Maybe Note)
type Update = NoChange | SetCurrentNote (Maybe Note)


transition update model =
  case update of

    NoChange ->
      model

    SetCurrentNote noteOrNothing ->
      { model | currentNote <- noteOrNothing }
transition is also a

Stateless function

finding bugs

becomes much easier!
model = {
  notes       = [note1, note2, note3],
  currentNote = Nothing
}

update = SetCurrentNote (Just note2)

newModel = transition update model

view newModel
-- A channel of Updates
-- Default value is NoChange
updatesChannel = Signal.channel NoChange
updatesChannel = Signal.channel NoChange

-- Send an Update instance to the channel
msg1 = send updatesChannel (SetCurrentNote Nothing)
msg2 = send updatesChannel (SetCurrentNote (Just note2))
updatesChannel = Signal.channel NoChange

msg1 = send updatesChannel (SetCurrentNote (Just note))
msg2 = send updatesChannel (SetCurrentNote Nothing)
  
-- Gets notified whenever the channel gets a message
subscriber = subscribe updatesChannel
viewNote channel note =
  li [
  
    onClick (send channel (SetCurrentNote (Just note))
    
    ]
    [
      span [class "note-icon"]  [],
      span [class "note-title"] [text note.title]
    ]
an entire UI built with

stateless functions

discipline is hard

Invariants are easy

React.render(component, document.getElementById("foo"))
var app = Elm.fullscreen(Elm.YourAppName, {});

immutable data
stateless functions

ports

communicate with arbitrary JavaScript

time traveling debugger
blazing fast performance
no runtime exceptions
simple and powerful
elm-lang.org

I know elm-fu

something

another thing

Liked this talk? Share it!

  •   / 44

Published on , Last updated:

Share this presentation