The document discusses the Elm programming language. It provides an overview of Elm including that it is functional, Haskell-inspired, compiles to JavaScript, and uses a simple architecture pattern. It also summarizes some key Elm features like types, functions, and packages for core functionality.

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