Introduction to the Elm language, principles, ecosystem and architecture

1. INTRODUCTION TO ELM

2. WHAT IS ELM?
2
•4 years old language
•Compile to JS
•Front-end focus
•Simplicity focus
•FRP focus

3. CHARACTERISTICS
3
•Functional
•ML syntax
•Immutability
•Pure functions
•Strong type system, but:
•No typeclasses
•No higher kinded types
•Functional reactive programming

4. 4
DO I REALLY NEED TO LEARN
A NEW LANGUAGE?
LET’S JUST USE JAVASCRIPT!

5. 5
Elm
JS ES6 + Babel + Webpack + React + Redux + Immutable
or
Typescript
or
Brunch
or
Gulp
or
Grunt
or
Cycle.js + RxJS
or
seamless-
immutableNot even close

6. 6
ELM MAKE
The compiler that talks to you

7. 7

8. 8

9. 9

10. NO RUNTIME EXCEPTIONS
10

11. NO RUNTIME EXCEPTIONS
11

12. 12
A LITTLE MORE OBVIOUS SYNTAX
-- isNotEven = not . isEven
isNotEven = not << isEven
isNotEven' = isEven >> not
-- let lastChar = head $ toList $ reverse "foobar"
let lastChar = head <| toList <| reverse "foobar"
dot =
scale 2 (move (20,20) (filled blue (circle 10)))
dot' =
circle 10
|> filled blue
|> move (20,20)
|> scale 2

13. 13
RECORDS
carolina =
{ name = "Carolina de Jesus"
, age = 62
}
abdias =
{ name = "Abdias Nascimento"
, age = 97
}
people =
[ carolina
, abdias
]
carolina.name
.name carolina
List.map .name people
-- ["Carolina de Jesus", "Abdias Nascimento"]

14. 14
ELM REPL
Just a regular REPL

15. 15

16. 16

17. 17
ELM PACKAGE
The best package manager ever

18. 18
ENFORCED SEMVER

19. 19
ENFORCED SEMVER

20. 20
AUTOMATIC CHANGELOG

21. 21
ENFORCED DOCS

22. 22
ELM REACTOR
Awesome development flow

23. ELM REACTOR
23
•Auto compile Elm
•Hot-swapping
•Time travel debugging

24. 24
EXAMPLE
http://debug.elm-lang.org/edit/Mario.elm

25. 25
THE ELM
ARCHITECTURE

26. 26
SIGNALS
import Graphics.Element exposing (..)
import Mouse
main : Signal Element
main =
Signal.map show Mouse.position

27. 27
Update
Model
Viewaction
signal mailbox

28. 28
talk is cheap, show me the code

29. 29
module Counter where
import Html exposing (..)
import Html.Attributes exposing (style)
import Html.Events exposing (onClick)
-- MODEL
type alias Model = Int
-- UPDATE
type Action = Increment | Decrement
update : Action -> Model -> Model
update action model =
COUNTER.ELM

30. -- UPDATE
type Action = Increment | Decrement
update : Action -> Model -> Model
update action model =
case action of
Increment ->
model + 1
Decrement ->
model - 1
-- VIEW
view : Signal.Address Action -> Model -> Html
view address model =
div []
[ button [ onClick address Decrement ] [ text "-" ]
, div [ countStyle ] [ text (toString model) ] 30
COUNTER.ELM

31. -- VIEW
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 "+" ]
]
countStyle : Attribute
countStyle =
style
[ ("font-size", "20px")
, ("font-family", "monospace")
, ("display", "inline-block")
, ("width", "50px")
, ("text-align", "center")
]
31
COUNTER.ELM

32. 32
MAIN.ELM
import Counter exposing (update, view)
import StartApp.Simple exposing (start)
main =
start
{ model = 0
, update = update
, view = view
}
http://evancz.github.io/elm-architecture-tutorial/examples/1

33. 33
side-effects

34. 34
EFFECTS
type Action
= RequestMore
| NewGif (Maybe String)
update : Action -> Model -> (Model, Effects Action)
update action model =
case action of
RequestMore ->
(model, getRandomGif model.topic)
NewGif maybeUrl ->
( Model model.topic (Maybe.withDefault model.gifUrl maybeUrl)
, Effects.none
)

35. 35
TASKS
getRandomGif : String -> Effects Action
getRandomGif topic =
Http.get decodeUrl (randomUrl topic)
|> Task.toMaybe
|> Task.map NewGif
|> Effects.task
randomUrl : String -> String
randomUrl topic =
Http.url "http://api.giphy.com/v1/gifs/random"
[ "api_key" => "dc6zaTOxFJmzC"
, "tag" => topic
]

36. 36
invention or discovery?

37. 37
try to escape the Elm Architecture,
I dare you!

38. 38
TESTS
Only for checking what the compiler can’t

39. 39
ELM TEST
module Example where
import ElmTest exposing (..)
tests : Test
tests =
suite "A Test Suite"
[ test "Addition" <|
assertEqual (3 + 7) 10
, test "This test should fail" <|
assert False
]

40. 40
ELM TEST BDD STYLE
module Example where
import ElmTestBDDStyle exposing (..)
tests : Test
tests =
describe "A Test Suite"
[ it "adds two numbers" <|
expect (3 + 7) toBe 10
, it "fails for non-sense stuff" <|
expect True toBe False
]

41. 41
PROPERTY-BASED TESTING
module Example where
import ElmTestBDDStyle exposing (..)
import Check.Investigator exposing (..)
tests : Test
tests =
describe "A Test Suite"
[ it "adds two numbers" <|
expect (3 + 7) toBe 10
, it "fails for non-sense stuff" <|
expect True toBe False
, itAlways "ends up with the same list when reversing twice" <|
expectThat
(list -> List.reverse (List.reverse list))
isTheSameAs
(identity)
forEvery
(list int)
]

42. 42
JS
JAVASCRIPT
INTEROP
Avoid it at all costs

43. 43
FROM JS TO ELM
port addUser : Signal (String, UserRecord)
myapp.ports.addUser.send([
"Tom",
{ age: 32, job: "lumberjack" }
]);
myapp.ports.addUser.send([
"Sue",
{ age: 37, job: "accountant" }
]);
JS

44. 44
FROM ELM TO JS
port requestUser : Signal String
port requestUser =
signalOfUsersWeWantMoreInfoOn
myapp.ports.requestUser.subscribe(databaseLookup);
function databaseLookup(user) {
var userInfo = database.lookup(user);
myapp.ports.addUser.send(user, userInfo);
}
JS

45. 45
NATIVE JS INTEROP
DON’T USE THIS

46. THANK YOU