elm: delightful web development

delightful webdevelopment

elm

HTML and JS

(so far)

IT’S A FREAKING

MESS!

The ELM

language

Open source

elm-lang.org

Haskell inspired

(and built with)

Functional

Simple

www.elm-tutorial.org

Transpiler

ES3

Web Assembly

Functionsadd : Int -> Int -> Int

add x y =

x + y

Partial Applicationadd2 = add 2

add2 3 -- result 5

Pipe Operator3

|> multiply 2

|> add 1

Type Variablesswitch : ( a, b ) -> ( b, a ) switch ( x, y ) = ( y, x )

Union typestype Answer

= Yes

| No | Other String

type Resource res

= Loading

| Loaded res

Type Aliasestype alias CustomerId = Int

type alias Email = String

Records{ id : Int, name : String}

type alias Player = { id : Int , name : String }

label: Player -> String

Packageshttp://package.elm-lang.org/

elm-lang/coreelmpackages

Maybetype Maybe a = Just a

| Nothing

withDefault : a -> Maybe a -> a

map : (a -> b) -> Maybe a -> Maybe b

Listlength : 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

Resulttype 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

elm-lang/htmlelmpackages

Htmltext : 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

Markuph1 : 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

Small Examplemain =

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

The ELM

architecture

Modeltype alias Model =

String

init : ( Model, Cmd Msg )

init =

( "Hello", Cmd.none )

Messagestype Msg

= PostToSlack

| FetchSponsors

| NoOp

Viewview : Model -> Html Msg

view model =

div []

[ text model ]

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

Subscriptionssubscriptions : Model -> Sub Msg subscriptions model =

Sub.none

Mainmain : Program Never

main =

Html.App.program

{ init = init

, view = view , update = update

, subscriptions = subscriptions

}

Expand sample Flow

Examples

Drawbacks

In flux (lightly)

Learn a language

Api still growing

THANK YOU!

amir@barylko.com @abarylko

http://bit.ly/abarylkoslides

http://orthocoders.com

http://westerndevs.com