If you know some Elm basics, it will help you re-enforce your knowledge and boost your confidence.
Original article found
Level: Beginner friendly-ish
If you don’t know Elm, you should be able to finish the tutorial by following the instructions. I recommend typing the code out! (Do not copy/paste).
Don’t worry if some things don’t make sense. It gets better with more practice, I promise.
If you have done the standard Elm intro-apps:
- Hello World
- To Do
and feel comfortable with Elm language and architecture basics, this tutorial is excellent for you.
It re-enforces those basics. It’s longer than the typical intro demos without being preachy. But short enough where you don’t feel lost and give up half-way thru the tutorial.
- This is a full-blown tutorial without any magical boiler plate.
Step by step code without too much explanation.
Code snippets each step of the way. So, you can compare your code as you go along.
Each section is short enough to keep you engaged.
No wall of text paragraphs. Short and straight to the point. Show me the code!
This is my favorite part of the tutorial. Too bad it’s left almost all the way at the end of the tutorial.
elm make react-tutorial --output comment-box.js
This will generate a
html file with a
script tag. Sounds too easy, right? It is. The tutorial covers this area well. I didn’t know that before covering this tutorial.
But the win is this: The author helps you build the
html file and what to write. If you are rusty or just html/css-disabled (like myself), this is the icing on this cake. (Hmmm…cake!)
The take away is that you can write Elm components and use them inside your existing apps. I’m not saying to rewrite your whole app, but maybe rewrite a section (or component) to get your feet wet.
- The lack of explanation emphasis that Elm is a functional language. Maybe it was left out on purpose. Functional programming is still the boogeyman to many developers.
Code feels a bit unorganized. Most tutorials I’ve seen follow the pattern below:
--Model --model code goes here (your state) --Update --update code goes here --View --divs, labels, buttons go here --main -- entry point
I’m getting way too picky on this. But after seeing most tutorials follow that code organization, I am use to it. Let’s follow the suggested guidelines and organize our code.
- External CSS. The tutorial uses internal CSS. But I tried to use an external CSS file, but found out external CSS files do not work in Elm. Luckily, there’s an alternative solution.
I’m nick-picking again. But it’s a nice gotcha to be aware about.
You skipped till the end, huh?
Should you go over this tutorial? Hell yes.
If this is your first time looking into Elm, I’d suggest shorter Elm tutorials. You can Google for them, but I know you aren’t because reasons. Here are some good resources I’ve used:
Once you’ve gone over them, come back to this tutorial. It will re-enforce your knowledge and boost your confidence.
You aren’t just learning Elm. You are also learning functional programming!
Thank you to Rudolf Olah for putting together this fantastic tutorial.
It re-enforced my Elm knowledge and boosted my confidence. Best of all, it taught me other things I didn’t know about Elm.
Check him out:
Don’t forget to thank him!
Until the next Elm adventure.
Share this article if you found it useful or think someone else might. Also, could you let me know if you like these tutorial reviews? Just leave a comment down below.