Building a Facebook CommentBox With Elm Review

In this blog post, I review a fantastic article that goes beyond the typical Hello World or counter demo in Elm. It’s beginner friendly and code oriented.

If you know some Elm basics, it will help you re-enforce your knowledge and boost your confidence.

Original article found

Building a Facebook-like Comment Box: A React Tutorial in Elm
By Rudolf Olah
Found at Elm Weekly

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
  • Counter
  • 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.

Tutorial awesomeness-es

  • 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!

Transpile Elm -> JavaScript

This is my favorite part of the tutorial. Too bad it’s left almost all the way at the end of the tutorial.

Ok, how do you transpile Elm -> JavaScript?

elm make react-tutorial --output comment-box.js

This will generate a JavaScript file that you can use in 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.

Tutorial improvements

  • 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 code goes here (your state)

--update code goes here

--divs, labels, buttons go here

-- 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.

I’m nick-picking again. But it’s a nice gotcha to be aware about.

TL:DR; Verdict


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!

Special thanks

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.