Slide 1

Slide 1 text

Elm Routing One Approach Brian Hicks, St. Louis Elm Meetup 1

Slide 2

Slide 2 text

Hello I'm Brian Hicks I do computer stuff [email protected] // @brianhicks Brian Hicks, St. Louis Elm Meetup 2

Slide 3

Slide 3 text

Brian Hicks, St. Louis Elm Meetup 3

Slide 4

Slide 4 text

your.mantl.url/ui/#/ Brian Hicks, St. Louis Elm Meetup 4

Slide 5

Slide 5 text

Brian Hicks, St. Louis Elm Meetup 5

Slide 6

Slide 6 text

your.mantl.url/ui/#/health/ Brian Hicks, St. Louis Elm Meetup 6

Slide 7

Slide 7 text

your.mantl.url/ui/#/health/{app}/ Brian Hicks, St. Louis Elm Meetup 7

Slide 8

Slide 8 text

Overview — Two modules: Routing and Mantl — They're complementary, and slightly coupled... we'll see why. — This is one way to do this for a smallish app1. It's one of a few possible approaches to routing in Elm. 1 Code is from the mantl-ui-frontend project at ca4145 Brian Hicks, St. Louis Elm Meetup 8

Slide 9

Slide 9 text

Don't generate invalid URLs! they're bad and stuff Brian Hicks, St. Louis Elm Meetup 9

Slide 10

Slide 10 text

Model Locations in the app are a tagged union: type Location = Home | HealthOverview | HealthCheck String Brian Hicks, St. Louis Elm Meetup 10

Slide 11

Slide 11 text

Utilities: urlFor urlFor : Location -> String urlFor loc = let url = case loc of Home -> "/" HealthOverview -> "/health/" HealthCheck app -> "/health/" ++ app ++ "/" in "#" ++ url -- or just `url` if you want path routing Brian Hicks, St. Louis Elm Meetup 11

Slide 12

Slide 12 text

Utilities: locFor locFor : String -> Maybe Location locFor path = let segments = path |> split "/" |> List.filter (\seg -> seg /= "" && seg /= "#") in case segments of [] -> Just Home ["health"] -> Just HealthOverview ["health", app] -> Just (HealthCheck app) _ -> Nothing Brian Hicks, St. Louis Elm Meetup 12

Slide 13

Slide 13 text

Utilities: parentFor parentFor : Location -> Location parentFor child = case child of HealthCheck _ -> HealthOverview _ -> child Brian Hicks, St. Louis Elm Meetup 13

Slide 14

Slide 14 text

Some startapp bookeeping -- MODEL type alias Model = Maybe Location init : Model init = Nothing -- UPDATE type Action = PathChange String update : Action -> Model -> (Model, Effects Action) update action model = case action of PathChange path -> ( (locFor path), Effects.none ) Brian Hicks, St. Louis Elm Meetup 14

Slide 15

Slide 15 text

View: navItem navItem : Model -> Location -> String -> Html navItem model page caption = let active = case model of Nothing -> False Just current -> (parentFor current) == page in li [ classList [ ("nav-item", True) , ("active", active) ] ] [ a [ class "nav-link" , href (urlFor page) ] [ text caption ] ] Brian Hicks, St. Louis Elm Meetup 15

Slide 16

Slide 16 text

View: notFound notfound : Html notfound = div [ class "row" ] [ p [ class "col-sm-12" ] [ text "Not found!" ] ] Brian Hicks, St. Louis Elm Meetup 16

Slide 17

Slide 17 text

And finally, using it! (pt. 1) view : Signal.Address Action -> Model -> Html view address model = let link = Route.navItem model.route body = case model.route of Just (Route.Home) -> Services.view (Signal.forwardTo address ServicesAction) model.services model.health Just (Route.HealthOverview) -> Health.view (Signal.forwardTo address HealthAction) model.health Nothing Just (Route.HealthCheck app) -> Health.view (Signal.forwardTo address HealthAction) model.health (Just app) Nothing -> Route.notfound Brian Hicks, St. Louis Elm Meetup 17

Slide 18

Slide 18 text

And finally, using it! (pt. 2) -- view : Signal.Address Action -> Model -> Html -- view address model = in div [ class "app" ] [ div [ classes [ "navbar", "navbar-inverted" ] ] [ div [ class "container" ] [ a [ class "navbar-brand" , href (Route.urlFor Route.Home) ] [ text "Mantl" ] , ul [ classes [ "nav", "navbar-nav" ] ] [ link Route.Home "Home" , link Route.HealthOverview "Health" ] -- health status elided to save space ] ] ] , div [ classes [ "container", "content" ] ] [ body ] ] Brian Hicks, St. Louis Elm Meetup 18

Slide 19

Slide 19 text

Thanks Brian Hicks [email protected] // @brianhicks Brian Hicks, St. Louis Elm Meetup 19