ch-ch-ch-ch-changes in Elm 0.17.0

ch-ch-ch-ch-changes in Elm 0.17.0

Changes in Elm 0.17.0 as well as my migration experience

8ea55d01e9443c0f387893df25157004?s=128

Brian Hicks

June 06, 2016
Tweet

Transcript

  1. Ch-ch-ch-ch-changes in Elm 0.17.0

  2. Agenda Changelog, Walthrough

  3. Brian Hicks Asteris

  4. September 15, 2016 / elm-conf.us

  5. Changes

  6. Package Moves · evancz/elm-html -> elm-lang/html · evancz/elm-svg -> elm-lang/svg

    · evancz/elm-effects -> elm-lang/ core · evancz/start-app -> Html.App
  7. Action is now Msg -- 0.16 type Action = Increment

    | Decrement -- 0.17 type Msg = Increment | Decrement
  8. Header Changes -- 0.16 module X where -- 0.17 module

    X exposing (..)
  9. Core Moves · Signal -> ! · Effects -> !

    (the functionality's still there, but the modules aren't)
  10. What about Signal.Address? 0.16: view : Signal.Address Action -> Model

    -> Html view address model = div [] [ button [ onClick address Decrement ] [ text "-" ] , div [ countStyle ] [ text (toString model) ] , button [ onClick address Increment ] [ text "+" ] ]
  11. What about Signal.Address? 0.17: view : Model -> Html Msg

    view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [ countStyle ] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ]
  12. What about Signal.Address? App.map: -- Child.elm type Msg = SomeEvent

    view : Model -> Html Msg view model = model |> toString |> Html.text -- Parent.elm type Msg = ChildMsg Child.Msg | ... view : Model -> Html Msg view model = map ChildMsg <| Child.view model.child
  13. What about Signal.Address? Avoiding App.map: -- Child.elm view : Model

    -> Html a view model = model |> toString |> Html.text -- Parent.elm type Msg = ChildMsg Child.Msg | ... view : Model -> Html Msg view model = Child.view model.child
  14. And Effects? 0.16: update : Action -> Model -> (Model,

    Effects Action) update action model = case action of RequestMore -> ( model, getRandomGif model.topic ) NewGif maybeUrl -> ( Model model.topic (Maybe.withDefault model.gifUrl maybeUrl) , Effects.none )
  15. And Effects? 0.17: update : Msg -> Model -> (Model,

    Cmd Msg) update msg model = case msg of RequestMore -> ( model, getRandomGif model.topic ) NewGif maybeUrl -> ( Model model.topic (Maybe.withDefault model.gifUrl maybeUrl) , Cmd.none )
  16. And Effects? 0.17: update : Msg -> Model -> (Model,

    Cmd Msg) update msg model = case msg of RequestMore -> ( model, getRandomGif model.topic ) NewGif maybeUrl -> Model model.topic (Maybe.withDefault model.gifUrl maybeUrl) ! [ ]
  17. And Effects? What's this ! do? (!) : model ->

    List (Cmd msg) -> (model, Cmd msg) (!) model commands = (model, Msg.batch commands) -- so this is true: ( model, Cmd.none ) == model ! [ ]
  18. StartApp is now Html.App 0.16: import StartApp import Task app

    = StartApp.start { init = init, update = update, view = view, inputs = [] } main = app.html port tasks : Signal (Task.Task Never ()) port tasks = app.tasks
  19. StartApp is now Html.App 0.17: import Html.App as Html main

    = Html.program { init = init , update = update , view = view , subscriptions = \_ -> Sub.none }
  20. Ports (Outgoing) -- 0.16 port focus : Signal String port

    focus = ... -- 0.17 port focus : String -> Cmd msg
  21. Ports (Incoming) type User = { name : String, age

    : Int } -- 0.16 port users : Signal User -- 0.17 port users : (User -> msg) -> Sub msg
  22. Embedding // 0.16 Elm.embed(Elm.Main, someNode); Elm.fullscreen(Elm.Main); // 0.17 Elm.Main.embed(someNode); Elm.Main.fullscreen();

  23. Navigation · elm-history -> elm-lang/navigation · wraps the new Html.App

    program · takes an additional argument for updating navigation state
  24. Navigation -- your nav type yourParserFunc : Navigation.Location -> List

    String yourParserFunc loc = loc.hash |> split "/" |> List.filter (\seg -> seg /= "" && seg /= "#") main = Navigation.program (Navigation.makeParser yourParserFunc) { init = init , update = update -- Msg -> Model -> ( Model, Cmd Msg ) , urlUpdate = urlUpdate -- List String -> Model -> ( Model, Cmd Msg ) , view = view , subscriptions = subscriptions }
  25. Navigation evancz/url-parser blog : Parser (Int -> String -> a)

    a blog = s "blog" </> int </> string The parser gets /blog/42/whale-songs and returns (42, "whale-songs")
  26. My Migration

  27. Plan · update packages · fix module headers · renames

    like Action -> Msg · remove usage of Signal and Effects · remove StartApp fork for Html.App · run elm-format on everything
  28. Reality You can't do these things one at a time.

    Plan for it to be messy.
  29. Outcome · PR: +1,077 -867 · No user-facing changes !

    · Output JS: 354K to 244K
  30. Thank You! @brianhicks brian@brianthicks.com