elm: delightful web development

Download Elm: delightful web development

Post on 08-Jan-2017

370 views

Category:

Technology

0 download

Embed Size (px)

TRANSCRIPT

  • delightful webdevelopment

    elm

  • HTML and JS

    (so far)

  • ITS 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"]

    ]

    PamplemousseAnanasJus d'orangeBoeufSoupe du jourCamembertJacques CousteauBaguette

  • 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