Elm: From beginner to be-winner
Tags: elm, web, learning, functional
Published: 2019-03-11 06:01:59

---
title: Elm: From beginner to be-winner
published: true
description: Learning a weird looking language to make your day a little nicer.
tags: elm, web, learning, fp
---

## 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
// Java
public static int add(int a, int b)
{
    return a + b;
}
```

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

```csharp
// C#
public static int Add(int a, int b)
{
    return a + b;
}
```
```js
// 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:

```elm
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.
1. The equivalent code in Elm.
1. Some comments on any differences!

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


### Strings 😀

```js
"Ryan"
```
```elm
"Ryan"
```

Okay, strings are pretty easy...

### Numbers 😁

```js
123 
2.5
```
```elm
123
2.5
```

Aaaand numbers look the same.

### Booleans 🙂

```js
true
false
```
```elm
True
False
```

They capitalized our booleans!

### Variables 🤔

```js
var name = "Ryan"
var year = 2019
var cool = false
```
```elm
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 😃

```js
[ 1, 2, 3 ]
```
```elm
[ 1, 2, 3 ]
```

You can make lists just like before!

### Objects 🤔

```js
{ name: "Ryan", year: 2019 }
```
```elm
{ name = "Ryan", year = 2019 }
```

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

### Functions 😐

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

```elm
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.
1. 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 `=`!
1. 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:

```js
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](https://elmlang.herokuapp.com/) #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! 🥰