json mithril-prezentation on elm-app

Posted 2021-05-18

{
  "Title": "Elm App Presentation",
  "slides": [
    {
      "id": "4f08dfe6-b939-11e8-96f8-529269fb1459",
      "title": "takeaways",
      "contents": "# TAKEAWAYS\n## overall I ![elm-app-heart](https://marcosh.github.io/presentations/2016/10/28/img/elm_heart.png), \n## aside\nhow to start with fp is diff from OO ... need to first think about what you want to create and build the model up first. \n\n# some of the many challanges ...\n1. saving to db\n2. managing state",
      "isSelected": false
    },
    {
      "id": "4f08e43c-b939-11e8-96f8-529269fb1459",
      "title": "SLIDE 9 ELM APP",
      "contents": "# ELM MESSAGING \n```elm\ntype Msg\n  = EditSlide Slide\n  | AddSlideToShow Slide\n  | InputTitle String\n  | InputContents String\n  | Save\n  | Cancel\n  | DeleteShow ShowSlide\n  | SwitchView String\n  | ToPickSlides\n  | ShowAnotherSlide String\n  | OnInitialLoad ( WebData (List Slide) )\n  | OnSlideSave ( Result Http.Error (List Slide) )\n```\n#  ELM UPDATE  --  changing slides \n```elm\nshowAnotherSlide : String -> Model -> (Model, Cmd Msg)\nshowAnotherSlide direction model =\n  case direction of\n    \"+\" ->\n      if model.currentSlideId == ( List.length model.showSlides - 1)  then\n        ( model, Cmd.none )\n      else\n        ( { model\n            | currentSlideId = model.currentSlideId + 1\n        }\n        , Cmd.none )\n\n    \"-\" ->\n      if model.currentSlideId == 0 then\n        ( model, Cmd.none )\n      else\n        ( { model\n            | currentSlideId = model.currentSlideId - 1\n        }, Cmd.none )\n\n    \"restart\" ->\n        ( { model\n            | currentSlideId = 0\n        } , Cmd.none )\n\n    _ ->\n        ( model, Cmd.none )\n```\n# ELM UPDATE  -- adding a new slide to presentation\n```elm\naddSlideToShow : Model -> Slide -> (Model, Cmd Msg)\naddSlideToShow model slide =\n\n  let\n    showSlideId =\n      model.showSlides\n        |> List.length \n\n    newShowSlide =\n      ShowSlide showSlideId slide.id slide.title slide.contents\n\n    isUnique x xs =\n      List.filter(\\s -> s.slideId == x.slideId) xs\n\n  in\n    if \n      List.isEmpty (model.showSlides |> isUnique newShowSlide )\n    then\n      (\n        { model\n        | showSlides = newShowSlide :: model.showSlides\n        } , Cmd.none )\n\n    else\n      ( model, Cmd.none )\n```\n# ELM VIEW \n```elm\ntitle : Model -> Html Msg\ntitle model =\n  div [ class \"hero is-primary is-bold\"  ]\n    [ div [ class \"hero-body\"  ]\n      [ header [class \"container\"]\n        [ h1 [class \"title is-1 is-spaced\", style[(\"text-align\", \"center\")]] [text \"PREZENTER\"]\n        ]\n      ]\n    ]\n```",
      "isSelected": false
    },
    {
      "id": "4f08e6e4-b939-11e8-96f8-529269fb1459",
      "title": "SLIDE 8 app architecture",
      "contents": "# App architecture\n```elm\n-- MAIN\nmain : Program Never Model Msg\nmain =\n  Html.program\n    { init = (initModel, fetchSlides)\n    , update = update\n    , subscriptions = subscriptions\n    , view = view\n    }\n```\n\n# elm commands\n![elm-commands](http://elmprogramming.com/images/commands/reload-state.png)\n\n# elm commands lifecycle 1\n![elm-command-lifecycle-1](http://elmprogramming.com/images/commands/model-view-update-commands.png)\n\n# elm command lifecycle 2\n![elm-command-lifecylce-2](http://elmprogramming.com/images/commands/elm-runtime-mvu-commands.png)",
      "isSelected": false
    },
    {
      "id": "4f08e982-b939-11e8-96f8-529269fb1459",
      "title": "SLIDE 7 elm-node interaction",
      "contents": "# elm - nodejs interaction\n![elm-nodejs-interaction](http://elmprogramming.com/images/elm-architecture/elm-runtime.png)",
      "isSelected": false
    },
    {
      "id": "4f08ec16-b939-11e8-96f8-529269fb1459",
      "title": "SLIDE 6 virtual dom",
      "contents": "# virtual dom\n![virtual-dom](http://elmprogramming.com/images/virtual-dom/elm-runtime-virtual-dom.png)",
      "isSelected": false
    },
    {
      "id": "4f08ee96-b939-11e8-96f8-529269fb1459",
      "title": "SLIDE 5 elm lifecycle",
      "contents": "# elm lifecycle\n![elm-lifecycle](http://elmprogramming.com/images/elm-architecture/model-view-update-interaction-1.png)",
      "isSelected": false
    },
    {
      "id": "4f08f4cc-b939-11e8-96f8-529269fb1459",
      "title": "SLIDE 2 elm framework",
      "contents": "# elm framework\n all images courtesy of [Elm Programming](http://elmprogramming.com/)\n\n![elm-framework](http://elmprogramming.com/images/elm-architecture/model-view-update.png)",
      "isSelected": false
    },
    {
      "id": "4f08f8aa-b939-11e8-96f8-529269fb1459",
      "title": "SLIDE 4 elm runtime",
      "contents": "# elm runtime\n![elm-runtime](http://elmprogramming.com/images/elm-intro/elm-dirty-secret.png)",
      "isSelected": false
    },
    {
      "id": "4f08fb0c-b939-11e8-96f8-529269fb1459",
      "title": "SLIDE 3 elm overview",
      "contents": "# elm overview\n![elm](http://elmprogramming.com/images/elm-intro/elm-compiler.png)\n",
      "isSelected": false
    },
    {
      "id": "4f08fe7c-b939-11e8-96f8-529269fb1459",
      "title": "SLIDE 1 defining features & tooling",
      "contents": "# This app was built with\n### `Elm`\n![elm](https://frontendmasters.com/static-assets/workshops/thumbnails/elm.jpg)\n<h1 style=\"text-align:left;\">__&__</h1>\n### `nodejs`\n![nodejs](https://rishabh.io/tech/nodejs/img/nodejs.png)\n\n# NodeJS Tooling\n`yarn : to install dependencies `\n```\n  \"dependencies\": {\n    \"foreman\": \"2.0.0\", // to start up api and client at same time\n    \"json-server\": \"0.9.5\" // quick api mock up\n  }\n```\n## Elm-app-create\nscaffold the app\n\n# Elm specific Tooling\n`elm-app install <package>: to install package`\n```\n   \"dependencies\": {\n    \"NoRedInk/elm-decode-pipeline\": \"3.0.0 <= v < 4.0.0\", //json library \n    \"elm-lang/core\": \"5.0.0 <= v < 6.0.0\", //core lib for elm\n    \"elm-lang/html\": \"2.0.0 <= v < 3.0.0\", //html lib\n    \"elm-lang/http\": \"1.0.0 <= v < 2.0.0\", // http lib\n    \"evancz/elm-markdown\": \"3.0.2 <= v < 4.0.0\", // markdown lib\n    \"krisajenkins/remotedata\": \"4.3.1 <= v < 5.0.0\", // union type for http\n    \"surprisetalk/elm-bulma\": \"5.0.0 <= v < 6.0.0\" // css-bulma for simple styling\n  },\n```",
      "isSelected": false
    }
  ]
}