Promising Design Patterns

I talked to someone this evening about what I know and what I don’t know as far as web dev, React, JavaScript, and the like.

And I had to admit a couple of things, right then and there:

1. I only have a vague sense of what promises are (in JavaScript! in life, I’m good at keeping them).
2. I can visualize what algorithms and design patterns are, but I have no idea if I know any of them offhand.

So I figured: why not learn something tonight?

And then I can post it! Bonus!

Promises

The thing that I knew, in the moment (probably due to the name? It’s right there on the tin): promises are a way to deal with asynchronicity.

In plain english: Once this other thing is done, then do this thing.

In fact, it literally uses then to make the promise. What could be more readable?

This isn’t the only way to do this (see also: callbacks), but it does remove some complexity, in favor of more readable code.

On that linked example, I feel like the “single-use guarantee” portion is super important:

A promise only ever has one of three states at any given time:

• pending
• fulfilled (resolved)
• rejected (error)

A pending promise can only ever lead to either a fulfilled state or a rejected state once and only once, which can avoid some pretty complex error scenarios.

For the next post in that linked tutorial the author shows how to use promises in order to implement the fetch() api. It makes so much sense, and is so readable:

fetch(this.getApiUrl())
  .then(resp => resp.json())
  .then(resp => {
    const currentTime = resp.dateString;
    this.setState({currentTime})
  })

Even for someone who’s new to Promises, this makes so much sense. Give me the response, turn it into JSON, and use it to set the current time.

Woop! We just learned about promises.

As far as algorithms and design patterns? Those are less of a quick study. I did, however, find a pretty good React-oriented design patters site here:

React Patterns

I even saw some that I use all the time, like the spread operator in JSX and Style Components, or have learned about already, like Event Switches. Some of this feels like “unknown knowns,” as it were.

I’ve definitely got some more resources to add the list now — I’m glad I had this convo today, and took the opportunity to learn a bit more. Bit by bit, bird by bird. That’s all we can do!