Okay Elm, You Have My Attention. Now Where Do I Start?

So there has been some buzz in the JavaScript community about this awesome functional programming language for front-end development called Elm. You might have seen the recent talk by Jamison Dance at React.js Conf 2016 or maybe you’ve stumbled across Elm while reading about Redux, the very popular React library created by Dan Abramov and team. Perhaps you’re just now learning of Elm. No matter how or when you found it, Elm is gaining attention because it’s a powerful language that is fun to use! While I could take the time explain why I feel that way, I will instead leave that to the many posts and videos which already clearly explain the benefits of Elm.

• Make the Back-End Team Jealous: Elm in Production by Richard Feldman
• Effects as Data by Richard Feldman | Reactive 2015
• Let’s be mainstream! User focused design in Elm by Evan Czaplicki
• How Elm made our work better by Ossi Hanhinen

My goal is to cover how to get started learning and building things with Elm. I’d like to answer the question “Where do I find quality information and what do I do with it once I have it?” rather than just provide code examples. However, there will be plenty of links that provide that type of resource.

When I first started looking into Elm I spent quite some time searching for tutorials and resources, trying to figure out the optimal order to tackle them all. I hope this will be a useful guide to those looking for some direction. Let’s get started.

Luckily, Ruslan Ismagilov has done most of the hard work collecting Elm resources already with this awesome repo. The repo has a great summary of Elm related resources, but I’d like to provide some commentary and offer my suggestions for the best way to approach these resources.

Note: The links above explain what the language is and where it shines, so if you are not familiar with what Elm is and why it’s useful, please check out the links above before continuing.

Once you have an idea of what Elm is, it’s helpful to at least get an overview of the syntax on the project’s website, so that when you come across it in later examples you aren’t totally confused. Once you start writing Elm code and going through some tutorials, the syntax will become more familiar and comprehensible.

After getting a brief intro to the syntax, I think Richard Feldman’s post on Building a Live-Validated Signup Form in Elm is a great place to start, especially if you are coming from a JavaScript background. The post conveys Elm concepts using terminology familiar to JavaScript developers. Working through and completing the exercise will get you on the right track to learning the language.

Once you have seen the power of the Elm architecture, NoRedInk style, you can take a look at the elm-architecture examples. This is the official guide for the Elm architecture. While you could work through this first, I think having done Richard’s example gives you a better foundation for which to build on with this tutorial.

After going through the Elm-architecture tutorials I highly recommend checking out the GitBook titled Elm-Tutorial. This book is fantastic. It starts by introducing the concept of ‘Signals’ and essentially has you implement the start-app library that was used in the previous two tutorials.

These resources should give you some experience with the basics of the language. Like any new skill, the best way to learn it is to really dig in and get your hands dirty.

I hope this has been a helpful overview and enough to get you on your way to learning, enjoying, and building some amazing apps with Elm! Oh, and once you’ve built something be sure to show it off on builtwithelm.co.

(Notable mention: The Pragmatic studio’s “Getting Started With Elm” is a great video course, however, it is a paid resource.)