Introduction to Elm @ React.js Meetup, Wrocław, 2015-11-24

links.md

1. http://elm-lang.org/examples/mouse-position

The example I showed was just a little bit different. Paste this code instead:

import Html exposing (..)
import Mouse


main : Signal Html
main =
  Signal.map (toString >> Html.text) Mouse.position

2. http://elm-lang.org/guide/reactivity#signals

3. https://github.com/evancz/elm-architecture-tutorial/blob/master/examples/1/Main.elm

https://github.com/evancz/elm-architecture-tutorial/blob/master/examples/1/Counter.elm

4. https://github.com/evancz/elm-architecture-tutorial/blob/master/examples/2/CounterPair.elm

5. http://debug.elm-lang.org/edit/Mario.elm

6. https://github.com/evancz/elm-todomvc/blob/master/Todo.elm

7. https://github.com/evancz/elm-architecture-tutorial/blob/master/examples/5/RandomGif.elm

slides.txt

The Elm Architecture




Jan Dudek

React.js Meetup

2015-11-24



















What is Elm?


* purely functional language

* FP for humans

* compiles to JavaScript

* static typing

* functional reactive programming

* The Elm Architecture














Purely functional language

* all data is immutable

* no side effects inside pure functions

* communication with outside world:

  Signals

  Tasks


















FP for humans


* Not like Haskell…

  “A monad is just a monoid in the category of endofunctors”

  “A catamorphism deconstructs a data structure with an F-algebra for its underlying functor”



















Compiles to JavaScript


  …but with its own runtime




















Static typing

* if your code compiles, it’s very likely to work correctly on the 1st run

* (almost) no runtime exceptions
















Static typing: examples

















Static typing: benefits



* types like Maybe force us to *always* handle failure

* no way to interact with outside world without using special types

* never see:

    Cannot read property 'foo' of undefined

    'foo' is not a function

    etc.

* don’t worry about making typos and other silly mistakes anymore

* refactor with confidence – compiler will find the errors


















Functional reactive programming



* signals

  for example: mouse position, last pressed key, results of HTTP requests


* the application is also a signal: signal of Html values



* all external input can be modelled as signals










The Elm Architecture


* model – state of the app

* view – pure mapping from model to html

* update – change model when an action happens
















The Elm Architecture: composability


* compose components by composing their model, view & update

init


















Example: time-travelling debugger

























The Elm Architecture: effects


* all side effects have to be modelled explicitly


* instead of

    update : Action -> Model -> Model

  we have

    update : Action -> Model -> (Model, Effects)


* in other words, all side effects have to be performed *explicitly*















Why should I learn Elm?


* it’s fun

* it’s mind-bending

* it *forces* you to use best practices

* the Elm Architecture is the main inspiration for Redux (a Flux implementation)
















Thank you!

types.elm

numbers : List Int
numbers = [1, 2, 3]

















plus : Int -> Int -> Int
plus x y = x + y

-- e.g. `plus 2 3` returns `5`


plus2 : Int -> Int
plus2 = plus 2

-- plus2 3 => 5






type Bool = True | False




type Maybe a = Nothing | Just a






head : List a -> Maybe a
head list =
  case list of
    [] -> Nothing
    (x :: xs) -> Just x










someFun xs =
  case head xs of
    Just x -> …

    Nothing -> …










type Result a b = Ok a | Error b


-- for example:

parseInt : String -> Result Int ParseError

type alias ParseError = String











-- records

type alias Point = { x : Int, y : Iny }

point = { x = 3, y = 4 }