Forem: Tom Hoadley

Redux Basics and How To Visualise It

Tom Hoadley — Fri, 03 Apr 2020 16:49:55 +0000

Redux is a state management tool which helps us manage data for our applications. It exists in a strange space between the front and back end of an application which often confuses beginners about its role in an application. To clarify, let's look at an example example use case.

A back end developer has implemented a REST API which opens up the applications database for use on the front end. An example of the REST API may be the WordPress API, Netlify or Mongo DB. The front end developer will then use Redux to pull this data into the front end of the application. The front end developer will likely utilise a user interface library such as React which they connect to Redux to create an automatically updating User Interface.

Considering redux is just plain JavaScript, it is possible that the backend developer could use Redux to store data in the database but there are much better methods for the back end of the application so I would advise you just think of Redux as a front end library.

It's also worth noting that Redux isn't always necessary, whereby if an application has a simple data structure, the React state management, such as the Context API, or just passing it down through props, is often enough.

Having provided some context to where Redux sits in the web development let's look at it in more detail.

Redux is a surprisingly small library, and at it’s most basic it can be written in 97 lines of code. Take a look at this code written by Dan Abramov, the creator of Redux – Redux Simplified. As you can see there isn’t too much off it. Of course you aren’t expected to be able to understand it from looking at that, but you should take confidence that the concepts, when boiled down are relatively simple.

Before reading this article, I would advise that you should have a good understanding of JavaScript and also of functional programming. If you don’t understand functional programming, I would recommend reading my two part series on it – Functional Programming Part 1. Redux is based on the concepts of functional programming and it will help you follow along.

Put simply, Redux is a JavaScript library, which manages the state (aka data) of our application. It is a library that has evolved over years of research into how best to manage large, complicated state. It allows us to add, edit and remove state in a logical, scalable and secure way. Within this library there are a few key concepts we should understand.

Store
State
Action Creators
Reducers

Before explaining each of them, read the below metaphor which I use to understand what is happening. As you work through the list, it will help build an image in your mind of what is going on.

Imagine you have a large amount of money and want to deposit it in your bank. You have a briefcase which has £100,000 in cash and a slip of paper in it that says, “Deposit this money”. You go into the bank and give the teller at the desk the briefcase. The teller opens the briefcase, read’s slip of paper and picks up the cash. They then walk to the bank vault and store your money inside. The bank teller returns to update you that your money had been stored. Having completed what you need you leave the bank!

Now we have that image in mind, let's walk through each of the above and see if you can make a connection between it and each of the concepts.

Store

The place where we ‘store’ all of our applications data (aka state). It provides as a ‘single source of truth’ of our applications data. It is stored in a single JavaScript object. Pretty simple right? It’s worth noting that this would then be stored in a database, e.g.

State

State is our applications data. It’s all the information we include in our application, e.g. users, emails, names, books, book titles, authors etc. Also pretty simple!

Action creators

Things start to become ever so slightly more nuanced here. When learning about redux you will often learn about just ‘actions’ and not ‘action creators’. In my opinion, this abstraction doesn’t reflect the internals of Redux and ends up confusing beginners. As such, I have jumped straight to explaining ‘action creators’. An ‘action creator’ function returns an object (the action). The action has two properties, the type (aka name of the action aka ADD_TODO) and the data (aka the new state aka ‘Go to the shops’). If needed, we pass our new state, into our action creator function, often referred to as the payload. Let’s introduce our first bit of code as I feel it will help clarify things. In this instance, the type is ADD_TODO and the payload will be the todo text. You will then notice to call our action we dispatch it too the store. Our store listens out for these dispatches and forwards them to our reducer. Our reducer is what will handle the logic of our application.

    // Our action creator. We can see it is returning an object which has two values, the type and the data.

    function addTodo(text) {
      return {
        type: ADD_TODO,
        text
      }
    }

    // Dispatch is a redux function.
    dispatch(addTodo('Buy some eggs'))

    // It's worth noting that you can pass an action directly into dispatch e.g. the below but the above pattern is more applicable in real world applications.

Reducers

Reducers specify how the applications state changes in response to our action we have sent. Every time an action is dispatched, it runs through our reducer function which tests the type of action, and then and then runs the relevant code. Redux requires reducers should be pure functions. This was covered in my functional programming series mentioned above but essentially means they should not edit the existing state, they instead should return a new state with the new changes. This is commonly achieved using the JavaScript spread operator. This rule of enforcing immutability is part of what makes Redux so useful, in that it provides tools such as easy undo / redo, time travelling to find old versions of your applications and more.

Take a look at the below reducer. Note the switch statement which allow us to add multiple tests for different types of actions, e.g. we could also add an UPDATE_TODO underneath other ADD_TODO reducer.

    function todos(state = [], action) {
      switch (action.type) {
        case 'ADD_TODO':
          return [
            ...state,
            {
              text: action.text
            }
          ]
        default:
          return state
      }
    }

To use our reducer, we would then have to pass it into our store, which we can do using the following code. This will mean that anytime a ‘dispatch’ event is made, our store will run it through our reducers, thus updating our state!

    const store = createStore(todos)

A visual guide for redux revisited

Let’s revisit our initial bank metaphor we used to understand Redux. If you hadn’t already guessed which was which, please take a look at the below.

Ourselves / user input
- We need to deposit our cash into a bank so we put it in a briefcase, with instructions what to do and our cash. In a Redux application, the user input might be a button click to ‘deposit money’.
Briefcase / action creator
- The briefcase contained a paper slip which is our action type, and our the cash which is our payload. We then dispatched our briefcase to our bank teller.
Bank teller / reducer.
- The person that took the briefcase and decided what to do with it aka put it in the bank vault.
Bank vault / store
- The place where we store everything.

Let’s try and reinforce this metaphor with an actual image. Notice that the action creator goes into the store first. That’s because it’s our store that is listening which then passes it into the router. This link isn’t displayed perfectly by the bank metaphor, but it’s not a big leap in your imagination to understand it.

Conclusion

As you can see, the general concepts of Redux aren’t overly complicated, but there are a few small nuances that may trip you up the first time around. As such, it helps to have a good visual image of Redux. For more on the topic, including how Redux connects with React please follow me on social media using the links below!

Make sure to follow me on twitter or dev.to for more tutorials to help with your journey into software engineering.

Test Driven Development in JavaScript, Unit Testing

Tom Hoadley — Thu, 02 Apr 2020 18:27:32 +0000

Put simply, test driven development is writing tests for your production code, before you’ve actually written your production code. For example, if we were writing a function to convert inches to centimetres, we would write a test that calls our function first and then we write the function to past those tests. Thinking in this order helps clarify our intentions and helps write more robust, maintainable, bug free code. There are many other advantages and also a few disadvantages.

Advantages of TDD

Ensures quality software
Forces us to clarify our thoughts
Improves communication between developers
Improves the structure of our code. It helps promotes more loosely (coupled aka modular aka functional) code.
Allows developers to make changes without worrying – the test with flag breaks you make.

Disadvantages of TDD

Takes longer. This isn’t really a valid disadvantages as it will save time in the long run.
Management aren’t always happy with taking longer to right code.
It’s possible to write bad tests, which can create a false sense of security.

Clearly the advantages outweigh the disadvantages and that we should be using TDD, lets summarise the criteria of a good test.

Criteria of a good test.

Readable – Make it clear what your code is supposed to do.
Isolated – Ensure our tests are isolated.
Thorough – Test for edge case inputs as well.
Explicit – All the information is made readily available to test.

The tests

There are three levels of test driven development.

Unit tests – the most common tests. Low level, specific tests for individual bits of functionality
Integration tests – ensures these individual pieces work together correctly. e.g. make sure app can talk to API.
End to end tests – ensures the app works from the perspective of the user, e.g. you are testing the user experience.

This article focuses solely on unit tests but it’s worth knowing that their are testing patterns for the more complex functions of our application. There are a number of JavaScript libraries that can help with TDD and they cover one or more of the following areas.

A testing environment / test runner
A testing framework
An assertion library

Mocha JS covers the first two on the list, Chai covers the last. Jasmine and Jest on the other hand cover all three. This article will use the popular Chai as our assertion library.

Process of writing a test

In order to write a test we should follow a three step process and continue this process all the way un till we have a full piece of software.

Write a failing test – forces us to define the functionality we want to add and avoid false positives.
Write production code to make the test pass – write just enough code to make the test we just wrote pass.
Refactor the code – Once we have our production code passing, we can refactor.

Writing a test

Before starting make sure to pull down the code from my GitHub repo via the link below. Once you have pulled the code open the folder up in a terminal and run _npm intall. _This will install node_modules for you to run the code.

ThomasHoadley / test-driven-development

JavaScript implementation of TDD using Mochai and Chai for use on tutorial blog.

For the sake of this lesson we are writing a function that counts the amount of each letters in a string called getLetterCount(). If we pass the function the string ‘cat’, we would expect a returned object of {c:1, a:1 , t:1} and if we passed it the string ‘better’ we would expect {b:1, e:2, t:2, r: 1}. Lets start by writing our first test.

    import { expect } from 'chai'
    import { getLetterCount } from './letter-count.js'

    // describe the test test is for.
    describe('getLetterCount - basic functionality', () => {
        // test for empty strings
        it('returns an empty object when passed an empty string', () => {
            const expected = {}
            const actual = getLetterCount('')
            // we use .deep because it's an object which 
            expect(actual).to.deep.equal(expected)
        })
    })

As you can we have described our initial test, using a chai function, describe(), where the first parameter is a description of the test and the second is a function which is where we add the list of tests we need it to pass.

The first test is to check it returns an empty object, when passed an empty string. We start by writing our expected and actual results, and then use chai to compare these two. It is written in plain English as to make it more legible. We can see we are expecting our array, to equal our given expected value. Note we have to use deep because we’re passing in an object and not a string.

We then want to go ahead and create the actual function in our letter-count.js file where it takes a string, splits it into an array and then we reduce it too a new object with the letter count. Notice that in the below code we are simply returning false, in order to give us a failing test the first time around.

    export const getLetterCount = string => {
     return false;
    }

From there, we can run npm run test in our console to test to see that our test fails. This helps us avoid false positives. Now lets refactor the function to make it do what we want to see if we can get it to return a passed test.

    export const getLetterCount = string => {
        // use split in our function to 
        const letters = string.split('')

        // reduce our letters array to a new object
        const letterCount = letters.reduce((newObject, letter) => {
            newObject[letter] = (newObject[letter] + 1) || 1
            return newObject
        }, {})

        return letterCount
    }

When running it we will see that is does indeed return an empty object when we pass it an empty string and our test has passed.

Lets add a couple more of these test whereby we want to check the robustness of it in the case of a more complex string is added. Let’s check if the string cat, returns {c:1, a:1 , t:1} and better returns {b:1, e:2, t:2, r: 1}.

    import { expect } from 'chai'
    import { getLetterCount } from './letter-count.js'

    // describe the test test is for.
    describe('getLetterCount - basic functionality', () => {
        // test for empty strings
        it('returns an empty object when passed an empty string', () => {
            const expected = {}
            const actual = getLetterCount('')
            // we use .deep because it's an object which 
            expect(actual).to.deep.equal(expected)
        })

        // test for a simple string
        it('return the correct letter count for a word with only one of each letter', () => {
            const expected = { c: 1, a: 1, t: 1 }
            const actual = getLetterCount('cat')
            expect(actual).to.deep.equal(expected)
        })

        // test for a more complex string
        it('return the correct letter count for a word with multiple of each letter', () => {
            const expected = { b: 1, e: 2, t: 2, r: 1 }
            const actual = getLetterCount('better')
            expect(actual).to.deep.equal(expected)
        })
    })

Both times are test has passed, which means our function is robust and we can be confident that our new function will be suitable for production ready code.

Conclusion

Unit testing is a great way to ensure you think about the code you are writing and clarify exactly what you need to achieve. It means you can be confident that bugs are ironed out sooner rather than later, saving a lot of time and money in the long run. Generally speaking any successful software company will have these principles at its core and so if you are looking to become a senior developer you will need to know these well. Good luck testing!

Write Your Own Reduce Function JavaScript

Tom Hoadley — Wed, 01 Apr 2020 14:34:56 +0000

The JS reduce function is a powerful utility in any developers tool belt and as such it’s crucial to have a good understanding of it. To get an understanding, there is no better way than to build your own.

Imagine we want to get the sum of an array of numbers. Using the native reduce function we would write the following.

    // native reduce function

    const numbers = [1,2,3]

    const sumReducer = (initialValue, current) => initialValue + current;

    const sumOfNumbersNative = numbers.reduce(sumReducer, 0)

    console.log('Native reduce function, ' + sumOfNumbersNative)

    // Native reduce function, 6

As you can see, the reduce function takes two arguments, firstly a callback, and secondly the initial value (a number, or an object for example). The callback is your ‘reducer’, which takes 4 arguments, the accumulator, currentValue, index and array. As you can see in the above example our sumReducer only needs the accumulator and the current value as it is only a simple version.

The initial 0 value is passed into our reduce function, which is then passed into our sumReducer function and added up with all the other numbers to return the number 6.

Be careful to note the difference between the main reduce function and the reducer that you pass into it. The reducer is the logic that you run your reduce with.

Let’s take a look at how we would build a custom reduce function to hopefully clarify things a bit. You should notice that we are looping over the array we pass into it, and running those values through a reducer that will be defined when we use the new reduce function.

    // custom reduce function

    const numbers = [1,2,3]

    const sumReducer = (initialValue, current) => initialValue + current;

    const reduce = (reducer, initialValue, array) => {
      let value = initialValue;

      for(let i = 0; i < array.length; i++) {
        let currentValue = array[i]
        value = reducer(value, currentValue)
      }

      return value;
    }

    const sumOfNumbersCustom = reduce(sumReducer, 0, numbers)

    console.log("Custom reduce function, " + sumOfNumbersCustom);

You can see from the above that all your are doing is running an array of values through your desired logic to get a single output. This single output, could be a number, an array or an object. Similar to how you reduce your tomato sauce down by boiling it, we are reducing our array into a single desired thing. This is a powerful tool that can be utilised on a much more complex items, for example creating a nicely organised JSON object out of a string of data. If you don’t understand it the first time round, keep practicing and eventually it will stick and become second nature.

Functional Programming Basics Before You Learn React and Redux – The How – Part 2

Tom Hoadley — Sun, 29 Mar 2020 16:06:09 +0000

This is a two part series on the functional programming basics you should know before learning React and Redux. If you missed it, click here for part 1.

In the previous article you learned about functional programming and its benefits. The second article in the series is about how you write functional programmes. Before we continue, you might want to grab yourself a coffee and settle in. It's quite a long article!

Lets walk through the functional programming concepts again. Functional programming tells us we should avoid a few things…

Avoid mutations
Avoid side effects
Avoid sharing state

These three are about not mutating our data aka aiming for immutability. We can achieve this by,

Writing pure functions

Writing pure functions is the first tool you will learn. How else do we write functional programs?

Write declarative code

This is about writing concise, readable code. This is a key concept in functional programming too.

Be thoughtful about function composition.

This is about writing small functions which we can combine into bigger functions un till we have a full application. There a list of tools which we can use to compose our software, which have a broader term called higher order functions. We will go into detail on these as they are crucial tools in the functional programmers tool bet.

You will notice repetition of the above points are repeated through out the article to help drive them home. Let’s get into it… How do we write functional JavaScript?

Write pure functions

If we were to lend someone a book, we would rather that they didn’t make notes in it, and instead bought a new book and made notes in that instead. Pure functions have this idea at their heart. Pure functions returns the same value given the same input and do not mutate our data. When writing functions, you should try to follow these rules to ensure they are pure.

The function should take at least one argument (the original state)
The function should return a value or another function (the new state).
The function should not change or mutate any of it’s arguments (it should copy them and edit that using the spread operator).

This helps ensure our applications state is immutable, and allows for helpful features such as easier debugging and more specifically features such as undo / redo, time travel via the redux devTool chrome extension.

In React, the UI is expressed with pure functions as you can see in the following code snippet. It does not cause side effects and is up to another part of the application to use that element to change the DOM (which will also not cause harmful side effects).

    const Header = props => <h1>{props.title}</h1>

Spread operator (…)

The spread operator is an essential tool in writing pure functions and helps us ensure our application is immutable. See the below pure function. As you can see it’s copying the original array into a new one.

    let colorList = [
        {color: 'Red'},
        {color: 'Green'},
        {color: 'Blue'}
    ]

    // The wrong way - aka colorList is mutated because we have pushed 
    // something into the existing array. It's also not declarative.

    var addColor = function(color, colorList) {
        colorList.push({color : color })
        return colorList;
    }

    // The right way - aka colorList is immutable // and is declarative code.

    const addColor = (color, colorList) => [...colorList, {color}];

We have pushed our data into a new array which is good!

Let’s look at another example, whereby we need to pull the last element from an array. Notice we are using ES6 destructuring to create our variables.

    const numbersArray = [1,2,3,4,5,6]

    const [lastNumberInArray] = [...numbersArray].reverse()
    // 6

    // We have created a new numbers array using the spread operator. 
    // We then reversed it so we can pull out what was the last number in the array.
    // It would be the same as writing the below less declarative way.

    const lastNumberInArray = [...numbersArray].reverse()[0]

The spread operator is crucial in helping us not mutate our state. What’s next?

Write declarative code

Writing code declaratively essentially means writing the least amount of code you can. If you’ve heard of 10x engineers, then they’ll be writing their code like this. The simplest way of understanding this is to take a look at the below example where we use the native JavaScript map function to achieve our goal in one line rather than three.

    // imperative
    const makes = [];
    for (let i = 0; i < cars.length; i += 1) {
      makes.push(cars[i].make);
    }

    // declarative
    const makes = cars.map(car => car.make);

An example of the declarative nature of React is it’s render method. The below code renders a welcome message into the browser. It is a clean, simple way of writing something that would be very convoluted in without the help of the render function.

    const { render } = ReactDom

    const Welcome = () => (
      <div id="welcome">
        <h2>Hello!</h2>
      </div>
    )

    render(
      <Welcome />,
      document.getElementById('target')
    )

Declarative code is about writing code as concisely as possible and describing what should happen rather than how it should happen.

Thoughtful function composition

When you learn about functional programming you will read about the idea of composition. It involves ‘abstracting’ the logic as much as possible into small functions that focus on a specific task. These can then be composed into bigger functions un till you have a working application. Thoughtful composition will help keep our application more readable, maintainable and reusable. Below are the list of tools to help us compose our functions, starting with an explanation of a broader term for the group of tools, higher order functions.

Higher Order Functions

These are functions that are defined by their behaviour. Higher order functions either have another function passed in as an argument, or, return another function. This helps us achieve those desirable affects we noted in the first part of the series, e.g. easier debugging, more readable software etc. Think of higher order functions as Batmans utility belt which has a number of useful tools to help us write functional software. Those tools include,

Map – native to JS
Filter – native to JS
Reduce – native to JS
Recursive functions – we write our own
Currying functions – we write our own

Note that map, filter and reduce return a new array and so are part of the tools that help us achieve immutability.

Map

Map applies a function to each element in an array and returns the array of updated values. The below example of the map function takes a list of colours, edits an existing colour, and returns a new list. Notice it’s achieves this in one line of code aka it’s declarative.

    let colorList = [
        {color: 'Red'},
        {color: 'Green'},
        {color: 'Blue'}
    ]

    const editColor = (oldColor, newColor, colorList) => colorList.map(item => (item.color === oldColor) ? ({...item, color: newColor}) : item)

    const newColorList = editColor('Blue', 'Dark Blue', colorList);

    console.log(newColorList);

    // [ {color: 'Red'}, {color: 'Green'}, {color: 'Dark Blue'} ]

As a bonus tip, we can use the map function to transform an object into an array. The example below shows how we can transform an object of book titles and their author into a more useful array.

    const booksObject = {
        "Clean Architecture": "Robert C Martin",
        "JavaScript Patterns": "Stoyan Stefanov"
    }

    const booksArray = Object.keys(booksObject).map(key => ({bookTitle: key, author:booksObject[key]}));

    console.dir(booksArray);

    // [
    //    {bookTitle: "Clean Architecture", author: "Robert C Martin"}, 
    //    {bookTitle: "JavaScript Patterns", author: "Stoyan Stefanov"}
    // ]

Filter

The below example of the filter function takes a list of members, creates a new list and removes the desired member so we have an up to date members list. If the function you pass in returns true, the current item will be added to the returned array and thus you have filtered your array. Also, note the reject function, which works inversely to filter.

    const userList = [
        {name: 'Bob', member: true},
        {name: 'Fred', member: true},
        {name: 'Keith', member: false}
    ]

    const isMember = user => user.member === true
    const members = userList.filter(isMember);

    console.log(members);

    // [{name: 'Bob', member: true},{name: 'Fred', member: true}]

    // Notice how we have separated out isMember to its own function. This is declarative code and
    // means we can reuse the function in the following way. 
    // Also, reject is just the opposite of filter.

    const nonMembers = userList.reject(isMember)

    console.log(nonMembers)

    // [{name: 'Keith', member: false}]

Reduce

The third method is the reduce function. This is the ‘multitool’ and provides a more general function for when map and filter aren’t appropriate. The important thing to notice about reduce is that is requires a few more parameters than the others. The first parameter is the callback function (which also takes parameters) and the second parameter is the starting point of your iteration. It’s quite confusing at first but with a bit of practice and study you will begin to understand. Take a look at the below example.

    var orders = [
        {amount: 230},
        {amount: 230},
        {amount: 100},
        {amount: 400},
    ]

    const sumOfOrders = orders.reduce((sum, order) => sum + order.amount, 0)

    // 960.

The 0 argument we gave as the second parameter of reduce() is passed into the first parameter of callback function, aka sum. The order parameter is the iterable, aka the order value.

It may also help to use the following parameter names to simplify your reduce functions, “result”, “item” and “index”. “result’ is the result you’re building up to in your reduce function, “item” is the current item you’re iterating over, and “index” is the index.

The above is a very simple example and doesn’t demonstrate the real utility of reduce. Another more complex version of reduce shows how we can create a new object out of an array of data. The below function creates a new array of users that are older than 18.

    const users = [
      { name: 'Keith', age: 18 },
      { name: 'Bob', age: 21 },
      { name: 'Fred', age: 17 },
      { name: 'George', age: 28 },
    ];

    const usersOlderThan21 = users.reduce((result, item)=>{
        item.age >= 18 ? result[item.name] = item.age : null
        return result
    }, {})

    // {Keith: 18, Bob: 21, George: 28}

In most cases, any time you want to transform data into something else, you can use the reduce function.

Currying functions

Currying is a function that holds onto a function which you can reuse at a later point in time. This allows us to break our functions down into there smallest possible responsibility which helps with reusability. Take a look at the below add function. It allows us to add two numbers together which is fine. But then, we realise that most of the time, we are adding 1 to our numbers, so we can use a curried ‘add’ function that can be used to create more specialised add functions such as add1 or add2. This helps with reusability and helps neaten your code.

    const add = (a, b) => a + b

    const a = add(0,1) // 1
    const b = add(10, 1) // 11
    const c = add(20, 1) // 21

    // We can see we are adding one alot, so much 
    //we should abstract this further and make a curried function.

    const curriedAdd = (a) => (b) => a + b

    const add1 = curriedAdd(1);

    const d = add1(0) // 1
    const e = add1(10) // 11
    const f = add1(20) // 21

    // maybe we also want to have an add2 function?

    const add2 = curriedAdd(2);

    const g = add2(0) // 2
    const h = add2(10) // 12
    const i = add2(20) // 22

    // as you can see we have a reuseable add function 
    // that we can apply as and where we need it.

Take a look at some of the other examples of where we can use currying. We can create a curried version of map, which allows us to create functions that can be run on an array, for example a doubleAll function.

    // we can create a curried version of map which takes a function
    // and maps across over it and returns a new function which
    // will run our original function multiple times.

    const arr = [1, 2, 3, 4];

    const curriedMap = fn => mappable => mappable.map(fn);
    const double = n => n * 2;

    const doubleAll = curriedMap(double);

    doubleAll(arr)

    // [2,4,6,8]

Recursive functions

A recursive function is a function that calls itself, un till it doesn’t! It’s as simple as that. If it sounds like a for loop, then you’d be correct. You may choose a for loop when you only had one or two levels of recursion. The issue is when you have lots of levels of recursion, the for loop suddenly begins to become very unwieldy. The benefit of a recursive function, is that you can simply make a function call itself again and again till your rule is met. A recursive function can do what a for loop can, but in a much conciser way. In most cases you should use recursion over looping whenever possible. The example below shows how a recursive function can be used to count to 10.

    // For loop

    for (i = 0; i < 11; i++) {
        console.log(i);
    }
    // 0, 1, 2, 3 ...

    // Recursive function

    let countToTen = (num) => {
        if (num === 11) return
        console.log(num)
        countToTen(num + 1)
    }

    countToTen(0)
    // 0, 1, 2, 3 ...

In this case, it may actually be more worth while simply using the for loop, as it is less code. If we consider a more complex loop you will see the real benefits of recursion.

Imagine we have an object which contains lots of data and we will need to access it’s values numerous times in our software. It would help if we had a function that could ‘pick’ the required data from whatever object we passed into it. In the example below, we code a recursive function called pick to help us handle this. See the comments in the code for an explanation.

    let gus = {
        animal: 'dog',
        data: {
            gender: 'male',
            breed: 'Bull Dog',
            info: {
                color: 'white, brown',
                behaviour: 'good',
                mood: 'lazy'

            }
        }
    }

    // Lets see our recursive at work first. We pass in our object and field we want 
    // (using the standard javascript dot notation for  picking values from objects)
    // and it returns the value!

    pick('animal', gus) // 'dog'
    pick('data.info.behaviour', gus) // 'good'

    // Now lets look at how we created our recursive pick function!

    const pick = (fields, object) => {
        // We split our fields string by the . and assign them to a variable 
        // using ES6 destructuing. Notice we use the spread operator 
        // because this doesn't care how many arguments it recieves.
        // If we were to type ...remaining without the dots, it would
        // return the second item in the fields array, which is no good for this function!

        const [firstItem, ...remaining] = fields.split(".");

        // we now have a variable called firstItem, which returns the 
        // first word of the string, and a variable which is an array
        // that has the remaining words of the string in it.

        // we can use a ternary statement to see if the remaining array has anything in it
        // if it does we can run the pick function again
        // if it doesn't we can get the value we want.

        return remaining.length ? 
            pick(remaining.join('.'), object[firstItem]) :
            object[firstItem]
    }

Chaining functions

It’s worth remembering that functions can be chained together as well. This is another way that helps you to combine your smaller functions into larger ones. Typically for neatness, we drop the next function onto a new line as you will see in the below example, where we want to get all the even numbers from an array and double them.

    const numbers = [1,2,4,5,7,8,9,10];
    let isEven = (num) => num % 2 == 0
    let double = (num) => num * 2

    let doubleAllEvenNumbers = numbers
        .filter(isEven)
        .map(double)

Compose

Similar in the way we can combine smaller functions by chaining them together, we can merge them through a function that is commonly named compose(). Compose is a non native function to JavaScript and you can create it yourself as you can see from the below example. This helps with readability and maintenance.

    // create our compose funciton

    const compose = (...fns) => {
      (arg) => {
        fns.reduce(composed, f) => f(composed), arg)
      }
    }

    // create our single responsibility functions
    var sayLoudly = string => {
        return string.toUpperCase();
    }

    var exclaim = string => {
        return string + '!!';
    }

    // compose our single responsibility functions into a single one

    var shout = compose(sayLoudly, exclaim);

    exclaim('crumbs');

    // crumbs!!

    shout('crumbs);

    // CRUMBS!!

Promises

JavaScript can only do one thing at a time as it is a single threaded programming language. If we needed to load some blog posts from an API we ideally wouldn’t want our whole page to have to wait for this information before loading. In the past, we used callback functions to handle but very quickly it landed us in ‘callback hell’, which was where you would have to nest numerous callbacks which ended up in very bloated code.

In recent years, ES6 has introduced Promises to deal with asynchronous behaviour. These are going to be integral to most software applications and so are required knowledge for the modern JavaScript engineer.

    const getBlogPosts = (endpoint) => new Promise((resolves, rejects) => {
      const api = `https://jsonplaceholder.typicode.com/${endpoint}`
      const request = new XMLHttpRequest()
      request.open('GET', api)
      request.onload = () =>
          (request.status === 200) ?
          resolves(JSON.parse(request.response)) :
          reject(Error(request.statusText))
      request.onerror = err => rejects(err)
      request.send()
    })

    const processBlogPosts = (postsJson) => console.log(postsJson.title, postsJson.body)

    getBlogPosts('posts/1').then(
      posts => processBlogPosts(posts),
      error => console.log(new Error('Cannot get posts'))
    )

As you can see, the promise function ‘promises’ it will ‘resolve’ or ‘reject’ your asynchronous function which you can ‘then’ act on depending on a success (the first parameter passed into then) or error (the second parameter passed into then).

You can also chain your promises together, by returning a promise within your promise. This allows you to wait for the first function to finish, then run the second, then third, and so on. This helps prevent race conditions in your code and will provide the help solve any asynchronous requirement in your software.

See the below example whereby the first promise returns another promise, which we chain onto with then(), and return another promise un till we are finished. We have also chained on a catch function, to catch any errors in the process.

    new Promise((resolve, reject) =>{

      setTimeout(() => resolve(1), 1000);

    }).then(result =>{

      console.log(result); // 1

      return new Promise((resolve, reject) => { 
        setTimeout(() => resolve(result * 2), 1000);
      });

    }).then(result => {
      console.log(result); // 2

      return new Promise((resolve, reject) => {

        setTimeout(() => resolve(result * 2), 2000);

      });

    }).then(result => {

      console.log(result); // 4

    }).catch(error => {
        console.error(There's been an error', error)
    })

We can make the Promise function even more declarative using the async / await functions. Lets convert our blog posts function to see how promises can become even more readable. Look at the example below where we have created a function called get getBlogPosts which returns a promise. We than then create an async function which can then await for the promise to be returned. We can use try to handle a successful response and catch to handle a failed response.

    const getBlogPosts = (endpoint) => {
      return new Promise((resolves, reject) => {
        const api = `https://jsonplaceholder.typicode.com/${endpoint}`
        const request = new XMLHttpRequest()
        request.open('GET', api)
        request.onload = () =>
            (request.status === 200) ?
            resolves(JSON.parse(request.response)) :
            reject(Error(request.statusText))
        request.onerror = err => rejects(err)
        request.send()
      })
    }

    const processBlogPosts = async (apiEndPoint) => {

      try {
        const blogPosts = await getBlogPosts(apiEndPoint);
        console.log('Success', blogPosts)
      }
      catch {
        console.error('Could not get blog posts')
       }

    }

    processBlogPosts('posts/1')

    //Success 
    // {title: "Blog Post title", content: "The content of the blog post"}

This method is more declarative and thus works well in our functional JavaScript applications.

Conclusion

Functional programming is a very useful style of writing code and has been used by React and Redux for good reason. If you know it well, it will make your life as an engineer much easier. Remember that it’s very easy to slip away from functional programming while writing JavaScript so you need to stay focused. The following few simple rules will help you stay on target.

Keep data immutable.
Keep functions pure (functions should take at least one arguments and return data or a function).
Keep your code as concise as possible.
Use recursion over looping (will help solve complex issues in a neater way).

That brings our series to a close. Hopefully you have learned what functional programming is and how it can be used to build better applications. If you are interested how Node (the server) and Mongo (the database) can be used with React and Redux to build out full applications, you can stay up to date by following me on the links below.

Happy engineering!

Make sure to follow me on twitter or dev.to for more tutorials to help with your journey into software engineering.

Functional Programming Basics Before You Learn React and Redux - The What - Part 1

Tom Hoadley — Thu, 26 Mar 2020 11:18:50 +0000

This is a two part series on the functional programming basics you should know before learning React and Redux. Click here for part 2.

React and Redux are two of the most popular frameworks in the modern JavaScript ecosystem. React is used to build an applications front end and redux is used to manage the data in the back end. They are used together to build fast, scalable, maintainable applications.

This series of articles will give you an understanding of functional programming to serve as a foundation for your React and Redux knowledge. You will learn the what and how of functional programming in JavaScript, and be provided with transferable skills for other frameworks and languages as well.

The first article in the series simplifies the concepts of functional programming and by the end of the article, the entry barrier to learning React and Redux will hopefully seem a little smaller.

What is functional programming?

Similar to way you can choose to write a formal or informal style email, you can write different styles of code. There are a few different styles (aka paradigms) including; structured programming, object oriented programming and functional programming.

Believe it or not, these patterns have essentially been unchanged since Alan Turing wrote the first line of code on an electronic computer. Since then, mathematician Alfonso Church built on the work of Turing and introduced the Lambda Calculus in 1936, which then provided the backbone for John McCarthy’s LISP language in 1958, the first functional programming language.

This is reassuring, because despite the constant wave of new languages, frameworks and tools you see on a daily basis, functional programming concepts have persisted.

You may have noticed senior engineers seem to pick up new languages with ease. That’s because they have understood these core, unchanging concepts and can spot the underlying patterns of functional programming.

Why functional programming?

So what’s so great about functional programming and why did the React team choose it? Well, if you were to write an application that followed all of the functional principles your code would be,

Concise
Maintainable
Easier to debug
Testable
Readable
Reusable

You may not be as concerned about these benefits for a small personal application such as a to-do app but if you were working on large scale applications for a multi-million pound company, they are critical.

Functional programming concepts

Before introducing the concepts, its worth noting that there is no such thing as the perfect application or developer. Software engineering is as much an art as it is a science. Functional programming does not provide all the answers in a nice neat FAQ. You need to work hard to understand the concepts and use your best judgement on how and where they can be applied.

Secondly, the term ‘state’ is used in the below text. State refers to all the parts that change in an application. More simply, it’s your apps data. For example, in an online library application, the state could contain book titles, authors, if the user is a member, if the user has filled out a form on the website, etc. Knowing these two things we can begin to answer, what are the concepts of functional programming?

Functional programming says you should avoid the following

Avoid changing state (aka avoid mutations, aka immutability). This sounds strange at first because obviously things need to change in our app… The trick is, you need to be making copies of the state and editing the copy, rather than editing the original state. As an example, if you had an array of team members and wanted to add someone new, instead of editing the current array you should copy it and edit that. This may also be written as ‘you should transform your state’.
Avoid functions that change the ‘outside world’ (aka avoid side effects ). Again, this sounds strange but it’s similar to the above in that your functions should only copy and edit the input, rather than editing the original input. Some times side effects are required, for example, logging to console, writing to the screen, triggering an external process, writing to a file, etc, but where ever possible you should not be ‘editing’ the outside world, you should be ‘adding’ to it. Anytime you do need side effects, you should separate and isolate the actions from the rest of your application as much as possible.
The state in your application should never be ‘shared’ (aka avoid sharing state). For state to not be ‘shared’, it means that every time you need to ‘change it’ you should duplicate it and edit the duplicate, thus state is never ‘shared’ as such.

Functional programming says you should do the following

Writing functions that are predictable, only do one thing and do not change the ‘environment’ around it (aka write pure functions ). They have no ‘side effects’ and given the same input, they always return the same output.
Combine smaller functions into bigger functions that build a full application (aka be thoughtful about your function composition). This helps us achieve those desired application characteristics we mentioned at the start of the post. There are a number of tools that help us compose our functions in JavaScript which are outlined in the next post in the series.
You should write code that displays ‘what’ should happen rather than ‘how’ it should happen (aka write declarative code). An example of this would be choosing to use the map function, instead of a for loop, because the map function is a more concise version of a loop.

From the above, we can see that we are trying to avoid mutations, side effects and sharing state by writing pure functions. We are also being thoughtful with our function composition and writing declaratively. State management libraries such as redux provide a framework to achieve this in your applications, but before learning those you should know how to write it without their use.

To summarise we can understand the concepts as follows,

Avoid mutations
Avoid side effects
Avoid sharing state
Use pure functions
Be thoughtful about function composition.
Write declarative code

The second part of this series of functional programming will answer how exactly you can implement functional programming concepts with JavaScript.

Make sure to follow me on dev.to or twitter for more tutorials and articles to help with your journey into software engineering.

An Introduction to TypeScript

Tom Hoadley — Fri, 13 Mar 2020 20:49:05 +0000

TypeScript is a tool used to help improve the maintainability of your JavaScript code by allowing you to specify the type of data that should be used in your variables and functions, and then highlighting the times when when you have gone astray. Using TypeScript during your development, helps find and prevent bugs and also makes code more readable and descriptive during your development.

The first feature it includes is Static Type Checking. What this means is that you can specify the Type of information you expect in your functions, e.g. a string. If you were to add a number, and TypeScript was expecting a String, it would throw you an error. TypeScript also gives us Classes to work with. This isn’t as big a deal now what with ES6 having them built in, but before ES6, it was a big deal.

In the same way that Sass needs to be compiled to CSS, TypeScript needs to be compiled to JavaScript. This can be done using Node and the package TypeScript Compiler (shock!). The official documents provide a great introduction into setting it up for you to follow along with the below. It’s worth mentioning at this point that you should have good knowledge in JavaScript and JavaScript classes to fully follow along with the below (I wouldn’t want people reading this and getting frustrated if they didn’t pick it up!)

Defining Data Types in variables

The first feature of TypeScript is that it allows you to define the type of data a variable should be. The below code highlights the different types you can use and if you run the below code with your javascript compiler you will see that it does not flag any issues because the defined types have all been adhered too. You will see you can require variables to be strings, numbers, booleans, arrays, number array, mixed arrays (using tuple), undefined or any of the above (any).

<div class="code-embed-wrapper">

    let myString: string
    let myNum: number
    let myBool: boolean
    let anyVar: any

    // array of strings, array of numbers, array of booleans.
    let strArr: string[] // has to be an array of strings
    let numArr: number[]
    let boolArr: boolean[]

    // Note you can also write the above as follows but I prefer the above
    // let sttArry: Array<string>

    // Tuple means it must match the given array
    let strNumTuple: [string, number]

    // Void 

    myString = "Hello" + " World"
    myNum = 2.8
    myBool = true
    anyVar = "Whatever type you want"

    strArr = ['first string', 'second string']
    numArr = [1, 2, 3]
    boolArr = [true, false, true]
    strNumTuple = ['Hello', 1] // ['Hello, 1, 2, 3] would also work as only need to pass initial checks.

    console.log(myString, myNum, myBool, anyVar, strArr, numArr, boolArr, strNumTuple)

Defining Data Types in functions

The next useful feature of TypeScript are it’s use with functions. The below code demonstrates how you can define the type of data you want a function parameter to be, and also the type of data you want it to return. Note in the below code the use of the question mark which means that the parameter is optional. It’s also good practice to cover different types of data used in the parameters. In the example, we test for the typeOf data and then act accordingly.


    // the arguments have to be numbers as does the return value
    function getSum(num1: number, num2: number): number {
        return num1 + num2
    }

    // console.log(getSum(1, 3))

    // the below code allows for someone to add a string or number!
    let getSum2 = function (num1: any, num2: any): number {
        if (typeof num1 == 'string') {
            num1 = parseInt(num1);
        }
        if (typeof num2 == 'string') {
            num2 = parseInt(num2);
        }
        return num1 + num2;
    }

    // getSum2('2', 2)

    function getName(firstName: string, lastName?: string): string {
        if (lastName == undefined) {
            return firstName;
        }
        return firstName + ' ' + lastName;
    }

    console.log(getName('John', 'Doe')) // The question mark means lastName is optional!

Interfaces

In the same way we can write let myString: string; we can also use something called an interface, which is essentially the allowed data types of the key values. The below example should help clarify things, whereby you are specifying the showTodo function that the parameter must be an object with a title and text key that should both be strings.


    interface Todo {
        title: string,
        text: string
    }

    function showTodo(todo: Todo) {
        console.log(todo.title + ": " + todo.text)
    }
    let myTodo = { title: "trash", text: "take out trash" }

    showTodo(myTodo)

Classes

These are a feature that are now baked into ES6 and so if you’ve used ES6 classes… well then these are nothing new! The code below starts by defining an interface, which sets out the keys and methods that the class must have. We then create a new class called User which _implements _the userInterface we have just specified. The User class, starts by defining all the keys that the class can take. Notice the public, private and protected specifications which will change the closure of the keys in children classes.

The constructor function is baked into classes and is run when a new User class is created. It sets the keys to the parameters that are handed to it. We can then use this class by creating a new user called Tom with all the relevant data.

We then want to add member functionality to our software, whereby users can become members. To do this, we can use a feature of classes called extends which means that the Member class will inherit all of the methods and keys of the parent User class but allow us to add new methods and keys on top. We add a new key called ID, because in our imaginary system, Members need an ID but Users don’t. You will notice in the Member class, we can use the super function, another feature of classes, which means it will use the parent class keys (name, email, age). The Member class also needs a payInvoice function and so we can use the parents method by calling it with super.


    interface UserInterface {
        name: string,
        email: string,
        age: number,
        register(),
        payInvoice()
    }

    class User implements UserInterface {

        name: string;
        age: number;
        email: string; // can't access from outside the class
        public height: number; // can access from outside the class 
        protected address: string; // can access if the class inherits from this User Class (e.g. class SuperUser extends User)
        private notes: string

        constructor(name: string, email: string, age: number) {
            this.name = name
            this.email = email
            this.age = age

            console.log('user created: ' + this.name)
        }

        register() {
            console.log(this.name + ' is now registered')
        }
        payInvoice() {
            console.log(this.name + ' has paid his invoice')
        }
    }

    // this will throw a notification in typescript and say that age is protected
    let Tom = new User('Tom', 'hello@tomhoadley.co.uk', 28)

    console.log(Tom.age)

    // extending the user class
    class Member extends User {
        id: number

        constructor(id: number, name: string, email: string, age: number) {
            // need to call super on children classes.
            super(name, email, age)
            this.id = id
        }

        payInvoice() {
            super.payInvoice()
        }
    }

    let bob: User = new Member(1, 'Bob Smith', "bob@gmail.com", 22)

    bob.payInvoice()

Although the above is a slight divergence into classes rather than TypeScript, it is helpful to see how classes and TypeScript can work together to define the types of data that your code requires.

Again, this is useful for the maintainability of good software as it flags errors clearly as you build your code.

Software Patterns: Composition vs Inheritance

Tom Hoadley — Thu, 12 Mar 2020 16:29:11 +0000

“Favor object composition over class inheritance”

The Gang of Four, “Design Patterns: Elements of Reusable Object Oriented Software”

Before getting started, it's worth noting that it will help to have a basic understanding of JavaScript and of ES6 new features to follow along with this tutorial. If you don't you should still hopefully be able to pick something up and can always brush up on ES6 afterwards!

When building your software you have a choice of how to structure your code. These choices make a big difference over the life of your product, from the development of it to the future maintenance. There are an array of different well known patterns and it is rarely a case of selecting just one and sticking to it. However, for the purpose of learning, this blog post will present two different patterns, composition and inheritance and why the composition pattern is almost always preferable over the inheritance pattern.

This post should help give you a mental model to remember composition with the following examples with the use of super humans, because why not?! The first example displays how you would use the inheritance pattern to create super humans This will identify the limitations of the inheritance pattern, which will then be addressed by the composition pattern used in second example.

The Inheritance Pattern

Firstly we create a base class called superHuman, which has a default ability to fly.

    class superHuman {
        constructor(name) {
            this.name = name;
        }
        fly() {
            console.log(`${this.name} is flying`);
        }
    }

    const superGuy = new superHuman('Super Guy');

    superGuy.fly();

    // Super Guy is flying;

We then realise that being able to fly isn’t enough so we want to give the super humans a few other abilities, such as laser eyes and turning invisible. With the inheritance pattern, we would write the following.

    class laserSuperHuman extends superHuman {
        lasers() {
            console.log(`${this.name} has fired lasers from eyes`);
        }
    }

    class invisibleSuperHuman extends superHuman {
        turnInvisible() {
            console.log(`${this.name} is now invisible`);
        }
    }

With this new code, we can create an improved version of Super Guy who can shoot lasers as well as fly.

    const superGuy2 = new laserSuperHuman('Super Guy v2');
    superGuy2.fly();
    superGuy2.lasers();
    // Super Guy v2 is now flying
    // Super Guy v2 has fired lasers from his eyes

That’s all fine but when we try to give him the ability to turn invisible as well as shoot lasers and fly we run into a problem because we can’t do the following.

    // class laserInvisibleSuperHuman extends laserSuperHuman , invisibleSuperHuman {
    // ... 
    // }

This is where the composition pattern comes into play.

The Composition Pattern

Instead of using the above pattern we could refactor our code to the following, which will allow us to give them the different abilities we want with ease.

Firstly, we write a function which returns our super human as an object.

    function createBaseSuperHuman(name) {
        const superHuman = {
            name: name,
            fly: () => console.log(`${name} is flying`)
        }
        return superHuman
    }

    const superGuy = createBaseSuperHuman("Super Guy");
    superGuy.fly();

    // Super Guy is flying

Now we want to add our abilities, but this time they aren’t an inheritance of a base class and instead are stand alone functions.

 function shootLaser({ name }) {
        return {
            shootLaser: () => console.log(`${name} shot lasers from eyes`)
        }
    }

    function turnInvisible({ name }) {
        return {
            turnInvisible: () => console.log(`${name} turned invisible`)
        }
    }

    function grow({ name }) {
        return {
            grow: () => console.log(`${name} has grown to 100ft tall`)
        }
    }

Doing it this way, we can now pick and choose the abilities we want to apply to our super human. For example, maybe we want Super Guy to not only fly and shoot lasers, but also turn invisible and grow. (Marvel, get in touch for licensing.)

   function growingLaserShootingInvisibleFlyingSuperHuman(name) {
        const superHuman = createBaseSuperHuman(name);

        return {
            ...superHuman,
            ...shootLaser(superHuman),
            ...turnInvisible(superHuman),
            ...grow(superHuman),
        }
    }

As you can see using the spread operator (…), we have a way of applying whatever abilities we want to it.

   const superGuyV2 = growingLaserShootingInvisibleFlyingSuperHuman('Super Guy v2');

    superGuyV2.fly();
    superGuyV2.shootLaser();
    superGuyV2.turnInvisible();
    superGuyV2.grow();

    // Super Guy v2 is flying
    // Super Guy shot lasers from his eyes
    // Super Guy v2 turned invisible
    // Super Guy v2 has grown to 100ft tall

Conclusion

As you can see from above, the composition pattern provides a much more robust, maintainable method of writing software and is a principle that you will see throughout your career in software engineering.