Elm: delightful web development

466 views

Published on

Presentation about using Elm for web development

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
466
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Elm: delightful web development

  1. 1. delightful web development elm
  2. 2. HTML and JS (so far)
  3. 3. IT’S A FREAKING MESS!
  4. 4. The ELM language
  5. 5. Open source elm-lang.org
  6. 6. Haskell inspired (and built with)
  7. 7. Functional
  8. 8. Simple
  9. 9. www.elm-tutorial.org
  10. 10. Transpiler
  11. 11. ES3
  12. 12. Web Assembly
  13. 13. Functions add : Int -> Int -> Int
 add x y = 
 x + y
  14. 14. Partial Application add2 = add 2
 add2 3 -- result 5
  15. 15. Pipe Operator 3
 |> multiply 2
 |> add 1
  16. 16. Type Variables switch : ( a, b ) -> ( b, a )
 switch ( x, y ) =
 ( y, x )
  17. 17. Union types type Answer 
 = Yes 
 | No 
 | Other String
 
 type Resource res 
 = Loading 
 | Loaded res
  18. 18. Type Aliases type alias CustomerId = Int
 
 type alias Email = String
  19. 19. Records { id : Int, name : String}
 
 type alias Player = 
 { id : Int 
 , name : String
 }
 
 label: Player -> String
  20. 20. Packages http://package.elm-lang.org/
  21. 21. elm-lang/core elm packages
  22. 22. Maybe type Maybe a
 = Just a
 | Nothing
 
 withDefault : a -> Maybe a -> a
 
 map : (a -> b) -> Maybe a -> Maybe b
  23. 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. 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. 25. elm-lang/html elm packages
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. The ELM architecture
  30. 30. Model type alias Model =
 String
 
 
 init : ( Model, Cmd Msg )
 init =
 ( "Hello", Cmd.none )
  31. 31. Messages type Msg
 = PostToSlack
 | FetchSponsors
 | NoOp
  32. 32. View view : Model -> Html Msg
 view model =
 div []
 [ text model ]
  33. 33. Update update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
 case msg of PostToSlack -> Api.sendPost model.email NoOp -> ( model, Cmd.none )
  34. 34. Subscriptions subscriptions : Model -> Sub Msg
 subscriptions model =
 Sub.none
  35. 35. Main main : Program Never
 main =
 Html.App.program
 { init = init
 , view = view
 , update = update
 , subscriptions = subscriptions
 }
  36. 36. Expand sample Flow
  37. 37. Examples
  38. 38. Drawbacks
  39. 39. In flux (lightly)
  40. 40. Learn a language
  41. 41. Api still growing
  42. 42. THANK YOU!
  43. 43. amir@barylko.com @abarylko http://bit.ly/abarylkoslides http://orthocoders.com http://westerndevs.com

×