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.positionhttps://github.com/evancz/elm-architecture-tutorial/blob/master/examples/1/Counter.elm
| 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! | |
| 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 } | |