How to start learning Elm-lang

by mmyoji

2 min read

elm

I'd learned Elm once, but it was really changed from 0.19 and I learned it again like as a beginner (and I believe I am still a beginner of the language).

What is changed?

There're a lot of things changed, but the most important thing is the all CLI commands were integrated to elm.

For example, you now run $ elm repl when you start the Elm REPL (the older one was $ elm-repl).

You just have to care about the difference of commands when you read a Elm blog post or a document which doesn't specify the version of Elm.

If you've already used the older version of Elm, elm-upgrade command is really helpful.

Installation

Install

The above is the official installation document, but you can just install through npm command (and works well at least on Ubuntu 18.10).

# Suppose you already installed node and npm.

$ npm i -g elm@elm0.19.0
$ npm i -g elm-format@elm0.19.0

And you will get elm command now.

Docs

I omit the detail about Elm lang and Elm Architecture here because we have great documents!

Docs

This page has some links to learn Elm.

Starting Official Guide and reading Package Docs, when you want to know the API detail, are really helpful.

Basic development process

$ mkdir my-elm-project
$ cd my-elm-project
# Generates `elm.json` and `src/` directory.
$ elm init
# Edit entry point src file.
$ vi src/Main.elm
# Run Elm server (default port is 8000)
$ elm reactor

# Then access http://localhost:8000/src/Main.elm,
# you can see a built HTML.

When you need extra packages, just run $ elm install elm/html for example.

Load generated JS from HTML

$ elm make src/Main.elm generates index.html by default, but if you want to generate JS file and load it from existing HTML, this instruction is useful for you.

$ elm make src/Main.elm --output=main.js

$ vi index.html

<!doctype html>
<html>
  <head>
    <title>Elm test</title>
  </head>
  <body>
    <div id="app"></app>
    <script src="./main.js"></script>
    <script>
    var app = Elm.Main.init({
      node: document.getElementById("app")
    })
    </script>
  </body>
</html>

<!-- or you can render the entire elm app inside body -->
  <body>
    <script src="./main.js"></script>
    <script>
    var app = Elm.Main.init()
    </script>
  </body>

Difficulties

The difficult part of learning Elm is understanding Commands and writing code according to functional programming.

I'm still not sure the Time part and the Task API is the most difficult part for me.

And I wonder what is a better approach to build application with Elm:

  • SPA
  • Build a minimal code and load from HTML partly

I can do the latter now but I have no idea about the former.