It all started when Charles Scalfani published a series of articles about functional programming. After completing his little series, I really wanted to try out Elm, which he referred to a lot in these articles.
Introduction
Elm is a language and framework in once, which is used to write web applications. It’s an alternative to other client side frameworks like React and Angular. I was really motivated to learn it, as I heard so many great things about Elm and functional programming in general.
Still, somehow it didn’t work out between Elm and me.
Where Elm shines
Elm has some really great features that make it really attractive at first glance. Its error messages are insanely good and feel like having an assistant on your side.
Elm’s syntax is minimalistic. There is no need for parenthesis or semicolons. For example, you can declare a function like this: addFunc a b = a + b. One can argue, that the syntax is hard to read, but this should be just a matter of time until one appreciates its simplicity.
Then there is The Elm Architecture, which is a better version of Redux. What I mean by that is, the way you manage your applications or components state is similar, but with fewer written code and without having to possibly install additional packages like you probably would in Redux. (some reader right now: Redux is inspired by Elm, you idiot.)
Where Elm doesn’t shine
Let’s start with something small:
import Html exposing (..)import Html.App as Htmlimport Html.Attributes exposing (..)import Html.Events exposing (..)
These are probably the first lines of every Elm file you write, where some UI will be composed. If you want to give your HTML element a class, you need to import and expose this function from Html.Attributes. If you want to listen to events you need to do the same for Html.Events. I admit, that’s something small, but still kind of annoying.
Handling user inputs
A typical scenario on the web: user types something into a text field and presses enter to submit his input. Should be easy to implement, right? Unfortunately, it’s not. This is the code I came up with in the end, which handles this tiny case:
import Json.Decode as Json
...
onEnter msg =lettagger code =if code == 13 then msg else NoOpinon "keydown" (Json.map tagger keyCode)
That’s not nice. What is Json doing there? These are just a few lines of code, but it’s not fun writing them, for such a small case. The same can be accomplished in Vue by simply adding v-on:keyup.enter="doSomething" to your input field.
To see how hard it is to manage the value of a select box in Elm, check out this article. I didn’t dive into Elm much deeper than handling user events and rendering a list of items, but this experience was enough to know where this journey is going.
Conclusion
I didn’t get the “Elmlightment” I was hoping for. It wants to compete with React and Vue, but you aren’t as productive with it as with the other two. I didn’t fall in love with Elm, like I did with Vue.
I wanted to share my experience with Elm already a few weeks back, but I felt like I was doing something wrong, that I didn’t get Elm. But when Anders Hovmöller wrote about his rejection of Elm, I knew I wasn’t the only one feeling that way. So I finally wrote this article.
Hey, my name is Yousef and I’m doing UI challenges in React Native and write about my experiences with client side technologies. If you like it, please hit the ❤️ button and follow me for more!
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMIfamily. We are now accepting submissions and happy to discuss advertising &sponsorship opportunities.
To learn more, read our about page, like/message us on Facebook, or simply, tweet/DM @HackerNoon.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!