How to Elm

This is a basic guide on how to learn Elm rather than actually teach you. I'm going to mostly link to resources that I feel are valuable and try to "teach you how to fish".

The main purpose is to accelerate your learning and save you a lot of googling and weeding through bad explinations.

Essential links

• Main website http://elm-lang.org
• Elm packages search and docs http://package.elm-lang.org
• Elm slack invite http://elmlang.herokuapp.com/
• Syntax Cheat sheet http://elm-lang.org/docs/syntax
• Elm code examples http://elm-lang.org/examples
• Automatic JSON decoders http://eeue56.github.io/json-to-elm/

Learning Paths

There is many different ways to learn Elm. Pick the one that best suits your learning style. With that said I feel that an interactive, "real-ish" project approach to be especially effective for me.

Path 0: Make something (recommended)

Assuming you're familiar with JavaScript and reasonably familiar with functional programming you should:

1. Read through the syntax guide
2. Start with a basic project example that uses Html.beginnerProgram
3. Start making a prototype of something (default: to-do list) doing no JS interop or http requests.
4. Refractor some things by changing the models type and following the compiler messages
5. Pull out some of the larger parts into new files like View.elm etc...
6. Get to the point it's basically done except for a HTTP request and learn about JSON decoding. I recommend using this: http://eeue56.github.io/json-to-elm/ to do it automatically.
7. If this path didn't work for you make an issue or tell me in some way

Path 1: By exercise

• Exercism http://exercism.io/languages/elm

Path 2: By video

• This is a great course (and free!) https://egghead.io/courses/start-using-elm-to-build-web-applications
• Elm seeds https://elmseeds.thaterikperson.com/
• daily drip (paid + a few free) https://www.dailydrip.com/topics/elm
• front-end masters course (paid)

Path 3: By book

• Main Elm book https://guide.elm-lang.org/install.html
• Elm in action (physical / eBook, paid) https://www.manning.com/books/elm-in-action
• 99 problems solved in Elm https://johncrane.gitbooks.io/ninety-nine-elm-problems/content/
• Elm tutorial https://www.elm-tutorial.org/en/

Getting Help

1. Package documentation
2. Search the Elm community FAQ
3. Ask on the Elm slack

A note to JavaScript developers (Especially React.js devs)

There is no spoon (components)

Elm has some serious differences from JavaScript. One of such being there are no components only view functions. What is the difference? Well, a component is something that has local state and behaves independently. There is no local state in elm views.

Elm is a functional programming language and as such it's primary form of abstraction is pure functions. As such you should think of the view as a projection of the state of your app. A view literally transforms the model into HTML, that's it.

You may be tempted to try to organize your app duck style meaning grouping your app into many little model + view + update pieces and then finding a way to combine them together. Don't do that. Because Elm is 100% pure it doesn't allow side-effects which mean that you can't hide things like HTTP request, state updates, etc... inside your "duck". This means there's going to be a ton of wiring pushed up to the app that decides to use your ducks.

The better way

The better way is to define well-encapsulated Models that don't export their implementation with functions to work on it, then make view to show that state. I think this talk is the best explination of it.

In a list:

1. Model the state of the front-end in a clear and concice way
2. Use the view to transform that into html

If you find that the view and the model end up looking quite different consider doing the "selector" pattern

remember:

It's easy to change things in Elm