:rainbow: discover the beautiful programming language that makes front-end web apps a joy to build and maintain!
It's difficult to introduce elm to someone who has never heard of it before without sounding "evangelical" ...
We've tried our best to be "objective" and factual; the fact is that Elm is awesome.
Which is why so many JS projects have "borrowed" (shamelessly copied) it's ideas. (Redux, Immutable.js, etc.)
@rtfeldman put it best in his 6 Months of Elm in Production talk (which we highly recommend watching!)
"If you take two products and compare them on feature-checklists that gets you
a very inaccurate picture of what it's going to be like to actually use them."
If anything inthisguide is unclear/unexplained, please help us improve by opening an issue: https://github.com/dwyl/learn-elm/issues
Most of us are already comfortable with
There are many "technical" reasons for using Elm:
errormessages that inform you exactly what is wrong (during compilation) before you attempt to view your app in the browser/device.
resultof that study (borrows ideas from several places and assembles them into a cohesive beautiful package much how Apple made the original iPhone...)
The reason(s) we @dwyl are using the
elmecosystem is because it has: + beginner-friendly and thriving community where everyone is welcome + clear leadership from nice + smart people and + excellent documentation (which greatly reduces frustration for beginners) + a shared mission to build the best graphical user interfaces for the web!
These are a few of our favourite things.
Elmis a programming language for creating web browser-based graphical user interfaces. Elm is
purely functional, and is developed with
robustness. It advertises "
no runtime exceptionsin practice," made possible by the Elm compiler's
It's difficult to overstate how game-changingelm, theelm-architectureandelm-platformare to web development right now! The fact that Dan Abramov was "inspired" by Elm (architecture and debugger) for Redux and React Hot-Reloader respectively, should tell you that there's "something" here worth exploring ...
feellike Functional Programming is "complicated" you aren't alone, it's a perfectly normal sentiment:
All we can say to that is:
Fear not, we have witnessed many non-mathematician people (without a Computer Science or "Engineering" background) learning Elm "from scratch" and while some initially
feltthat Functional Programming was a steep learning curve, because it's quite different from what we were used to (procedural/imperative/mutable...).
foundthat the Elm language is actually really small and focussed
Tip: if you want to understand the core concepts, jump to the Language section below.
If you haven't felt the pain of trying to debug/maintain/extend code you did not originally write, or have not worked on a sufficiently large app to
feelthe "fix one thing breaks two other features" "whack-a-mole", you might not not see the benefit of the
But we urge you to consider the list in the "Why?" section (above)
and if any of those points appeals to you,
give elm 5 minutes of your time today to try the "Quick-Start" below!
The best place to start is with the "Official Guide". But we have condensed their "Install" guide into the 5-minute instructions below:
While it's not a "Pre-requisite", we (highly) recommend learning/understanding The Elm Architecture ("TEA")
Enough talk, let's see an example!
On your local machine, open a terminal window and run the following command:
git clone https://github.com/dwyl/learn-elm.git && cd learn-elm
Install the node.js dependencies (
Note: We installelm(theelmcompiler) locally for the "quick-start". If you decide to use it for your own project(s), you can install it globally usingnpm install -g elm
examples/hello-world.elmfile in your editor.
nameto your name!
elm-reactorcommand to start the server:
Elm-reactor has now started the server on your localhost.
Note if you install elm globally you will be able to typeelm-reactorwithout thenode_modules/.bin/(relative path)
View the entire repository in your web browser by going to: http://localhost:8000/
Click on example/hello-world.elm to see your Hello World! This shows how it would compile into
HTMLwithout having to use
elm-make(which we'll save for later)!
You just saw how easy it is to get started with
elm, how do you feel? Was it "difficult"? Better or worse than your experience of learning any other technical concept/tool/language?
Please share your thoughts!
The best place to start your elm journey
is with the (free) "Official Guide"
At the time of writing, the entire "Official" guide to Elm (GitBook) (written Evan Czaplicki, creator of Elm, and improved by the community) is 136 pages (with generous spacing in the code examples). The guide is readable/learnable in less than a day including trying all the example and demo code. If you prefer to download and read the guide "offline" (e.g: on public transport during your commute to work...), You can download a PDF, ePub or Mobi (Kindle) for free at: https://www.gitbook.com/book/evancz/an-introduction-to-elm/details
It's not often we find a half-decent tutorial on a subject we are trying to learn. We were delighted to discover that Richard Feldman (one of the
elm) has produced a workshop (videos + learning materials) for learning
elm: https://frontendmasters.com/workshops/elm/ + https://github.com/rtfeldman/elm-workshop
While it costs $39 we think it's an absolute bargain!
Note if you have a lack of funds to pay for a subscription to get access to the workshop, contact us! (we can help!)
The official installation instructions for Mac, Linux & Windows: https://guide.elm-lang.org/install.html
Yes, install it globally so you get the
elmcommand which has a several useful functions. Including
elm reactora hot-reloading webserver that allows you write/test simple apps fast. and
elm makewhich compiles your App.
Install using NPM with the following command:
npm install elm -g
principle of least privilege.
Remember, if you are adding Elm to a project which will be deployed on a hosting service (such as heroku) you will need to add elm to the dependencies in your
npm install elm --save
There are many things to love about
elmbut something you can appreciate right away is
elm-format. It's a tool that formats your
elmcode so that it is consistent with the community standard format.
Installation instructions 1. Download the current version of elm-format found at: https://github.com/avh4/elm-format 2. Unzip the downloaded file and move the elm-format executable to a location in your PATH variable. If the unzipped file is in your Downloads folder, you could move it with the following terminal command:
mv ~/Downloads/elm-format /usr/local/bin/elm-format, which will move it to the default path. 3. Install the elm-format package in your text editor. In Atom, type
apm install elm-formatinto the terminal, or install via Packages (filter by
elm) 4. Set elm-format to format your work on save. In Atom, Open Settings
CMD + ,(Linux:
ctrl + ,), click Packages, filter by 'elm', then click on the elm-format package's settings button. Set the
elm-formatcommand path setting and ensure the 'format on save' checkbox is selected.
For more advice on
elmdevelopment environment setup: https://github.com/knowthen/elm/blob/master/DEVSETUP.md
Help Wanted summarizing the language features! for now see: http://elm-lang.org/docs/syntax
Ready to start testing? Simply follow these 3 steps:
npm i -g elm-test
elm test initThis will set up your test environment and give you 7 dummy tests in your newly created test folder
elm testor the very nice
elm test --watchwhich will re-run your tests as you write them
The general format of the tests are:
elm describe "Dummy test" [ test "dummy test description" Expect.equal actualValue expectedValue ]For example:
elm all : Test all = describe "My first test" [ test "Addition test works correctly" Expect.equal (2 + 2) 4 , test "Our subtraction function works correctly" -- here we are pretending we have a subtract function that takes 2 arguments Expect.equal (subtract 10 5) 5 ]
To set up your elm project on Circle CI, copy over our
circle-dependencies.shand follow the instructions on our Circle CI tutorial.
npm startto see the output.
view, it can make sense for the URL to change as well, so that the user can navigate back to the same view as they please.
Elmhttp://learnyouanelm.github.io/ (lots of "Todo" items and last updated about a year go)