How To Elm

HowToElm.md

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)

How to "Scale" Elm

One of the first questions JS developers tend to have is how organize and keep code clean when growwing an Elm applicaiton.

Keep in mind that Elm is very different than JavaScript. For one thing there's no local state of any sort nor is there any direct way to do side effects. These are there to protect you and are part of what makes Elm code generally 100% runtime error free.

There's also not one cure-all way to organize your code like many frameworks encourage you to do. For instance, despite the Html.program funciton being organized into view, update, model, subscriptions, etc... doesn't mean you have to organize your code that way. Do what makes sense for your domain. Don't prematurely optimize.

These are some basic rules to follow

1. Make good models
2. Hide implementaiton if it's complex
3. Use the view to transform that into html
4. If your program needs to change just modify the model and follow the errors till you've got a working app again.
5. Remember, Elm makes it easy to fix your mistakes so don't sweat it too much.