{"id":21874193,"url":"https://github.com/eeue56/elm-for-web-developers","last_synced_at":"2025-06-23T09:05:32.479Z","repository":{"id":36366124,"uuid":"40670947","full_name":"eeue56/elm-for-web-developers","owner":"eeue56","description":"A collection of tips for people using Elm from a web-dev background","archived":false,"fork":false,"pushed_at":"2016-01-25T00:37:06.000Z","size":12,"stargazers_count":56,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-07T16:51:46.440Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eeue56.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-13T16:57:19.000Z","updated_at":"2023-06-19T00:38:30.000Z","dependencies_parsed_at":"2022-09-06T06:21:00.351Z","dependency_job_id":null,"html_url":"https://github.com/eeue56/elm-for-web-developers","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eeue56/elm-for-web-developers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eeue56%2Felm-for-web-developers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eeue56%2Felm-for-web-developers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eeue56%2Felm-for-web-developers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eeue56%2Felm-for-web-developers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eeue56","download_url":"https://codeload.github.com/eeue56/elm-for-web-developers/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eeue56%2Felm-for-web-developers/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261449741,"owners_count":23159802,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-28T07:11:29.199Z","updated_at":"2025-06-23T09:05:27.464Z","avatar_url":"https://github.com/eeue56.png","language":null,"readme":"# elm-for-web-developers\n\nKickstart your web development with Elm. \n\nA collection of notes for web developers looking into moving to Elm.\n\n* [CSS](#stylesheets)\n* [FAQ](#faq)\n\n# Where to start?\n\nThe easiest place to start is through looking at some of the [examples on the elm-lang site](http://elm-lang.org/examples). I would suggest avoiding looking at any of the Games/Tasks/community examples. If you are looking to do HTML-things rather than canvas things, look at the [checkboxes](http://elm-lang.org/examples/checkboxes) example. It should introduce the [start-app](https://github.com/evancz/elm-architecture-tutorial/) structure that the majority of Elm programs follow. \n\nElm is normally used with what is refered to as the \"Elm Architecture\". Think of this as a framework imposing structure upon you. If you're coming from a Jquery backgorund, this might not make much sense. I would suggest playing around with some other JS frameworks so that you get the idea of what it means to have an opinionated structure to your web apps.\n\n## From Angular\n\nIf you're coming from Angular, the best comparision with startapp is directives. Each view function should be considered a directive, each with their own restricted scope. In order to send things outside of the scope, you must use Signals to send some data to be processed in the update function. The update function will take a model, an update object, and return a new model. Every time a model changes, the view is recreated with the bits that changed. startApp's view function gets given a [`Signal.Address`](http://package.elm-lang.org/packages/elm-lang/core/2.1.0/Signal#Mailbox). For basic sites, you don't need to worry about what this is other than it can allow you to write [interactive code](https://github.com/evancz/elm-todomvc/blob/master/Todo.elm#L202) by creating the objects to send to the view function.\n\n## From React\n\nIf you're coming from React, there are already [documented cases](http://noredinktech.tumblr.com/post/126978281075/walkthrough-introducing-elm-to-a-js-web-app) of people using React alongside Elm. [Relm](https://github.com/eeue56/relm) aims to be a library for simplifying the usage of React and Elm as a couple, though at the moment it is mainly just examples.\n\n\n## Integrating Elm into your existing applications\n\n`Elm.worker(Elm.ModuleName)` should be your best friend for integrating Elm into existing applications. It allows you to use ports and use Elm for controlling your applications without needing to have any of the views in Elm itself. I've used it for managing state in my React apps between the different components. The `send` function allows your child components to trigger `subscribe` functions in your parent scope, keeping your data flow in a top-down structure as promoted by things like Flux.\n\n`Elm.embed(Elm.ModuleName)` is perfect for when you want to do some of your view in Elm, but the rest without. Note: there are some bugs with the core libraries when you use embed, for things like `touch` or `mouse` actions. \n\nWith either of these, you can use ports for allowing communication between your Javascript and your Elm applications. A typical use case of this might be using existing AJAX requests without moving all the HTTP requests to Elm.\n\n# Interaction and signals\n\nElm makes it easy to notify when an interaction happens in your views.\n\n```elm\nclockTypeSelectView : Signal.Address Update -\u003e Clock -\u003e Html.Html\n```\n\ndenotes when a function does something based on an input that may change without the developer telling it to - the fact that it takes a signal means there is probably some level of reactivity in the function. \n\n```elm\nquarterlyView : Clock -\u003e Html.Html\n```\n\nthe lack of signal lets the developer know that that function involves no interaction, but may change based on changes within the `Clock` model.\n\n# Stylesheets\n\n## Linking\n\nIn order to use stylesheets in Elm, you must create a [custom index.html](https://github.com/eeue56/broken-clock/blob/master/index.html) page. In there, you can link in any stylesheets you want. \n\nE.G:\n```html\n\u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n```\n\nYou must include \"elm.js\" in there - this is created when you run elm-make, and contains your elm application and the elm runtime. \n\nIn your terminal:\n```\nelm-make \u003cmain-filename\u003e --output elm.js\n```\n\nIn index.html: \n\n```html\n\u003cscript type=\"text/javascript\" src=\"elm.js\"\u003e\u003c/script\u003e\n```\n\nYou must also then bootstrap your Elm application by putting in a call to Elm.fullscreen:\n\n```javascript\n\u003cscript type=\"text/javascript\"\u003e\n  Elm.fullscreen(Elm.ModuleName);\n\u003c/script\u003e\n```\n\nA full working example can be found [here](https://github.com/eeue56/broken-clock/blob/master/index.html). You could also do this by using a build tool to insert the stylesheets into the html generated by elm-make after they're created, but this way you don't need to worry about that. \n\n## Using classes in Elm\n\nGiving HTML elements classes in Elm is as easy as\n\n```elm\ndiv [ class \"clock-time\" ] []\n```\n\nwith the CSS\n\n```elm\n.clock-time {\n    color : red;\n}\n\n```\n\n# Optimization\n\nWhile Elm is fast [at some things](http://elm-lang.org/blog/blazing-fast-html), it's easy to write non-performant code in Elm if you stick too rigidly to the functional programming style.\n\n## Move things out of let bindings\n\nIf a function can be defined outside of a let binding, then take it out. \n\nTODO: add example\n\n## Flat is better than nested\n\nThe less levels of functions involved, the better. If you find yourself nesting function calls within function calls over and over, look and see if you can simplify.\n\n# FAQ\n\n## Why does start-app give me an unexpected type error?\n\nIf you get an error like this \n```elm\n  -- TYPE MISMATCH ----------------------------------------------------- index.elm\n  \n  The 1st argument to function `start` has an unexpected type.\n  \n  14|   StartApp.start { model = model, view = view, update = update }\n                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  As I infer the type of values flowing through your program, I see a conflict\n  between these two types:\n\n    Int\n\n    String\n\n```\n\nthis probably means that somewhere in your view or update methods, there is a type error. In order to get a more useful error message, add type signatures to your functions, which will force it to check the types as you expect them to be.\n\n\n## How do I do HTML?\n\nIf you're trying to use HTML, then you probably want [elm-html](http://package.elm-lang.org/packages/evancz/elm-html/4.0.1).\n\n## Can I enter HTML as a string?\n\nNot with elm-html by default. You could hack up a solution like so\n\n```elm\nimport Html exposing (div)\nimport Html.Attributes exposing (property, attribute)\nimport Json.Encode exposing (string)\n\nmain = \n  div [ property  \"innerHTML\" \u003c| string \"\u003cdiv\u003ehello\u003c/div\u003e\"  ] []\n```\n\nbut that's not a good idea. Read up on the elm-html and understand how virtual-doms work and why they're a good idea. \n\nFootnote - I have an example [here](https://github.com/eeue56/relm/tree/master/proposal/basic-html) of abusing Native to hack out some HTML from a string.\n\n\n## Do I always have to manually create an index.html?\n\nNo! If you run `elm-make \u003cfilename\u003e --output index.html`, it will create both elm.js and a version of it in the the index.html file.\n","funding_links":[],"categories":["Resources","Articles"],"sub_categories":["[Elm](http://elm-lang.org)","Outdated articles (Not relevant for current Elm architecture)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feeue56%2Felm-for-web-developers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feeue56%2Felm-for-web-developers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feeue56%2Felm-for-web-developers/lists"}