From JavaScript to Elm: A Blissful Journey

From JavaScript to Elm: A Blissful Journey

When building web applications with JavaScript, there are thousands of tools and frameworks to choose from. Most of these tools aim to make developing with JavaScript easier and more productive, and most of them help web developers achieve that. However, sometimes the language itself is the constraint. If you have built web applications in JavaScript, there’s a good chance you’ve experienced errors like Uncaught TypeError: Cannot read property 'x' of undefined that end up taking lots of time to debug. The language does not help you catch these errors early enough in the development cycle, and they usually end up being discovered too late, mostly by your users reporting that something is not working.

What if you could release your web app with the confidence that you would never get any runtime exceptions again? What if every time you needed to refactor code, you could do it confidently knowing you have a compiler that would let you know of any errors and suggestions on how to fix them? What if you could get all these benefits today, right now?

Welcome to the world of Elm.

Elm is a language written specifically for building reliable web-based user interfaces and targeted towards the needs of modern frontend applications. It compiles to JavaScript, which makes it usable in web browsers, and is famous for its promise of No Runtime Exceptions. With Elm, you are guaranteed that once your app compiles, there won’t be any crashes and you can devote your time to deal with the things that matter. Let’s dive in and explore this language and what it has to offer.


The best part of using a language with a compiler is you never have to deal with minute details such as typos and using undefined functions. You leave those to the compiler. Think of a compiler like a helpful assistant that helps you with the simple stuff and leaves the important logic details to you. One thing’s for sure; you will make mistakes from time to time, and the compiler is here to make you aware when you make these mistakes and how to fix them.

Let’s see how the compiler can be helpful with a real example. Let’s assume we want to add up all the numbers in a list and while creating the list, we happen to make the slightest of mistakes by including one of the numbers as a string.

If we were doing this in JavaScript, this is how this might look:

[0, 1, 2, '3'].reduce(function(acc, val) {
    return acc + val;
}, 0);

This will return 33, not quite the result we expected 🤔

Now let’s try to do the exact same computation in Elm and see what happens.

Screen Shot 2017-04-26 at 5.36.23 PM

The code won’t even run. Elm expects all items in a list to be of the same type, and it notices that it is being asked to add numbers and strings, which is an ambiguous operation. The Elm compiler realizes our mistake and points out the exact list entry that is causing the mismatch and even adds some helpful hints and a link to the docs to explore things further.

This is exactly what I want in a language. I obviously made a silly mistake, which JavaScript ignores and gives me a result of 33 , which isn’t really that helpful. I would prefer to know that I made a mistake and fix it rather than get a result that is obviously wrong.

This is what makes developing apps in Elm such a pleasant experience, since you always know the compiler has got your back. There are no surprises after you’ve released your app, and no more sleepless nights debugging why the sum of ​​12 and 3 is ​33 😀

A Well-Defined Architecture

Elm has a standard way of organizing your application, and this pattern is called The Elm Architecture. You’ll notice this pattern over and over again as you explore Elm apps. It enables you to separate your application into three parts:

  • Model — the state of your application
  • Update — a way to update your state
  • View — a representation of your model as HTML

I find this to be a solid way of structuring web applications. The first part is the model, which holds your app state. Going through the Elm architecture examples really helps in showing how to model different types of data. I’ve also found union types to be helpful in creating custom types that express your intent more clearly.

The update section is how you change your app state. It receives an intent to change the state, computes the new state from the old one and returns the updated state object. Since everything is immutable in Elm, we are always returning a new state object after each computation, and never modifying the old one. This enables us to get a trail of how our model changes over time as people interact with it.

This concept makes debugging trivial since to reproduce a particular state, we can record the sequence of actions that were taken and apply them to the model to get to the state we want. This is the concept behind innovations such as the time traveling debugger, which you can check out in action in this Mario game.

Lastly, there’s the view which is a visual representation of the model on the screen. Anytime the model changes, the view is updated automatically, and Elm is blazing fast at this.

The good news is that the JavaScript ecosystem is generally heading towards this direction with ideas such as a single state tree, reducers and pure view functions. In fact Redux is modeled after the Elm Architecture.

Try it

The best way to experience Elm is to try it for yourself. Even if you don’t plan on using it on a daily basis, try it. Start with The Elm Architecture and take it from there. It will have a positive effect on any code you write in future. If it seems hard and confusing the first few times, give it five minutes.

The Elm community is pretty welcoming and you should join the Elm Community Slack and ask any questions that arise.

I can’t wait to see what you build with Elm 😎

Featured Image Credits:

Problem-Driven Development

Problem-Driven Development

As a mostly self-taught programmer, most of the things that helped me learn programming and understand its concepts is the fact that I applied the concepts I was learning to help solve some actual problems that I was encountering in my day-to-day life.

A few years ago while I was trying to teach myself Python, I found it hard to be able to make the leap from the beginner to the intermediate level. I understood the basic syntax of the language, and I wanted to transition to a relatively proficient programmer, one who could make useful software that people would want to use.

I soon came to realise that this was hard to do since I had no avenue to apply the skills I was learning. While there are lots of programming quizzes and challenges online, I couldn’t find something that I cared enough about to invest the required time and effort.

However, in my day to day usage of my computer, I discovered that there were a bunch of things that I used to do repetitively, that I would rather automate. One of these was the process I was using to discover new music.

I am a big fan of The Official UK Top 40 Charts, and I used to love to check out new music from there all the time. Back then, my process for discovering new music was to go to the chart’s website, check out any new songs, if I saw one that caught my eye, I would search for the track and listen to it on YouTube.

Now, for one or two songs, this is not a problem, but when it is in the range of around ten songs that might change every week, this quickly becomes tedious. I would rather have one place that would have all the tracks in the Top 40 charts and their corresponding YouTube links, so it would be easier to find and listen to any song on the charts with one click.

I figured that this was a good problem to automate, and proceeded to come up with a command line script written in Python (GitHub link), that would help me view all the songs in the charts right in my terminal along with their corresponding YouTube links. This way I would just have to run the script, get the Youtube links to all the songs in the Top 40 Charts in one place, and I wouldn’t have to go through my previous tedious routine ever again.

In the process of solving this problem for myself, I learnt a whole lot of stuff about Python and by the time the program was complete (This may make it sound like it was easy but trust me, it wasn’t), I realised I could make software that people would find useful, even if I was the only person using it. This project helped me make the leap from a Python beginner to a person who could come up with viable solutions to problems I encountered.
Of course, the greatest benefit to come out of this was saving myself a lot of unnecessary effort 🙂

The best part about all this is that anyone can apply this method to accelerate their learning. If you are trying to learn a new thing, especially related to computers and programming, think about this.

What is a problem that I care about solving that I could apply this set of skills that I am learning?

You are likely to learn more by applying what you are learning in practice. One of the best ways to do this is to look at the problems or inconveniences you or others are facing each day and asking yourself:

Can I learn more by trying to solve this for myself?
Would somebody
want to use your product?
How could I make it better for my users?

I believe that by collectively adopting a problem-solving mindset and applying it to learning, we all could make a difference in the world, by acquiring more knowledge for ourselves and solving most of the world’s problems in the process.

Featured Photo by ™ Pacheco

Taking the Writing Challenge

For the last 2 months or so, I have been meaning to write a blog post. I do not know the topic of the said post, or its content, or anything at all about it. I just know that I have to write something. I also know there’s a lot of valuable thoughts that I have in my mind that need to be put in words, but I cannot bring myself to put them in writing.

Writing simply terrifies me.

On the flip side, in about the same amount of time, I have been able to learn quite a lot of new stuff related to JavaScript programming, among them React, Jasmine, ES6 and much more. Surprisingly, when I have had to write code on these things and put it out there, I usually do it without a problem. Writing, on the other hand, has always felt like a nightmare.

So what can I do about it?

Chuck Palahniuk quote

So this is me officially putting out the challenge to myself, to venture out to where I fear most, to write more and more until I no longer fear it.

Have you been in a similar situation before, whether with writing or something else, that you know you need to do but it simply terrifies you? Please share your thoughts in the comments.


Does a University Degree Guarantee a Job?


We are currently living in a completely new and interesting era. This is an age where a college/university degree is no longer the prerequisite for success it used to be. College dropouts are becoming billionaires while on the other side of the scale college graduates are ending up being underemployed and even working for the dropouts.
Continue reading “Does a University Degree Guarantee a Job?”