A presentation made to our Elixir meetup group on what I've learned about Elm and what I value in it. Lots of links that can be explored during the presentation.

1. WHY ELM?WHY ELM?
SCOTT SMITHSCOTT SMITH
SCOTTNELSONSMITH@GMAIL.COMSCOTTNELSONSMITH@GMAIL.COM

2. WHY ELM EXIST??WHY ELM EXIST??
Purpose: "writing great code should be easy … now it is"
How: "the best of functional programming in your browser"
Example: "Hello World"

3. WHY ELM LANGUAGE?WHY ELM LANGUAGE?
Elm Syntax
Core Language

4. WHY ELM LIBRARIES?WHY ELM LIBRARIES?
Rendering
Effects
elm-http
start-app
elm-effecs
elm-html
elm-svg
elm-markdown
elm-webgl
Core

5. WHY ELM RELIABILITY?WHY ELM RELIABILITY?
Contracts
Enumerations
State Machines
Tagged Unions
Banishing NULL
Recursive Data Structures
Precisely model the problem!

6. WHY ELM EXAMPLES?WHY ELM EXAMPLES?
Graphics
Games

7. WHY ELM GRAPHICS?WHY ELM GRAPHICS?
Build in concepual layers
shape outline the shape
form "fill in" shape using texture
collage render List of form in rectangular area
Html convert collage to HTML elements

8. GRAPHICS EXAMPLEGRAPHICS EXAMPLE
import Html exposing (text)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
import Color exposing (lightBrown)
main =
Html.fromElement (collage 200 200 [
filled lightBrown (ngon 4 50)
])

9. GRAPHICS EXMAPLE USING ELIXIR PIPEGRAPHICS EXMAPLE USING ELIXIR PIPE
tho it's called a forward function in Elm
import Html exposing (text)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
import Color exposing (lightBrown)
main =
ngon 4 50
|> filled lightBrown
|> List.repeat 1
|> collage 200 200
|> Html.fromElement

10. WHY ELM GAMES?WHY ELM GAMES?
( )GitHub
Mario
Pong
Froggy

11. WHY ELM ARCHITETURE?WHY ELM ARCHITETURE?
-- MODEL
type alias Model = { ... }
-- UPDATE
type Action = Reset | ...
update : Action -> Model -> Model
update action model =
case action of
Reset -> ...
...
-- VIEW
view : Model -> Html
view =
...

12. WHY ELM SIGNALS?WHY ELM SIGNALS?
type alias Model = Int
type Action = Increment | Decrement
update : Action -> Model -> Model
update action model =
case action of
Increment -> model + 1
Decrement -> model - 1
view : Signal.Address Action -> Model -> Html
view address model =
div []
[ button [ onClick address Decrement ] [ text "-" ]
, div [ countStyle ] [ text (toString model) ]
, button [ onClick address Increment ] [ text "+" ]
]
Running Code!

13. WHY ELM REACTIVE?WHY ELM REACTIVE?

14. WHY ELM FOR ME?WHY ELM FOR ME?
Javascript is general purpose – no "point of view"
Functional programming: creativity through constraints
Hoping it guides me on building a non-trivial 2D game

15. WHY LEARN ELM?WHY LEARN ELM?
Weekly Elm Hacking Session
Saturday mornings 10:00-noon (starting May 7)
Here
Emphasis on client functional programming
Game development
Sophisticated user experience
Integration w/ Elixir/Phoenix