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;
}

// C++
public static int add(int a, int b)
{
    return a + b;
}

// C#
public static int Add(int a, int b)
{
    return a + b;
}

// JavaScript
function add (a, b) {
    return a + b;
}

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

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"

"Ryan"

Okay, strings are pretty easy...

Numbers 😁

123 
2.5

123
2.5

Aaaand numbers look the same.

Booleans 🙂

true
false

True
False

They capitalized our booleans!

Variables 🤔

var name = "Ryan"
var year = 2019
var cool = false

name = "Ryan"
year = 2019
cool = False

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 ]

[ 1, 2, 3 ]

You can make lists just like before!

Objects 🤔

{ name: "Ryan", year: 2019 }

{ name = "Ryan", year = 2019 }

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

Functions 😐

function add (a, b) {
  return a + b
}

add a b =
    a + b

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

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

Comments

[Julianna Messineo]

Thank you for this!! I feel like I rely so much on the parentheses around parameters and how functions kind of stand out in JS/other languages with the brackets and function keyword that makes it easy for my eyes to find them quickly. Getting rid of the parentheses and brackets just to type a few letters seems not worth it but I’m trying to get used to it.