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

Changes in Elm 0.17.0 as well as my migration experience

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