Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Elm for React developers (CC BY-ND 2.0) by jeremy_norbury
Slide 2
Slide 2 text
“A delightful language for reliable webapps.”
Slide 3
Slide 3 text
Functional Language Statically Typed Compiling to JavaScript
Slide 4
Slide 4 text
Looks like Haskell … but simpler
Slide 5
Slide 5 text
TEA (CC BY 2.0) by h0lydevil
Slide 6
Slide 6 text
Elm
Slide 7
Slide 7 text
Model Elm init
Slide 8
Slide 8 text
Model Html Elm view init
Slide 9
Slide 9 text
Model Html Elm view init Msg
Slide 10
Slide 10 text
Model Html Elm view init Msg update Msg
Slide 11
Slide 11 text
Looks familiar?
Slide 12
Slide 12 text
Looks familiar?
Slide 13
Slide 13 text
It gets even better
Slide 14
Slide 14 text
Model Html Elm view init Msg update Msg
Slide 15
Slide 15 text
Model Html Elm view init Msg update Msg Cmd
Slide 16
Slide 16 text
Model Html Elm view init Msg update Msg Cmd Cmd
Slide 17
Slide 17 text
Model Html Elm view init Msg update Msg World Cmd Cmd
Slide 18
Slide 18 text
Model Html Elm view init Msg update Msg World Cmd run Cmd Cmd
Slide 19
Slide 19 text
Model Html Elm view init Msg update Msg World Cmd run Cmd Cmd Msg
Slide 20
Slide 20 text
Model Html Elm view init Msg update Msg World Sub Msg Cmd run Cmd Cmd Msg
Slide 21
Slide 21 text
Runtime Errors (CC BY-NC-SA 2.0) by Leo Reynolds
Slide 22
Slide 22 text
But we have tests, right?
Slide 23
Slide 23 text
Yet sometimes it just happens…
Slide 24
Slide 24 text
At least the messages are helpful!
Slide 25
Slide 25 text
No undefined in Elm No null in Elm
Slide 26
Slide 26 text
Elm has Union Types
Slide 27
Slide 27 text
type Bool = True | False
Slide 28
Slide 28 text
type Maybe a = Nothing | Just a
Slide 29
Slide 29 text
type UserData = NotLoggedIn | LoggedIn User
Slide 30
Slide 30 text
Type inference name = “Joe"
Slide 31
Slide 31 text
name : String Type inference name = “Joe"
Slide 32
Slide 32 text
It’s a sort of test leftPad : Int -> Char -> String -> String
Slide 33
Slide 33 text
It’s a sort of test leftPad : Int -> Char -> String -> String leftPad count char original = -- implementation
Slide 34
Slide 34 text
# Runtime Errors in Elm
Slide 35
Slide 35 text
# Runtime Errors in Elm 0
Slide 36
Slide 36 text
=== Static Types Compile Errors
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Bonus Cyclic Dependencies
Slide 41
Slide 41 text
-- Draggable.elm import Draggable.Events -- Events/Draggable.elm import Draggable
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
SEMVER (CC BY 2.0) by seb314fr
Slide 44
Slide 44 text
It offers guarantees… (CC BY 2.0) by Arek Olek
Slide 45
Slide 45 text
It offers guarantees… (CC BY 2.0) by Arek Olek Theoretically…
Slide 46
Slide 46 text
Meanwhile in JS Land… (CC BY-SA 2.0) by andrew_cosand
Slide 47
Slide 47 text
Not possible in Elm Land
Slide 48
Slide 48 text
Enforced SEMVER
Slide 49
Slide 49 text
module Draggable.Events exposing ( onDragStart , onDragBy , onDragEnd , onClick , onMouseDown )
Slide 50
Slide 50 text
module Draggable.Events exposing ( onDragStart , onDragBy -- , onDragEnd , onClick , onMouseDown )
Slide 51
Slide 51 text
Diff makes it explicit
Slide 52
Slide 52 text
Still, I just feel like doing a today PATCH (CC BY-NC-ND 2.0) by Sunilkk
Slide 53
Slide 53 text
Tough luck!
Slide 54
Slide 54 text
Great…
Slide 55
Slide 55 text
…but our app is in React
Slide 56
Slide 56 text
Include Elm as a import Elm from 'react-elm-components'; import { ElmApp } from ‘./build/elm.js';
Slide 57
Slide 57 text
…but I need to send data to Elm
Slide 58
Slide 58 text
Add flags const flags = { url: API_URL}
Slide 59
Slide 59 text
…still, I need more inter-op
Slide 60
Slide 60 text
Use ports Cmd Sub
Slide 61
Slide 61 text
What if we already have reusable React components?
Slide 62
Slide 62 text
Use redux-elm-middleware Cmd Sub dispatch setState
Slide 63
Slide 63 text
Example https://github.com/zaboco/elm-and-react
Slide 64
Slide 64 text
Resources Oficial guide egghead.io course Elm-conf 2016 videos Elm town podcast
Slide 65
Slide 65 text
Thanks! @zaboco Bogdan Zaharia Developer @ Hootsuite