Presentation about using Elm for web development

1. delightful web
development
elm

2. HTML and JS
(so far)

3. IT’S A FREAKING
MESS!

4. The ELM
language

5. Open source
elm-lang.org

6. Haskell inspired
(and built with)

7. Functional

8. Simple

9. www.elm-tutorial.org

10. Transpiler

11. ES3

12. Web Assembly

13. Functions
add : Int -> Int -> Int
add x y =
x + y

14. Partial Application
add2 = add 2
add2 3 -- result 5

15. Pipe Operator
3
|> multiply 2
|> add 1

16. Type Variables
switch : ( a, b ) -> ( b, a )
switch ( x, y ) =
( y, x )

17. Union types
type Answer
= Yes
| No
| Other String
type Resource res
= Loading
| Loaded res

18. Type Aliases
type alias CustomerId = Int
type alias Email = String

19. Records
{ id : Int, name : String}
type alias Player =
{ id : Int
, name : String
}
label: Player -> String

20. Packages
http://package.elm-lang.org/

21. elm-lang/core
elm
packages

22. Maybe
type Maybe a
= Just a
| Nothing
withDefault : a -> Maybe a -> a
map : (a -> b) -> Maybe a -> Maybe b

23. List
length : List a -> Int
head : List a -> Maybe a
tail : List a -> Maybe (List a
filter : (a -> Bool) -> List a
take : Int -> List a -> List a
drop : Int -> List a -> List a

24. Result
type Result error value
= Ok value
| Err error
map : (a -> value) -> Result x a -> Result x value
andThen : Result x a -> (a -> Result x b) -> Result x b

25. elm-lang/html
elm
packages

27. Html
text : String -> Html msg
node: String
-> List (Attribute msg)
-> List (Html msg)
-> Html msg
type alias Html msg = Node msg
type alias Attribute msg = Property msg

28. Markup
h1 : List (Attribute msg) -> List (Html msg) -> Html msg
h2 : List (Attribute msg) -> List (Html msg) -> Html msg
div : List (Attribute msg) -> List (Html msg) -> Html msg
p : List (Attribute msg) -> List (Html msg) -> Html msg
hr : List (Attribute msg) -> List (Html msg) -> Html msg
span : List (Attribute msg) -> List (Html msg) -> Html msg
a : List (Attribute msg) -> List (Html msg) -> Html msg

29. Small Example
main =
ul [class "grocery-list"]
[ li [] [text "Pamplemousse"]
, li [] [text "Ananas"]
, li [] [text "Jus d'orange"]
, li [] [text "Boeuf"]
, li [] [text "Soupe du jour"]
, li [] [text "Camembert"]
, li [] [text "Jacques Cousteau"]
, li [] [text "Baguette"]
]
•Pamplemousse
•Ananas
•Jus d'orange
•Boeuf
•Soupe du jour
•Camembert
•Jacques Cousteau
•Baguette

30. The ELM
architecture

31. Model
type alias Model =
String
init : ( Model, Cmd Msg )
init =
( "Hello", Cmd.none )

32. Messages
type Msg
= PostToSlack
| FetchSponsors
| NoOp

33. View
view : Model -> Html Msg
view model =
div []
[ text model ]

34. Update
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
PostToSlack -> Api.sendPost model.email
NoOp -> ( model, Cmd.none )

35. Subscriptions
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none

36. Main
main : Program Never
main =
Html.App.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}

37. Expand sample Flow

38. Examples

39. Drawbacks

40. In flux (lightly)

41. Learn a language

42. Api still growing

43. THANK YOU!

44. amir@barylko.com
@abarylko
http://bit.ly/abarylkoslides
http://orthocoders.com
http://westerndevs.com