DEV Community: Emi Castellano

JavaScript - Strategy pattern 🧠

Emi Castellano — Tue, 07 Sep 2021 18:46:54 +0000

Do you want to avoid writing multiple if/else if or switch statement with a bunch of cases inside?

The strategy pattern can help us with that.

Imagine we have a use case where the user can sign up using different methods:

Google Auth
Facebook Auth
Form submission

We want to avoid this:

const AUTH_METHODS = {
  GOOGLE: 'GOOGLE',
  FACEBOOK: 'FACEBOOK',
  FORM_SUBMISSION: 'FORM_SUBMISSION'
}

const googleAuth = _ => {
  // ... Google auth code here
}

const facebookAuth = _ => {
  // ... Facebook Auth code here
}

const formSubmissionAuth = _ => {
  // ... Form submission code here
}

const handleAuthentication = method => {
  if (method === AUTH_METHODS.GOOGLE) {
    googleAuth()
  } else if (method === AUTH_METHODS.FACEBOOK) {
    facebookAuth()
  } else {
    formSubmissionAuth()
  }
}

How can we improve this using the strategy pattern?

const AUTH_METHODS = {
  GOOGLE: 'GOOGLE',
  FACEBOOK: 'FACEBOOK',
  FORM_SUBMISSION: 'FORM_SUBMISSION'
}

const googleAuth = _ => {
  // ... Google auth code here
}

const facebookAuth = _ => {
  // ... Facebook Auth code here
}

const formSubmissionAuth = _ => {
  // ... Form submission code here
}

const authenticationStrategy = method => ({
  [AUTH_METHODS.GOOGLE]: googleAuth,
  [AUTH_METHODS.FACEBOOK]: facebookAuth,
  [AUTH_METHODS.FORM_SUBMISSION]: formSubmissionAuth
})[method]

const strategy = authenticationStrategy(AUTH_METHODS.GOOGLE)
strategy()

And if we want to pass parameters to some of the strategy functions, we can do it like this:

const authenticationStrategy = method => ({
  [AUTH_METHODS.GOOGLE]: googleAuth,
  [AUTH_METHODS.FACEBOOK]: facebookAuth,
  [AUTH_METHODS.FORM_SUBMISSION]: () => formSubmissionAuth({ username: 'javascript', password: 'strategyPattern' })
})[method]

The strategy pattern, returns an object with key/value pair and what determines which key is the one to be "executed" is the [method] at the end, this is the dependency of our function, whatever value we pass there it will be mapped to the corresponding object key.

Let's talk about seniority. 🤓

Emi Castellano — Fri, 28 Jun 2019 17:55:25 +0000

What is "seniority" for you?

Do you think that is a good way to categorize people knowledge/experience/etc?

Which levels of seniority do you agree with?

How important is seniority for you?

What are the main differences between a junior dev and a senior dev?

Hi FlexBox, nice to meet you 🙂

Emi Castellano — Thu, 13 Jun 2019 01:15:29 +0000

What is FlexBox? 🤔

This tool provides an efficient way to lay out, align and distribute space among items in a container, even when we don't know each element size.

Browser compatibility ✔

Nowadays, flexbox is supported by all modern browsers.

Concepts 💡

Consider the following image as a reference for the next concepts:

display
This property defines a flex container, so all container's children will have a flex context.

.container {
  display: flex;
}

flex-direction
Using this property we set the main-axis. Flexbox is single-direction, so we can show our items in horizontal rows or vertical columns.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

order
With Flexbox we can change the order of each item inside the container, using order attribute. By default, we'll see the same order displayed on our HTML.

.container {
  display: flex;
}
.item {
  order: <integer>;
}

flex-grow
This attribute defines what amount of the available space inside our container the item should take. It's useful when we want to let an item grow if necessary.

.item {
  flex-grow: <number>; /* Default 0 */
}

flex-wrap
Flexbox will always try to show all the items in one line. To prevent this, if necessary, we can use flex-wrap attribute.

nowrap - default value. Items in one line.
wrap - multiple lines from top to bottom.
wrap-reverse - multiple lines from bottom to top.

.container {
   flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-shrink
This attribute defines the ability for an item to shrink.

.item {
   flex-shrink: <number>; /* Default 1 */
}

flex
Using this property we can avoid using flex-grow, flex-shrink and flex-basis. The second parameter is flex-shrink, the third parameter is flex-basis. Default 0 1 auto.

.item{
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}

justify-content
With this attribute, we define the container's children alignment along the main axis.

flex-start - default value. Items aligned to the left.
flex-end - items aligned to the right.
center - items centered
space-between - items evenly distributed in the line. First item on the left, last item on the right.
space-around - items evenly distributed with equal space around them.
space-evenly - equal space between two items.

.container {
   justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

align-items
Define how our items will behave on the opposite axis to the main axis. (It's always perpendicular)

flex-end - cross-end margin edge of the items is placed on the cross-end line
flex-start - cross-start margin edge of the items is placed on the cross-start line
stretch - default - fill the container considering min-width/max-width
center - items centered
baseline - items aligned based on their baselines align

.container {
   align-items: stretch | flex-start | flex-end | center | baseline;
}

align-self
Using this attribute we can override the default alignment for a specific item.

.item {
   align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

align-content
We can use this attribute to align container's lines within when there is extra space in the cross-axis.

Pro tip: use this attribute only when there is more than one line of items inside your container.

stretch - default - the content will take up the remaining space
flex-start - lines aligned to the start of the container
flex-end - lines aligned to the end of the container
center - lines aligned to the center
space-between - lines evenly distributed, first line is at the start and last line is at the end of the container
space-around - lines evenly distributed with equal space around them

.container {
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Playground 👨‍💻

Are you curious? Give it a try, play with it.

Thanks 🙌

Hope this article helps you. Feel free to contact me if you have any question.