Introduction

Insert another intro about functional programming…

Composition

Composition is about creating small functions and creating bigger and more complete functions with them. Think of a function as a brick, composition is how you would make those bricks work together to build a wall or a house.

You might have encoutered composition in mathematics, written like so: f(g(x)). The function f is composed with the function g of x. Or f after g equals f of g of x. After because we evaluate the functions from right to left, from the inside to the outside:

f <-- g <-- x

The output of the precedent function becomes the input of the next. x is the input of g. The output of g(x) becomes the f input.

Examples?

Ok, let’s code something then. Imagine that you are a company that is in charge of manipulating text. You receive a bunch of words, and your customers want it back in a certain way.

A client comes at you with a text and says:

I want the words shorter than 5 characters to be uppercased.

We create three functions to execute those actions. One function takes the text and return words in lowercase. The second function look for short words and upperCase them. Finally, the third recreates the text from the array received.

function words( text ){
  return String( text )
    .toLowerCase()
    .split(/\s/)
}

function shortUpper( words ){
  return words.map( word => {
    if( word.length < 5 ){
      return word.toUpperCase()
    } else {
      return word
    }
  })
}

function createText( array ){
  return array.join(' ')
}

The client sends in the text and we make our functions work:

const text = 'Hello! My name is Damien and I love Javascript. Make this exciting.'

const allWords = words(text)
const upperText = shortUpper( allWords )
const newText = createText( upperText )

//hello! MY NAME IS damien AND I LOVE javascript. MAKE THIS exciting.

Great! The client got what he wanted. The problem is: our workers have to manually take the output of the words and shortUpper functions, carry them to the next function, and turn on the function’s engine on. That’s a lot of work, can we automate this?

Cue dramatic music

Enter composition

We want the function’s outputs to be sent to the next function without having to do it ourselves. Like so:

const newText = createText( shortUpper( words( text ) ) )

//hello! MY NAME IS damien AND I LOVE javascript. MAKE THIS exciting.

We read this from left to right, but, as I mentioned earlier, we execute from the inside to the outside:

createText <-- shortUpper <-- words <-- text

We even decide to create a function for this popular demand:

function upperLessThan5( text ){
  return createText( shortUpper( words( text) ) )
}

upperLessThan5( text )
//hello! MY NAME IS damien AND I LOVE javascript. MAKE THIS exciting.

Our company has another popular demand: replacing ‘.’ by ‘!!!’ while making the first character of each word uppercase. We have some functions to handle that:

function exclamationMarks( words ){
  return words.map( word => word.replace('.', '!!!'))
}

function upperFirstChar( words ){
  return words.map( word => {
    return `${word[0].toUpperCase()}${word.substr(1)}`
  })
}

function firstCharUpperExclamation( text ){
  return createText( exclamationMarks( upperFirstChar( words( text ) ) ) )
}

firstCharUpperExclamation( text )
//Hello! My Name Is Damien And I Love Javascript!!! Make This Exciting!!!

Cool, we’re able to compose functions by combining several smaller functions!

Going nuts!

The company’s CEO couldn’t be happier. The factory transforms text very fast thanks to composing. But he wants more!

What if we had a function that took all the functions as inputs and just made composition happened by itself? We could call it compose.

The engineers gather up and brainstorm. They decide to experiment with the two products they already have. They come up with this:

function composeThreeFunctions(fn3, fn2, fn1){
  return function composed( firstValue ){
    return fn3( fn2( fn1( firstValue ) ) )
  }
}

function composeFourFunctions(fn4, fn3, fn2, fn1){
  return function composed( firstValue ){
    return fn4( fn3( fn2( fn1( firstValue ) ) ) )
  }
}

const upperLessThan5 = composeThreeFunctions( createText, shortUpper, words )
upperLessThan5( text )

//hello! MY NAME IS damien AND I LOVE javascript. MAKE THIS exciting.

const exclamationFirstCharUpper = composeFourFunctions( createText, upperFirstChar, exclamationMarks, words)

exclamationFirstCharUpper( text )

//Hello! My Name Is Damien And I Love Javascript!!! Make This Exciting!!!

Our functions takes all the functions needed as parameters. It returns a function that takes the original value as parameters and return all the functions composed in the proper order. Be careful about the order! We execute from the inside to the outside. The last function you specified will be the first executed. How do the function remembers all the functions from the original function? Closure baby!

Now, we can compose whatever we want with three or four functions. But the CEO wants something generic.

What if we need to compose only two functions? or five? ten? I don’t want an infinite amount of functions sitting in my factory. Can you create one function that just take an arbitrary number of functions and compose?

Finally, the engineers come up with the compose function:

function compose( ...fns ){
  return function composed( value ) {
    let listOfFunctions = fns.slice()
    while( listOfFunctions.length > 0 ){
      value = listOfFunctions.pop()( value )
    }

    return value
  }
}

const upperLessThan5 = compose( createText, shortUpper, words )
upperLessThan5( text )

//hello! MY NAME IS damien AND I LOVE javascript. MAKE THIS exciting.

const exclamationFirstCharUpper = compose( createText, upperFirstChar, exclamationMarks, words )
exclamationFirstCharUpper( text )

//Hello! My Name Is Damien And I Love Javascript!!! Make This Exciting!!!

The compose function takes a list of functions as a parameter. We use the rest operator (…) to gather that as an array. We return a function with the original value as parameter. Inside of this function, we create a local copy of the functions array ( how? CLOSUUUUUURE ). Then we call the last function of the array with the output of the last function. pop() returns the last element of the array and remove it from the array. The output of the last listOfFunctions element becomes the input of the next one. When our array is empty, we return the final value.

I mean, this is just amazing. Now we can go absolutely crazy.

Moar examples!!!

I’m just playing around now. But the sky is the limit.

const upperLessThan5Exclamation = compose( createText, shortUpper, exclamationMarks, words )
// OOOOOORRRR
const exclamationUpperLessThan5 = compose( createText, exclamationMarks, shortUpper, words )

// Same thing, different order

upperLessThan5Exclamation( text )
exclamationUpperLessThan5( text )
//hello! MY NAME IS damien AND I LOVE javascript!!! MAKE THIS exciting!!!
//hello! MY NAME IS damien AND I LOVE javascript!!! MAKE THIS exciting!!!

function replaceAbyE( words ){
  return words.map( word => {
    return word.replace(/a/gi, 'e')
  })
}

function replaceJavascriptWithPython( words ){
  return words.map( word => {
    if( word == /javascript/i ){
      return 'Python'
    } else {
      return word
    }
  })
}

const everything = compose( createText, shortUpper, exclamationMarks, upperFirstChar, replaceAbyE, replaceJavascriptWithPython, words )

everything( text )
//Hello! MY NEME IS Demien END I LOVE Python MEKE THIS Exciting!!!

Well, I’ll stop there. I want to see how librairies like Ramda implement composition, but this is really a fun way to write code.

Read more

Curry

Introduction

Well, time to teach myself something I don’t understand again…
In this article, we will explore a technique called currying. Currying is another concept in functional programming. It goes as follow: when a function expects several arguments, we break it down into successive chained functions that each take a single argument.

We reduce the arity of each function to one ( arity is the arguments length of a function ). Let’s see some examples.
Continue reading Explaining currying to myself

Read more

What I worked on

It has been more difficult to find the time this week. I managed to squeeze in a few hours this week-end. So, the catalog is starting to take form. The game’s cards are classified by classes and sorted by mana cost. I added previous/next buttons to switch pages ( 14 cards are displayed on each page ). I had a little challenge when I had to switch from one character to the next. When you click next and the current character has no more cards, the application switch to the next character and displays its cards. Took me some time to figure out though.

I mostly worked on the HomePage this week-end. I styled the navigation bar slightly, and I added buttons for the Add new game and Create new deck actions. The new game action opens a modal where the user can choose 4 things:

  • its class
  • its opponent’s class
  • its deck
  • the outcome of the deck

The modal is done and the front-end logic is handled.

Next week goals and code

For this week, I will try to finish the new game functionality by inserting them in a database and listing them on the front-end. I think the future statistics page will display a list of the latest games saved. Then, I will start the creation of the new deck functionality. This might take a while. Not quite sure how a want to do it yet. I think I will add an action on each card in the catalog to allow the user to add the card to a deck.

The code can be found here

Read more

Introduction

I write because it helps me retain informations. Whatever subject I’m studying I force myself to put it into words, like I’m teaching someone else. My main purpose is not to teach others though, but to teach myself. We always think we understand something, until we have to explain it. Those who know, do, those who teach, do it better. I’ll try to teach myself closures in this article.
Continue reading Explaining Closures to myself

Read more

Every week, I write a blog post about my progress on side projects. I explained my thought process in this article last week. I also detailed the first project that I wanted to work on for this month.

Week One

The stack choice

For the front-end, I went with React and create-react-app. It greatly reduces the headache of getting everything set up. For the back-end, I chose express. For this project, this is more than enough to do what I want. I’ll also use MongoDB for the database and I decided to use semantic-ui for the UI framework. I used material-ui before, so I went with a different one.

Setting things up

There are two different parts in this project. The root of the project takes care of the server side ( express + mongodb ). Inside this root folder, a /client folder holds the front-end that was set up thanks to create-react-app.

The first difficulty that I had was to connect both parts. How do I inform the front-end and back-end to listen to each other with the create-react-app setup?

Thankfully, the documentation links to a tutorial that explains how to make create-react-app works with an API. Right here if you’re curious. The front-end and back-end are run concurrently thanks to the npm package named concurrently ( convenient ).

And after that, I could start writing my code.

Hearthstone API

To get all the informations about the game’s cards, I found an API at this url. Well documented, easy to use, and I have all the informations I needed.

React Router

This one made me sweat a bit more. I wasn’t aware a new version of React Router was released. It took me some time to understand how the new one worked. ( BrowserRouter and Switch ).

Starting to see some results

I started with the cards’s catalog. I had to figure out the call to make to get the cards I needed ( hint: collectible=1 ). After that, I filter the cards by classes and sets in the front-end. Hearthstone has a “standard” mode where only the most recent cards sets are used.

The catalog functionality will ressemble the one in the actual game. The user should be able to sort them by name, mana cost, cards set and classes…

Code and next week’s goals

Here is the code on Github

For next week, I will try to finish the catalog functionality with all the sorting and filters. If that is done, I’ll start adding some deck actions ( deck creation, adding cards to deck from catalog … )

See you next week!

Read more

Why?

Whatever craft we are pursuing, we all need to build something to gain experience and mastery. Obviously, software development doesn’t escape this reality. Theory is important but using the knowledge in actual projects and solving problems enhance our comprehension of the subject.

Side projects always seemed amazing to me. Building something during my free time to solve a problem I have, or a problem others may have is a big reason why I started to code. The more I learn about programming, the more I realise its powers.

Like many developers, I started a lot of side projects. Every time, the pattern was the same. I was excited for a few days, perhaps a week. Then, I started to encounter more difficult problems, or I realised the project would take a very look time or life happened and I stopped working on it for a few days…

My Github account is a graveyard of potential projects that I just couldn’t bring to life. Not mature, fully developed, married with two kids in a big mansion kind of life. A gigantic proportion of these projects didn’t even go past the embryon stage. Every mistake is a lesson. Which brings me to this post.

A possible solution

One of the problems was that I did my thing alone. Nobody knew about it. And I totally dismissed the power of accountability. You will know about it. I’ll show you my progress, every week. I’ll just need enough discipline to write a blog post about it once a week, during the week-end. I’ll mention the problems I faced, solutions I chose, and how I managed ( or not ) to spend time on the side project I am working on.

My rules

A lot of people came up with similar “frameworks” for learning and side projects. Here are the rules that I chose. These are totally arbitrary:

  • Choose a project. No languages, libraries or frameworks restrictions.
  • Spend one month on this project
  • Just build a MVP ( Minimum Viable Product ). Don’t get drown into details. Get the big picture
  • Code will be on GitHub. Every blog post will link to the repository.
  • After a month, deploy the application, whatever the state is. From there, either choose to keep working on it for another month, or switch to a new project
  • If the project is over before a month, start a new month with a new project
  • Report your progress, problems and failures each week in a blog post

One month seems to be long enough with the time I have to create something decent. One week would be too short. If the project is going well and I’m enjoying it, I could spend another month on it, keeping the same rules, but updating the requirements of the project. Reporting my progress will probably help putting things in order, and not going in several directions at once.

First Side Project

For the first project, I chose to do an application related to the Blizzard video game HearthStone. Players build decks with cards based on the Warcraft world. The application should allow players to track their records and their progress with their different decks:

  • Users can access a catalog with all the cards and build decks.
  • Users can export their decks to the game.
  • Users can add the outcome of their games.
  • Users can see how their decks perform against other classes.
  • Users can login with Twitter or GitHub.

That should be more than enough to get me started.Let me know what you think and I’ll see you in a week!

Read more