Forem: Ryan Haskell

Elm for React developers

Ryan Haskell — Wed, 22 Mar 2023 11:54:00 +0000

Hi there! 👋

When I was first learning Elm, it was helpful for me to see side-by-side examples alongside ones from the JavaScript frameworks I was already familiar with.

Recently, the React community released a beautiful guide at React.dev to help beginners learn the framework. This post uses the code examples from their new "Quick Start" guide, to help you leverage your React experience to learn more about Elm!

🚨 Note: The goal of this post is not to compare React to Elm, in an attempt to make one look "better" than the other. Both options are great, so build stuff with whichever you prefer!

Components
Displaying data
Conditional rendering
Rendering lists
Responding to events
Sharing data between components

Components

When writing React components, we use JSX– a hybrid of HTML and JavaScript syntax:

function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

Elm's syntax doesn't look like HTML, but the concepts are mostly the same. We can define functions like myButton or myApp, and reuse them alongside the normal HTML tags imported on line 1:

import Html exposing (..)

myButton =
    button [] [ text "I'm a button" ]

myApp =
    div []
        [ h1 [] [ text "Welcome to my app" ]
        , myButton
        ]

🔗 Demo: Components

Displaying data

Displaying data in JSX is easy– we can use the {} characters to "escape" from our HTML and provide values from JavaScript:

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

Because Elm doesn't use HTML syntax, you won't need any escape characters to display data. You can reference those values as if you were writing normal JavaScript code:

import Html exposing (..)
import Html.Attributes exposing (..)

user =
    { name = "Hedy Lamarr"
    , imageUrl = "https://i.imgur.com/yXOvdOSs.jpg"
    , imageSize = 90
    }

profile =
    [ h1 [] [ text user.name ]
    , img
        [ class "avatar"
        , src user.imageUrl
        , alt ("Photo of " ++ user.name)
        , style "width" (String.fromInt user.imageSize)
        , style "height" (String.fromInt user.imageSize)
        ]
        []
    ]

🔗 Demo: Displaying data

Conditional rendering

In React, you can use JavaScripts if/else syntax or the ternary operator to conditionally render your content:

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}

// USING TERNARY INSTEAD:
// let content = (isLoggedIn) ? <AdminPanel /> : <LoginForm />

In Elm, the if/else expression always returns its value. That means content will be set, depending on isLoggedIn.

For me, it was helpful to think of Elm's if/else like it was ternary, but with the readability of JavaScript's if statement:

content =
    if isLoggedIn then
        adminPanel

    else
        loginForm

🔗 Demo: Conditional rendering

Rendering lists

All arrays in JavaScript support the .map function, which allows React developers to return lists of components like these list items:

const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map(product =>
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.title}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
}

In Elm, values don't have methods, so we use List.map with the function and array we are looping over:

products =
    [ { title = "Cabbage", isFruit = False, id = 1 }
    , { title = "Garlic", isFruit = False, id = 2 }
    , { title = "Apple", isFruit = True, id = 3 }
    ]

shoppingList =
    let
        listItems =
            List.map 
                (\product ->
                    li
                      [ if product.isFruit then 
                          style "color" "magenta"

                        else
                          style "color" "darkgreen"
                      ]
                      [ text product.title ]
                )
                products
    in
    ul [] listItems

🔗 Demo: Rendering lists

Note: Elm functions can use let/in to have "locally-scoped" variables like listItems. When we nested listItems inside of the let/in block, it meant that only the code in shoppingList can access the listItems variable. This is unlike products, which is available to any function in our Elm file.

Responding to events

In React, you'll use "hooks" like useState to track application state. Here's an example of how to do this with a counter and a button:

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

All Elm applications use the same init/update/view pattern to keep track of application state.

In our example:

init sets the initial value of the counter
update defines how our count changes from user events
view defines how to render our HTML, based on the latest count

import Html exposing (..)
import Html.Events exposing (..)

-- INIT

init = 0

-- UPDATE

type Msg = HandleClick

update msg model =
    case msg of
        HandleClick ->
            model + 1

-- VIEW

view model =
    button 
        [ onClick HandleClick ]
        [ text ("Clicked " ++ String.fromInt model ++ " times")
        ]

🔗 Demo: Responding to events

Sharing data between components

In React, our state is defined within our component functions. If we want to share it, we pass "props" like count or handleClick into child components like <MyButton>:

function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

In Elm apps, we always use the init/update/view pattern. This means we can pass our count and HandleClick event into our myButton function as props from our top-level view function:

import Html exposing (..)
import Html.Events exposing (..)

-- INIT

init = 0

-- UPDATE

type Msg = HandleClick

update msg model =
    case msg of
        HandleClick ->
            model + 1

-- VIEW

view model =
    div []
      [ h1 [] [ text "Counters that update together" ] 
      , myButton { count = model, onClick = HandleClick }
      , myButton { count = model, onClick = HandleClick }
      ]

myButton props =
    button 
        [ onClick props.onClick ]
        [ text ("Clicked " ++ String.fromInt props.count ++ " times")
        ]

🔗 Demo: Sharing data between components

That's all I've got!

I hope this tiny guide was helpful, and that you learned something new today. If you want to learn more about Elm, you should check out the official guide or say hello in the Elm Slack #beginners channel

Have a great day! 👋

Learn functional programming with Advent of Code! ☃️

Ryan Haskell — Fri, 02 Dec 2022 03:46:30 +0000

Hello, there! 👋

My name is Ryan, and I'm making a tiny YouTube series to help folks learn functional programming through Advent of Code. Each video will tackle a daily Advent of Code problem, and walk through how to solve it using Elm, a language for making reliable web apps.

For day one, I wanted to share this written guide to introduce you to the basics of the language. I used to build web applications using HTML, CSS, and JS– and articles like this really helped me wrap my head around learning this new style of coding!

1. Let's help some elves!

You can visit Advent of Code to see the full description for today's coding puzzle– but we'll summarize it here for you:

A group of elves need to count calories for their trip
Each elf writes down how many calories each food item they have in a list like this:

1000
2000
3000

That list above is saying "the first elf has 6000 calories worth of food" (Calculated by adding 1000, 2000, and 3000).

But there are more elves!

Every elf in the group jots down the calories for their food, and uses blank lines to separate their food from the elf in front of them:

In the list shown above, we see foods for all 5 elves in our group. Each

What do we need to do?

The problem asks us to:

Add up all the calories for each elf
Find the elf with the most calories
Return that biggest calorie number

In this example, the answer would be 24,000– because Elf #4 has 7,000 + 8,000 + 9,000 calories worth of food.

But how can we use Elm to get that answer?

2. Printing stuff on the screen

This whole Elm thing is new, let's make sure we feel confident first! Here's a basic Elm program that prints "Hello!" to the screen.

import Html

main =
    Html.text "Hello!"

Hello!

Elm compiles to HTML, so this is what we'd see in our web browser if we ran this program.

Elm programs have "functions" and "values":

Html.text is a function that converts a String value into an Html value.
"Hello!" is a value that stores the message we want to print on the screen.

Every Elm program has one main function that runs on startup. When we give main an Html value, our program will work!

Can we print more than "Hello!"?

If we try to give Html.text the wrong input, the Elm compiler will let us know. Let's try to give it a List number instead of a String value:

import Html

main =
    Html.text [ 1, 2, 3 ]

TYPE MISMATCH ----------------------------------

The 1st argument to `text` is not what I expect:

4|     Html.text [ 1, 2, 3 ]
                 ^^^^^^^^^^^
This argument is a list of type:

    List number

But `text` needs the 1st argument to be:

    String

Here is our first "Elm compiler message". Elm doesn't throw errors on our users– instead it gives compiler errors up front during devleopment.

This error is telling us that Html.text expected a String, but we gave it a List number instead.

Luckily for us, Elm provides a helpful function that lets us print out any value we want: Debug.toString

If we update our code to convert that List number to a String, then Html.text will get the String value it expects:

import Html

main =
    Html.text (Debug.toString [ 1, 2, 3 ])

[ 1, 2, 3 ]

Now our program works, and we can print any kind of value. But these parentheses are going to be hard to work with...

Calling functions step-by-step with pipes

Every Elm function can use a special "pipeline" operator. This is an alternative way to pass an input into a function, from left-to-right.

Here's what the same code looks like, but using the pipeline operator:

import Html

main =
    [ 1, 2, 3 ]             -- List number
        |> Debug.toString   -- String
        |> Html.text        -- Html msg

[ 1, 2, 3 ]

Note: I've added comments like -- List number to the end of each line, to help you see the shape of each value after each step of the pipeline. These comments aren't required to make our code run, though!

This pipeline-style will let us break our program into small steps, so we can make tiny progress towards getting to our answer.

Hopefully, the next section will show you what I mean!

3. Our first Elm program

Alright, that's a quick intro to the Elm language– let's learn how to actually solve the problem from before:

Which elf has the most food?

We should start by taking that puzzle input as a String, and printing that onto the screen as HTML. From there, we'll tackle the problem one step at a time!

I've copied the puzzleInput from before, and used """ to create a "multiline" Elm string:

import Html

main =
    puzzleInput
        |> Debug.toString
        |> Html.text

puzzleInput = """
1000
2000
3000

4000

5000
6000

7000
8000
9000

10000
"""

"\n1000\n2000\n3000\n\n4000\n\n5000\n6000\n\n7000\n8000\n9000\n\n10000\n"

This prints out the String, including all the new line characters ("\n").

If you want to follow along, I made this Ellie example for you. It's basically CodePen, so you can code Elm apps in the web browser! ( Clicking the "Compile" button in the top-right will run this code! )

Trimming extra white-space

When we print out this puzzle input, we'll see the string has new lines at the beginning and end.

Let's make our first step to use String.trim to clean those up:

import Html

main =
    puzzleInput            -- String
        |> String.trim     -- String
        |> Debug.toString
        |> Html.text

puzzleInput =
   ...

"1000\n2000\n3000\n\n4000\n\n5000\n6000\n\n7000\n8000\n9000\n\n10000"

String.trim takes in a String and returns another String– but without those extra characters.

I've added back in those Elm comments to make it clear that we still have a String even after running the trim function.

Splitting food up for each elf

Now that we used String.trim, we don't have the leading and trailing \n characters.

What's next? Let's split up each elf's food by using String.split. If we look at our input, we can see that each Elf has two \n characters between their food.

That's all we need to split up our string into a list of smaller ones:

import Html

main =
    puzzleInput                    -- String
        |> String.trim             -- String
        |> String.split "\n\n"     -- List String
        |> Debug.toString
        |> Html.text

puzzleInput =
   ...

["1000\n2000\n3000","4000","5000\n6000","7000\n8000\n9000","10000"]

The String.split function took in two arguments:

"\n\n" – the string we want to split things apart with
The result of puzzleInput |> String.trim

Note: When we use the |> operator, the last argument will be the last value in our pipeline. For this example, that means the trimmed puzzle input from the last step!

Making lists of food for each elf

Each elf has their food split up from the other ones– and each elf's food is an item in the list.

But the numbers are still glued together with \n for each elf...

For each item in the list, let's split those numbers up with another String.split call:

import Html

main =
    puzzleInput                         -- String
        |> String.trim                  -- String
        |> String.split "\n\n"          -- List String
        |> List.map (String.split "\n") -- List (List String)
        |> Debug.toString
        |> Html.text

puzzleInput =
   ...

[["1000","2000","3000"],["4000"],["5000","6000"],["7000","8000","9000"],["10000"]]

Because we want to "split up each string in the list", we need to call List.map. The List.map function runs on each item, and returns the new item.

Because our input list was a List String, each item was a String. When we call (String.split "\n") on each individual String item– we end up with a List String for each item!

Hopefully the HTML output above makes this a bit easier to understand, but now each elf's food is tracked as a List String.

Because there are multiple elves, we track the whole thing in a nested List (List String).

We can't add up text!

We are getting really close, but there's a problem... we can't do addition with String values!

Let's convert these String values to numbers using Elm's built-in String.toInt function:

import Html

main =
    puzzleInput                              -- String
        |> String.trim                       -- String
        |> String.split "\n\n"               -- List String
        |> List.map (String.split "\n")      -- List (List String)
        |> List.map (List.map String.toInt)  -- List (List (Maybe Int))
        |> Debug.toString
        |> Html.text

puzzleInput =
   ...

[[Just 1000,Just 2000,Just 3000],[Just 4000],[Just 5000,Just 6000],[Just 7000,Just 8000,Just 9000],[Just 10000]]

Uh-oh. This doesn't look right at all!

What the heck is "Just"?

Whoa, whoa, whoa– what's this crazy "Maybe" thing? Why are all our numbers prefixed with that Just keyword?

In Elm, there's no null or runtime errors allowed– so any operation that might fail needs to return a Maybe Int instead of a normal Int we might expect from something like JavaScript's parseInt function

This means three things:

Our Elm program will never crash for bad input!
If we try to call String.toInt "banana" we will get Nothing
If we call String.toInt "1000", we will get Just 1000

So how do we get rid of those weird Just things?

Luckily, Elm also comes with another helpful function for filtering the Just/Nothing stuff out of a list!

Let's change this code to use List.filterMap String.toInt instead of List.map String.toInt:

import Html

main =
    puzzleInput                              -- String
        |> String.trim                       -- String
        |> String.split "\n\n"               -- List String
        |> List.map (String.split "\n")      -- List (List String)
        |> List.map (List.filterMap String.toInt)  -- List (List Int)
        |> Debug.toString
        |> Html.text

puzzleInput =
   ...

[[1000,2000,3000],[4000],[5000,6000],[7000,8000,9000],[10000]]

Thank goodness– the List.filterMap function took care of those weird Maybe values!

Adding up each elf's food

Finally, we have some numbers that we can do math with! 😌

Let's use another great built-in function called List.sum to add up all the numbers for each list:

import Html

main =
    puzzleInput                                   -- String
        |> String.trim                            -- String
        |> String.split "\n\n"                    -- List String
        |> List.map (String.split "\n")           -- List (List String)
        |> List.map (List.filterMap String.toInt) -- List (List Int)
        |> List.map List.sum                      -- List Int
        |> Debug.toString
        |> Html.text

puzzleInput =
   ...

[6000,4000,11000,24000,10000]

When we combine List.map and List.sum, we can sum up each item in our list.

That turned our nested List (List Int) back into a List Int.

So who's got the most food?

Now each item in the list has the total calorie counts for each elf, we only need one more function.

Let's use that function, List.maximum, which can find the biggest number in a list:

import Html

main =
    puzzleInput                                   -- String
        |> String.trim                            -- String
        |> String.split "\n\n"                    -- List String
        |> List.map (String.split "\n")           -- List (List String)
        |> List.map (List.filterMap String.toInt) -- List (List Int)
        |> List.map List.sum                      -- List Int
        |> List.maximum                         -- Maybe Int
        |> Debug.toString
        |> Html.text

puzzleInput =
   ...

Just 24000

You solved it!

That's it! That's the answer we were looking for all along.

Pat yourself on the back, you made it through some scary, new syntax.

As a final step, let's see if our code is flexible enough to solve a slightly the final challenge...

4. Reusing code for Part 2

The next part of the Advent of Code problem asks us to add up the top 3 elf calories, not just the top 1.

Let's rewind a bit by removing that last part with List.maximum, and having our program return the List Int we had before:

import Html

main =
    puzzleInput                                   -- String
        |> String.trim                            -- String
        |> String.split "\n\n"                    -- List String
        |> List.map (String.split "\n")           -- List (List String)
        |> List.map (List.filterMap String.toInt) -- List (List Int)
        |> List.map List.sum                      -- List Int
        |> Debug.toString
        |> Html.text

puzzleInput =
   ...

[6000,4000,11000,24000,10000]

We're back to what we had before– and don't need to deal with all the grouping and int conversion again.

Sorting lists

This is where we left off before calling List.maximum. It still has all the data we need, but we need to make sure to grab the 3 biggest numbers this time around.

We can group the big numbers together with the built-in List.sort function:

import Html

main =
    puzzleInput                                   -- String
        |> String.trim                            -- String
        |> String.split "\n\n"                    -- List String
        |> List.map (String.split "\n")           -- List (List String)
        |> List.map (List.filterMap String.toInt) -- List (List Int)
        |> List.map List.sum                      -- List Int
        |> List.sort                              -- List Int
        |> Debug.toString
        |> Html.text

puzzleInput =
   ...

[4000,6000,10000,11000,24000]

The List.sort function automatically sorts the numbers for us, from smallest to biggest.

Reversing our list

Elm lists have a function called List.take, but it only grabs the items in the front of the list. When we called List.sort, all the biggest numbers moved to the end.

Let's use List.reverse so that the biggest items are in front, instead:

import Html

main =
    puzzleInput                                   -- String
        |> String.trim                            -- String
        |> String.split "\n\n"                    -- List String
        |> List.map (String.split "\n")           -- List (List String)
        |> List.map (List.filterMap String.toInt) -- List (List Int)
        |> List.map List.sum                      -- List Int
        |> List.sort                              -- List Int
        |> List.reverse                           -- List Int
        |> Debug.toString
        |> Html.text

puzzleInput =
   ...

[24000,11000,10000,6000,4000]

The List.reverse function reversed the order of our list– and things are looking good!

Grabbing the first 3 items

Great! Now we have the three biggest numbers right in front

The only remaining step is to take the first 3 items with List.take:

import Html

main =
    puzzleInput                                   -- String
        |> String.trim                            -- String
        |> String.split "\n\n"                    -- List String
        |> List.map (String.split "\n")           -- List (List String)
        |> List.map (List.filterMap String.toInt) -- List (List Int)
        |> List.map List.sum                      -- List Int
        |> List.sort                              -- List Int
        |> List.reverse                           -- List Int
        |> List.take 3                            -- List Int
        |> Debug.toString
        |> Html.text

puzzleInput =
   ...

[24000,11000,10000]

The List.take function takes two arguments:

The amount of items we want to keep (3)
The full list we want to take from

Wait a minute... we know how to do this part!

Now we have the top 3 biggest numbers, so let's add them up!

Earlier, we used an Elm function for adding up all the numbers in a list.

Let's use the List.sum function one last time to get our answer:

import Html

main =
    puzzleInput                                   -- String
        |> String.trim                            -- String
        |> String.split "\n\n"                    -- List String
        |> List.map (String.split "\n")           -- List (List String)
        |> List.map (List.filterMap String.toInt) -- List (List Int)
        |> List.map List.sum                      -- List Int
        |> List.sort                              -- List Int
        |> List.reverse                           -- List Int
        |> List.take 3                            -- List Int
        |> List.sum                               -- Int
        |> Debug.toString
        |> Html.text

puzzleInput =
   ...

Hooray– you're an Elm developer!

Hopefully, you learned something new and feel super smart! Here's the final solution on Ellie

If you want to learn more here are some resources:

In each video, I'll walk through my thought process step-by-step. If you're like me, having someone talk things through is the easiest way to absorb new information.

Thanks for reading– and I hope you all have a wonderful December! 👋

The Simplest Function in JS

Ryan Haskell — Sun, 06 Sep 2020 20:09:52 +0000

The Problem

Hey there, folks! I've got a JS coding challenge for you:

Write a function called "getFruitColor" that has the following behavior:

If given "apple", it returns "red"
If given "banana", it returns "yellow"
If given anything else, return undefined

What's the simplest JS thing you can use to make that function? Let's take a look!

Approach 1: Using an `if` statement

When I was first learning about functions and logic, I heavily relied on the if statement. It's super flexible and easy to read!

function getFruitColor(fruit) {
  if (fruit === 'apple') {
    return 'red'
  } else if (fruit === 'banana') {
    return 'yellow'
  } else {
    return undefined
  }
}

Testing this code out, it works great!

getFruitColor('apple')    // "red"
getFruitColor('banana')   // "yellow"
getFruitColor('cherry')   // undefined

There's nothing wrong with the code here, but can we do better?

Approach 2: Using a `switch` statement

Whenever we are doing === repeatedly on the same value, maybe a switch statement could help out with some of the repetition:

function getFruitColor(fruit) {
  switch (fruit) {
    case 'apple': return 'red'
    case 'banana': return 'yellow'
    default: return undefined
  }
}

Amazing! Let's see if it still works:

getFruitColor('apple')    // "red"
getFruitColor('banana')   // "yellow"
getFruitColor('cherry')   // undefined

Looks like the behavior here is the same, and we saved a lot of noisy code.

The most important thing? We made it easy for a reader to see the mapping of inputs to outputs.

But can we do even better?

But first: A tangent about `undefined`!

If a function in JS doesn't return a value, it returns undefined. This means we didn't need this else case, or the default case in the code.

Sidenote: I like typing the explicit else and default, because it tells the reader that I've thought through the edgecases, instead of just forgetting to handle them.

TLDR; These two are shorter versions of the first two approaches:

// without the else
function getFruitColor(fruit) {
  if (fruit === 'apple') {
    return 'red'
  } else if (fruit === 'banana') {
    return 'yellow'
  }
}

// without the default
function getFruitColor(fruit) {
  switch (fruit) {
    case 'apple': return 'red'
    case 'banana': return 'yellow'
  }
}

Approach 3: Using an `object`

What's the simplest way to map one value to another? Use an object!

const getFruitColor = {
  apple: 'red',
  banana: 'yellow'
}

getFruitColor['apple']    // "red"
getFruitColor['banana']   // "yellow"
getFruitColor['cherry']   // undefined

We access objects with [] instead of (), but they have the same semantics as functions!

Extra Credit: Using Functions

We've seen this used above for returning values, but can it work with logic? Does it work with other things if and switch support like blocks of code?

You bet! Because JS lets you return functions as values, you can even route blocks of code this way!

With an if statement

function handleCommand(command, args) {
  if (command === 'greet') {
    const name = args[0]
    console.log('Hello ' + name + '!')
  } else if (command === 'compliment') {
    console.log('Looking good!')
  } else {
    console.log('Command not found')
  }
}

With an object

function handleCommand(command, args) {
  const handler = commands[command]

  return handler
    ? handler(args)
    : console.log('Command not found')
}

const commands = {
  greet: (args) => {
    const name = args[0]
    console.log('Hello ' + name + '!')
  },
  compliment: (args) => {
    console.log('Looking good!')
  }
}

That's it!

Remember, choose the code you think is the easiest to read and change. I wanted to share the object technique because it blew my mind when I learned about it!

Maybe next time you're writing a switch case, you'll think of me 😄

Have an awesome day!

Async Await: 60% of the time, it works every time

Ryan Haskell — Sat, 27 Apr 2019 20:39:24 +0000

All aboard the hype train.

Hot take: async await isn't great for everything.

When I saw people writing this:

const printF = async () => {
  try {
    const a = await getA()
    const b = await getB(a)
    const c = await getC(b)
    const d = await getD(c)
    const e = await getE(d)
    const f = await getF(e)
    console.log(f)
  } catch (err) {
    console.error(err)
  }
}

as a replacement for this:

const printF = () =>
  getA()
   .then(getB)
   .then(getC)
   .then(getD)
   .then(getE)
   .then(getF)
   .then(console.log)
   .catch(console.error)

I thought it was a big step in the wrong direction. It added a bunch of boilerplate for little benefit. I had try-catch for years, I didn't wanna go back!

I had some serious questions for my friends at work who were only using async await:

Do we really love async await, or are we just saying that because we saw it?

When to love lamp.

The example above was actually pretty atypical. It was just to point out that we don't need async/await for everything.

It's not always "more readable", it just looks more like synchronous code.

In reality, people don't pay me to printF. Instead, I build websites for a living, which is secretly just turning strings into other strings.

So when I get this string:

'https://www.<some-website>.com/people/ryan'

I turn it into this string:

<div>
  <h1>Ryan Haskell-Glatz</h1>
  <section>
    <h3>Posts</h3>
    <ul>
      <li>Elm is neat.</li>
      <li>Promises are neat.</li>
      <li>Saying neat is neat.</li>
    </ul>
  </section>
</div>

But sometimes my strings are in a database:

// MongoDB
{
  people: [
    { _id: 1, slug: 'ryan', name: 'Ryan Haskell-Glatz' },
    // ... more people
  ],
  posts: [
    { _id: 12, slug: 'elm-is-neat', title: 'Elm is neat.', author: 1 },
    { _id: 13, slug: 'promises-are-neat', title: 'Promises are neat.', author: 1 },
    { _id: 14, slug: 'saying-neat-is-neat', title: 'Saying neat is neat.', author: 1 },
    // ... more posts
  ]
}

So my Javascript functions look more like this:

const mongoose = require('mongoose')

const getPosts = (person) =>
  mongoose.model('posts')
    .find({ author: person })
    .select('title')
    .lean()
    .exec()

const getPerson = (slug) =>
  mongoose.model('people')
    .findOne({ slug })
    .select('name')
    .lean()
    .exec()
    .then(person => person || Promise.reject(`Couldn't find a person with slug: ${slug}`))

const getPeopleDetailPage = (req) =>
  getPerson(req.params.slug)
    .then(person =>
      getPosts(person)
        .then(posts => ({ person, posts }))
    )

Making things nicer

Both getPosts and getPerson are fine, async await wouldn't improve anything.

Notice how I nested my .then functions in getPeopleDetailPage? Kinda looks like that pointy triangle callback hell stuff.

The reason I nested things was because I needed access to both person and posts to return them back as an object.

Let's rewrite the last function:

const getPeopleDetailPage = async (req) => {
  const person = await getPerson(req.params.slug)
  const posts = await getPosts(person)

  return { person, posts }
}

Here, person and posts are both in scope, so I don't need to nest things.

Async await is great for functions that combine other promises together. It helps us keep things in scope so we don't have to forget ) and indent 47 times!

Maybe it is better than promises...

Upgrading things later

Let's say a new collection called "tags" shows up, and we want to include Ryan's tags on his detail page.

Here's the new database:

// MongoDB
{
  people: [
    { _id: 1, slug: 'ryan', name: 'Ryan Haskell-Glatz' },
    // ... more people
  ],
  posts: [
    { _id: 12, slug: 'elm-is-neat', title: 'Elm is neat.', author: 1 },
    { _id: 13, slug: 'promises-are-neat', title: 'Promises are neat.', author: 1 },
    { _id: 14, slug: 'saying-neat-is-neat', title: 'Saying neat is neat.', author: 1 },
    // ... more posts
  ],
  tags: [
    { _id: 25, name: 'js', people: [ 1 ] },
    { _id: 26, name: 'elm', people: [ 1, 2 ] },
    { _id: 27, name: 'web', people: [ 1, 5 ] },
    // ... more tags
  ]
}

And our new getTags function:

const getTags = (person) =>
  mongoose.model('tags')
    .find({ people: person })
    .select('name')
    .lean()
    .exec()

We can update our function with Promise.all to do some great stuff:

const getPeopleDetailPage = async (req) => {
  const person = await getPerson(req.params.slug)
  const [ posts, tags ] = await Promise.all([
    getPosts(person),
    getTags(person)
  ])

  return { person, posts, tags }
}

Using Promise.all will handle doing things in parallel, so we get the awesome performance and error handling benefits.

Handling Errors

Outside of this function, our users can decide how they want to handle errors.

If this was an API endpoint with ExpressJS, this is what that might look like:

const express = require('express')
const app = express()

app.get('/api/people/:slug', (req, res, next) =>
  getPeopleDetailPage(req)
    .then(data => res.json(data))
    .catch(err => next(err))
)

Notice I used async/await without try-catch, hooray!

That's it!

Hope you enjoyed reading, I'm glad I finally came around to using async await, and I wanted to share the benefit of using it.

It's not a silver bullet for everything, but it works great with Promises.

Async await: 60% of the time, it works every time.

Elm: the jerk that took away my for-loops.

Ryan Haskell — Mon, 01 Apr 2019 23:16:12 +0000

The good ole' days

The first time I ever coded was my junior year of high school.

The year was 2010, her name was Java.

System.out.println("Hello, Ryan!");

But let's pretend her name was Javascript:

console.log('Hello, Ryan!')

(Ah, less typing...)

Pretty soon, I found myself saying "hello" to all kinds of people.

console.log('Hello, Ryan!')
console.log('Hello, Scott!')
console.log('Hello, mom!')

Life was easy... until it wasn't.

Feeling stupid

My pal: "Ryan- what are you doing?"

Me: "I have no idea."

My pal: "You're supposed to use a for-loop for that."

Me: "wat."

My pal:

var names = [ 'Ryan', 'Scott', 'mom' ]

for (var i = 0; i < names.length; i++) {
  var name = names[i]
  console.log('Hello, ' + name + '!')
}

Me: "..."

Also me: "WAT."

My pal: "It's not too hard. Just make an array of strings, called "names". From there, we make a for-loop:

Say var i = 0; to start the index at zero.
We say i < names.length to tell the for loop when to stop looping.
Then type i++ so it increments after every time it's called.

The variable i will be 0, 1, and 2. You can use it to index into your array to get the name, and then use that name variable so you don't have to duplicate the repetitive 'Hello' part."

Me: "wat."

Feeling un-stupid

The first time I met the for-loop, I had a lot of questions:

"Indexing into an array?"
"They start counting at 0?"
"Why doesn't i++ get a semicolon?"

Copy-pasting console.log statements was easy! For loops introduced me to a lot of new concepts. After some practice, I became familiar with those concepts.

It wasn't so bad. In no time, I was using them everywhere!

Even better, I got to bring the for-loop with me everywhere I went: Java, C#, Javascript, C, C++.

For-loops were my life. And life was good!

...until I met Elm.

Feeling anti-stupid

Fast forward:

My name was still Ryan
I had a job in the city making websites.
I was a JS pro (or at least I could add two numbers)

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

But on a train ride home, I saw an inspirational tech talk by a guy named Evan.

He designed something to make web programming nicer for folks!

The year was 2016, and her name was Elm.

add a b = a + b

(Ah, less typing)

The syntax was definitely spooky. It didn't look anything like JS!

But neither did HTML or CSS- and I learned those!

Just like for-loops, it took at bit of practice.

So I followed the official guide, asked questions in the #beginners Slack channel, and even started putting my commas on the left side.

[ "who"
, "have"
, "I"
, "become??"
]

Crazy, right?

Next thing you know, this HTML template:

<!-- view.html -->
<div class="app">
  <p>Hello, Ryan!</p>
  <p>Hello, Scott!</p>
  <p>Hello, mom!</p>
</div>

Became this Elm function:

view =
    div [ class "app" ]
        [ p [] [ text "Hello, Ryan!" ]
        , p [] [ text "Hello, Scott!" ]
        , p [] [ text "Hello, mom!" ]
        ]

Haha, what a breeze!

Feeling re-stupid

Wait a minute... look at all that duplication!

I know- I'll grab my trusty for-loop!

Let's hit up the Elm docs to find the function I'm looking for:

My god... Evan forgot to implement for-loops.

What a rookie mistake.

So I hopped on the Slack, to find out what to do.

A friendly Elm stranger let me know that List.map was the function I was looking for.

Me: "wat."

A friendly Elm stranger:

names =
    [ "Ryan", "Scott", "mom" ]

viewParagraph name =
    p [] [ text ("Hello, " ++ name ++ "!") ]

view =
    div [] (List.map viewParagraph names)

Me: "wat."

A friendly Elm stranger: "lol, noob"

(Just kidding, I've never been called a noob on the Elm slack)

A friendly Elm stranger: "Let's break it down a bit.

List.map is just a function, like view or viewParagraph.

It takes in two inputs:

A function that turns "things" into "other things"
A list of "things".

If you give it those inputs, it'll return back a list of "other things".

List.map : (things -> otherThings) -> List things -> List otherThings

In your example, you had a list of "strings" you wanted to turn into a list of "HTML".

So your "things" are "Strings", and your "other things" are "HTML"!

List.map : (String -> Html msg) -> List String -> List (Html msg)

Just tell List.map how to turn a "string" into "HTML elements" (viewParagraph), and give it your list of "strings" (names).

You'll get back your list of "HTML", and that's what you can print to the page."

Me: "..."

Also me: "I'm scared."

Feeling un-re-stupid

After I got some practice with List.map, I started getting the hang of it.

Soon afterwards, I found out JavaScript has the map function too!

And it's been there for a long time!

function sayHello (name) {
  console.log('Hello, ' + name + '!')
}

[ 'Ryan', 'Scott', 'mom' ].map(sayHello)

Elm forced me to use their weird loop thing.

I felt tricked! But then I liked it better.

Now I only use for-loops in blog posts.

So thanks, Evan.

I'm glad you forgot the for-loop.

Also your talk was pretty dope.

Thanks for reading! ❤️

Elm: From beginner to be-winner

Ryan Haskell — Mon, 11 Mar 2019 06:01:59 +0000

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:

Some code in JavaScript.
The equivalent code in Elm.
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:

We don't need commas or parentheses for inputs, we can use spaces to separate arguments.
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 =!
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! 🥰

Forem: Ryan Haskell

Elm for React developers

Hi there! 👋

Table of contents

Components

Displaying data

Conditional rendering

Rendering lists

Responding to events

Sharing data between components

That's all I've got!

Learn functional programming with Advent of Code! ☃️

Hello, there! 👋

In this article

1. Let's help some elves!

But there are more elves!

What do we need to do?

2. Printing stuff on the screen

Can we print more than "Hello!"?

Calling functions step-by-step with pipes

3. Our first Elm program

Trimming extra white-space

Splitting food up for each elf

Making lists of food for each elf

We can't add up text!

What the heck is "Just"?

Adding up each elf's food

So who's got the most food?

You solved it!

4. Reusing code for Part 2

Sorting lists

Reversing our list

Grabbing the first 3 items

Wait a minute... we know how to do this part!

Hooray– you're an Elm developer!

The Simplest Function in JS

The Problem

Approach 1: Using an if statement

Approach 2: Using a switch statement

But first: A tangent about undefined!

Approach 3: Using an object

Extra Credit: Using Functions

That's it!

Async Await: 60% of the time, it works every time

All aboard the hype train.

When to love lamp.

Making things nicer

Upgrading things later

Handling Errors

That's it!

Elm: the jerk that took away my for-loops.

The good ole' days

Feeling stupid

Feeling un-stupid

Feeling anti-stupid

Feeling re-stupid

Feeling un-re-stupid

So thanks, Evan.

Elm: From beginner to be-winner

hey there! 👋

dat syntax tho 😯

Strings 😀

Numbers 😁

Booleans 🙂

Variables 🤔

Lists 😃

Objects 🤔

Functions 😐

still interested? 🙄

Approach 1: Using an `if` statement

Approach 2: Using a `switch` statement

But first: A tangent about `undefined`!

Approach 3: Using an `object`