json mithril-prezentation on elm-app
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了json mithril-prezentation on elm-app相关的知识,希望对你有一定的参考价值。
{
"Title": "Elm App Presentation",
"slides": [
{
"id": "4f08dfe6-b939-11e8-96f8-529269fb1459",
"title": "takeaways",
"contents": "# TAKEAWAYS\n## overall I , \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\n\n# elm commands lifecycle 1\n\n\n# elm command lifecycle 2\n",
"isSelected": false
},
{
"id": "4f08e982-b939-11e8-96f8-529269fb1459",
"title": "SLIDE 7 elm-node interaction",
"contents": "# elm - nodejs interaction\n",
"isSelected": false
},
{
"id": "4f08ec16-b939-11e8-96f8-529269fb1459",
"title": "SLIDE 6 virtual dom",
"contents": "# virtual dom\n",
"isSelected": false
},
{
"id": "4f08ee96-b939-11e8-96f8-529269fb1459",
"title": "SLIDE 5 elm lifecycle",
"contents": "# elm lifecycle\n",
"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",
"isSelected": false
},
{
"id": "4f08f8aa-b939-11e8-96f8-529269fb1459",
"title": "SLIDE 4 elm runtime",
"contents": "# elm runtime\n",
"isSelected": false
},
{
"id": "4f08fb0c-b939-11e8-96f8-529269fb1459",
"title": "SLIDE 3 elm overview",
"contents": "# elm overview\n\n",
"isSelected": false
},
{
"id": "4f08fe7c-b939-11e8-96f8-529269fb1459",
"title": "SLIDE 1 defining features & tooling",
"contents": "# This app was built with\n### `Elm`\n\n<h1 style=\"text-align:left;\">__&__</h1>\n### `nodejs`\n\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
}
]
}
以上是关于json mithril-prezentation on elm-app的主要内容,如果未能解决你的问题,请参考以下文章
text Mithril-prezentation对OO模式和设计
python中json文件处理涉及的四个函数json.dumps()和json.loads()json.dump()和json.load()的区分
JSON相关 JSON在线解析 JSON压缩转义工具 JSON着色工具 JSON 在线格式化工具 在线XML/JSON互相转换工具 XMLJSON在线转换
python中json文件处理涉及的四个函数json.dumps()和json.loads()json.dump()和json.load()的区分