DEV Community

Ryan Haskell
Ryan Haskell

Posted on • Updated on

Elm: From beginner to be-winner

hey there! 👋

My name's Ryan and I learned about Elm on a train ride home in September 2016.

Ever since, I've been completely obsessed.

Elm is a programming language for building web applications. However, it's usually compared to JS frameworks (like React or VueJS) because it provides a nice model for scaling up!

Learning Elm taught me a simpler way to do the stuff I was doing before, and I think that's something worth sharing!

dat syntax tho 😯

If you're like me, you've seen Java, C++, C#, or JavaScript code before.

Although each language has its unique qualities, the syntax is pretty similar:

// Java
public static int add(int a, int b)
{
    return a + b;
}
Enter fullscreen mode Exit fullscreen mode
// C++
public static int add(int a, int b)
{
    return a + b;
}
Enter fullscreen mode Exit fullscreen mode
// C#
public static int Add(int a, int b)
{
    return a + b;
}
Enter fullscreen mode Exit fullscreen mode
// JavaScript
function add (a, b) {
    return a + b;
}
Enter fullscreen mode Exit fullscreen mode

I'll never forget the first time I saw C#, coming from a Java background. I was so relieved to find that all my knowledge translated and that they just wanted to capitalize their method names 😅

That being said, I will also never forget the first time I saw Elm code:

add a b =
    a + b
Enter fullscreen mode Exit fullscreen mode

I nearly died.

To make your experience less deadly, I'd like to gradually introduce you to Elm code so you don't make a run for it (like I almost did)!

Here's what I'll show you:

  1. Some code in JavaScript.
  2. The equivalent code in Elm.
  3. Some comments on any differences!

I'll even use emojis in the header, so you know which emotion to feel 😌

Strings 😀

"Ryan"
Enter fullscreen mode Exit fullscreen mode
"Ryan"
Enter fullscreen mode Exit fullscreen mode

Okay, strings are pretty easy...

Numbers 😁

123 
2.5
Enter fullscreen mode Exit fullscreen mode
123
2.5
Enter fullscreen mode Exit fullscreen mode

Aaaand numbers look the same.

Booleans 🙂

true
false
Enter fullscreen mode Exit fullscreen mode
True
False
Enter fullscreen mode Exit fullscreen mode

They capitalized our booleans!

Variables 🤔

var name = "Ryan"
var year = 2019
var cool = false
Enter fullscreen mode Exit fullscreen mode
name = "Ryan"
year = 2019
cool = False
Enter fullscreen mode Exit fullscreen mode

Elm doesn't use var, just assign a name to a value!

(Also, I'm not cool whether you type the var keyword or not...)

Lists 😃

[ 1, 2, 3 ]
Enter fullscreen mode Exit fullscreen mode
[ 1, 2, 3 ]
Enter fullscreen mode Exit fullscreen mode

You can make lists just like before!

Objects 🤔

{ name: "Ryan", year: 2019 }
Enter fullscreen mode Exit fullscreen mode
{ name = "Ryan", year = 2019 }
Enter fullscreen mode Exit fullscreen mode

With Elm, we use = instead of :, which is consistent with what we saw earlier with variables.

Functions 😐

function add (a, b) {
  return a + b
}
Enter fullscreen mode Exit fullscreen mode
add a b =
    a + b
Enter fullscreen mode Exit fullscreen mode

Alright, let's break this bad boy down:

  1. We don't need commas or parentheses for inputs, we can use spaces to separate arguments.
  2. Just like eariler with var, Elm doesn't need you to type function. It knows you want a function because you gave it arguments before the =!
  3. Every function in elm returns a value, so you don't need to type it out. This function will return a + b (I promise)

To be fair, the latest JavaScript actually looks a lot more like Elm with it's arrow functions:

var add = (a, b) => a + b
Enter fullscreen mode Exit fullscreen mode

still interested? 🙄

If you're still reading this, then hopefully you're curious about how you can actually replace HTML, JS, and CSS with this one language!

In that case, you should check out the official guide here:
https://guide.elm-lang.org

And remember: you can do this! Also- the Elm Slack #beginners channel is here to support you every step of the way ♥️

Want me to tell you more? Just let me know! I'm always down to brainwash strangers in my spare time.

Thanks for reading! 🥰

Top comments (0)