learn-elm v0.0.1
learn elm
This tutorial is still a "Work-in-Progress" ... please help us by reading through the draft and raising any issues you find: https://github.com/dwyl/learn-elm/issues
Why?
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. if you spot any inaccuracy or anything unclear/unexplained, please help us improve by opening an issue: https://github.com/dwyl/learn-elm/issues
Most of us are already comfortable with JavaScript
and it is still (and will remain) the
most popular programming language
whereas elm-lang
is not even on the radar
... so why should we even consider it?
The reason(s) you should be considering elm
are NOT (limited to)
the "standard" (valid) tech-based arguments:
- "Pure" functional style means all your functions are predictable and thus very testable.
- Immutable state means there are fewer (often zero) "side effects"
- Fewer language features lowers cognitive load when you're reading (other people's) code.
- Much less to learn than comparable "Stacks" e.g:
- React + Redux + Flow + Immutable + Babel + all the other setup-code...
- Angular 2 + Typescript + Babel + ReactiveX + etc. (bottom line is: elm is
less
to learn!)
- much faster than React.js or Angular 2 in all "benchmarks"
- Built-in "Time Travelling" Debugger that lets you record and replay actions in a user session (thus eliminating the need for manually writing Selenium/Nightwatch tests!)
- helpful/friendly compiler
error
messages that tells you exactly what is wrong before you attempt to view your app in the browser/device. - Evan surveyed the existing web programming languages for his
University thesis and Elm is the
result
of that study (borrows ideas from several places and assembles them into a cohesive beautiful package much how Apple made the original iPhone...)
The the reason(s) we @dwyl are exploring
the elm
ecosystem is because it has:
- 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 built the best graphical user interfaces for the web!
these are a few of our favourite things.
@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."
What?
Elm
is a programming language for creating web browser-based graphical user interfaces. Elm is purely functional
, and is developed with emphasis
on usability
, performance
, and robustness
. It advertises "no runtime exceptions
in practice," made possible by the Elm compiler's static type
checking.
It's difficult to overstate how game-changing
elm
, theelm-architecture
andelm-platform
are 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 ...
Isn't "Functional Programming" Difficult...?
If you feel
like Functional Programming is "complicated" you aren't alone,
it's a perfectly normal sentiment:
I tried functional programming in JavaScript before, it was confusing...
All we can say to that is:
Trust us, the non-mathematician people (without a Computer Science
or "Engineering" background)
initially felt
Functional Programming
was a steep learning curve,
because it's quite different from what we were used to
(procedural/imperative/mutable...)
We found
that the elm language is actually really small and focussed
and when we break it down there are only a handful of concepts
we need to understand before we can start reading/writing code.
Tip: if you want to understand the core concepts, jump to the Language section below.
Who?
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 feel
the
"fix one thing breaks two other features" "whack-a-mole",
you might not not see the benefit of the elm
ecosystem ...
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!
How?
The best place to start is with the "Official Guide": http://guide.elm-lang.org/get_started.html we have condensed the steps into the 5-minute instructions below:
Pre-requisites
- A Computer with:
- Node.js Installed (if you don't already have node get it here: https://nodejs.org/en/download/ )
- Text Editor (any will do but we recommend https://atom.io/ because it has good a Elm syntax/plugin)
- Internet Access (just so you can install elm and the modules)
- Some JavaScript/Node.js Knowledge (ideally you have built a basic Node/JS app before ... but no "major" experience required/expected)
Quick-Start (5 Mins)
Enough talk, let's see an example!
1. Clone this repository
On your local machine, open a terminal window and run the following command:
git clone https://github.com/dwyl/learn-elm.git && cd learn-eml
#### 2. Install
Install the node.js dependencies (elm
platform):
npm install
Note: We install
elm
(the `elm' compiler) locally for the "quick-start". If you decide to use it for your own project(s), you can install it globally.
3. Hello {Name}!
- Open the
examples/hello-world.elm
file in your editor. - Move your cursor to the 3rd line and change
"World!"
to your name!
4. Compile!
Run the elm-make
command to compile the changes you made in hello-world.elm
:
node_modules/.bin/elm-make examples/hello-world.elm
Note if you install elm globally you will be able to type
elm-make
without thenode_modules/.bin/
(relative path)
5. View in Browser
View the result in your web browser by opening the index.html
file:
6. Reflect
You just saw how easy it is to get started with elm
, how do you feel
?
Was it "difficult"? Better or worse than you experience learning any other technical concept/tool/language?
Please share your thoughts!
7. Try more examples
There are many more examples you can try: http://elm-lang.org/examples
We are not duplicating the examples here as we prefer to point people to the "single source", but you should create them locally on your machine and extend them with your own ideas!
In-depth Step-by-Step Tutorial (60mins)
The best place to start your elm journey is with the "Official Guide" http://guide.elm-lang.org/ which is available on Evan's GitHub at: https://github.com/evancz/guide.elm-lang.org
At the time of writing, the entire "Official" guide to Elm (GitBook) (written by the creator of elm and improved by the community) is 111 pages: https://www.gitbook.com/book/evancz/an-introduction-to-elm/details which means it's readable in less than a day.
Front-end Masters Workshop
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 core
contributors to 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!)
@TODO
: write comprehensive notes on the content in the workshop!
Install the Elm Platform Globally on your Computer
Yes, install it globally so you get the elm-compiler
and elm-platform
which
allows you to use the elm-make
command in your terminal:
npm install elm -g
avoid using
sudo
as you really should be following the principle of least privilege.
Language
Help Wanted summarizing the language features! for now see: http://elm-lang.org/docs/syntax
Reading
Elm-specific Articles
- How to use Elm at work: http://elm-lang.org/blog/how-to-use-elm-at-work (or work for DWYL where you're actively encouraged to use it!)
- JavaScript interoperability: https://guide.elm-lang.org/interop/javascript.html
- How to add Elm to existing JS codebase: http://tech.noredink.com/post/126978281075/walkthrough-introducing-elm-to-a-js-web-app
- How Elm made our work better (success story): http://futurice.com/blog/elm-in-the-real-world
General Functional Programming (background reading)
- Objects Should Be Immutable: http://www.yegor256.com/2014/06/09/objects-should-be-immutable.html
Videos
- Mutable vs Immutable: https://youtu.be/5qQQ3yzbKp8
- Learning Functional Programming with JavaScript (Anjana Vakil): https://youtu.be/e-5obm1G_FY
- Functional Programming from First Principles (Erik Meijer): https://youtu.be/a-RAltgH8tw
- Teaching functional programming to noobs (Rob Martin): https://youtu.be/bmFKEewRRQg
- Functional Programming is Terrible (Rúnar Bjarnason): https://youtu.be/hzf3hTUKk8U
### Promising but incomplete:
- Learn You an
Elm
http://learnyouanelm.github.io/ (lots of "Todo" items and last updated 2 months ago)
7 years ago