Forem: Michael Umeokoli

Handling Concurrency With Goroutines and Channels in Golang

Michael Umeokoli — Thu, 04 May 2023 15:50:09 +0000

GOROUTINES AND CONCURRENCY

Concurrency in programming is the ability of a computer program to execute multiple instructions/tasks at a time. With concurrency long-running tasks do not hold up other tasks in the program, so instead of blocking, long-running tasks can run separately while the rest of the program continues. In summary concurrency is when a task does not have to wait until another task finish before running. This ensures speedy and efficient execution of programs.

Different programming languages have different methods of handling concurrency Go handles it with goroutines, A goroutine is a lightweight execution thread in the Go programming language and a function that executes concurrently with the main program flow. They have less overhead on your program than traditional threads (which can also handle concurrency) and are therefore the popular option in Go programming.

CREATING A GOROUTINE

Go routines are normal functions but called with the “go” keyword, basically any function can become a goroutine,

Example:

func helloWorld(str string) {
    for i := 0; i < 6; i++ {
    fmt.Println(str, ":", i)
    }
}

func main() {
    go helloWorld("Hello World")
    time.Sleep(1 * time.Second)
}

Here we have a program containing three goroutines , the main function which is automatically a routine and the two helloWorld functions called inside the main function using the go keyword. The helloWorld goroutine prints out “Hello World” and “hello world” five times each.

Notice the time.Sleep(1 * time.Second)in the “main” function, it delays the function for one second because without it the “main” function would not wait for our “helloWorld” goroutine to finish execution before going to the next line and finishing the program.

WHAT ARE CHANNELS AND WHAT ARE THEY USED FOR?

Channels are like pipelines between goroutines, they provide a way for goroutines to communicate effectively among themselves, Channels are a way of sending data of a particular type from one data type to another.

We create channels using the make method with the type chan followed by the data type you want the channel to send as arguments in the make() method;

var channel = make(chan int)

This is an example program of channels in use;

package main

import (
    "fmt"

func sendInteger(myIntChannel chan int){
    for i:=1; i<6; i++ {
      myIntChannel <- i // sending value
    }
  }

func main() {
    myIntChannel := make(chan int)
    go sendInteger(myIntChannel) 
for i:=1; i<6; i++ {
  message := <-myIntChannel //receiving value
      fmt.Println(message) 
    }
}

SENDING AND RECEIVING VALUES WITH CHANNELS

We create the channel myIntChannel in the main function and then pass it into the sendInteger goroutine where we use the channel to send numbers 1-5 with the channel on the left side of the special left-pointing arrow (<-) and the value we want to send on the right side of the arrow. We then receive the value sent from the sendInteger goroutine in the main function but this time the channel is on the right side of the arrow and the values sent are printed out with the two functions running concurrently.

One thing to note when using channels to send and receive data is ‘blocking’ i.e blocking the program, statements like message := <-myIntChannel that receive data through channels will block until they have received the data and statements to send data will also block until receivers are ready.

DIRECTION IN CHANNELS

Channels can be directed i.e specified to either send or receive data, we can do this using the <- arrow and the chan keyword in the arguments of the function to be used.

func sendInteger(myIntChannel chan <- int){ //send-only channel---the left arrow on the right side of the "chan" keyword in the function's arguments specifies a send only channel

    for i:=1; i<=50; i++ {
     myIntChannel <- i // sending value
    }
    
}

func printer(myIntChannel <- chan int)  { //receive-only channel---the left arrow on the left side of the "chan" keyword in the function's arguments specifies a receive only channel
    for i:=1; i<=50; i++ {
        message := <-myIntChannel //receiving value
        fmt.Println(message) 
    }
}

func main() {
    myIntChannel := make(chan int)
    go sendInteger(myIntChannel) 
    go printer(myIntChannel)
    time.Sleep(1 * time.Second)
}

SELECT STATEMENTS

Select statements are almost identical to the switch statement in Go, they both serve the purpose of conditional execution of statements but select statements are more specific to channels, they help execute actions when a condition is met by a channel.

Example:

func sendValuesFast(myStringChannel1 chan string){
      time.Sleep(5 * time.Millisecond)
      myStringChannel1 <- "Fast" // sending value
}

func sendValuesSlow(myStringChannel2 chan string){
     time.Sleep(30 * time.Millisecond)
      myStringChannel2 <- "Slow" // sending value
    
}

func main() {
   myStringChannel1 := make(chan string)
   myStringChannel2 := make(chan string)

    go sendValuesFast(myStringChannel1) 
    go sendValuesSlow(myStringChannel2)

    select{
    case res:= <- myStringChannel1:
          fmt.Println("sendValuesFast finished first",res)
    case res:= <- myStringChannel2:
        fmt.Println("sendValuesSlow finished first",res)
    }
}

In this example we have two channels in the sendValuesFast and sendValuesSlow goroutines, we use a time.Sleep() delay to myStringChannel2 so the myStringChannel completes first and the first case in the select statement is met and it’s action executed.

BUFFERED CHANNELS

So far we’ve been using what we call unbuffered channels and we said earlier that they block until data is sent or received on the channel, this is because unbuffered channels have no memory space for data being sent through it hence they have to wait till there is a statement to receive it before sending again.

Buffered channels on the other hand are created with memory allocations in the make() method and will only block if the channel is full (when sending) or if the channel is empty (when receiving). It allows you to store the amount of data specified on creation for example channel:=make(chan int, 5) creates a channel that can store 5 integers and if a 6th is sent the channel will block until the messages in the channel are read.

func bufferFunction(bufferChannel chan int)  {
    for i := 1; i<=6; i++ { 
        bufferChannel <- i
        time.Sleep(1 * time.Second)
        fmt.Println("Channel sent", i)
    }
}

func main()  {
   bufferChannel:= make(chan int,5)
   bufferFunction(bufferChannel)
}

Here we have an example buffered channel with space for 5 integers and we use a for loop to try and send the numbers 1-6 , we do this without a receiving statement and so when the loop tries to send the 6th integer the channel blocks and the program finishes.

This article was written to help me better understand goroutines and channels, SPOILER ALERT: I still don't understand them!!😂😭( just kidding😁,or am I? ).

Redux-Toolkit and React-Redux For App-Wide State Management

Michael Umeokoli — Fri, 15 Jul 2022 11:07:00 +0000

The most important part of any web application is data(state), data that changes and affects how our application works and performs, to effectively use this data we need ways to change it (useState and useReducer) and ways to access it in every part of our application where it is needed.

A little while ago I felt the need the need to learn Redux (such a cool name btw) because it is the standard for state management tools and there a lot of them (trust me I was shocked at how many are in existence). Anyways, I had previously been using the Context API hooks createContext and useContext and they did the job for me, but as your application grows the Context API can get more complex and harder to manage, there is also the issue of performance as your application gets bigger, this is where state management libraries such as Redux/Redux Toolkit come in🦸‍♂️.

Redux is a cross-component state management system, it aids us in managing and monitoring state without 'props drilling/chaining'(passing state through props in components that have no need for them) and Redux Toolkit is basically just the modern way of writing Redux and hence is the focus of this article.

HOW DOES REDUX TOOLKIT WORK

Redux Toolkit gives us a central data store (CDS) that handles the state needed application wide, slices of data are stored within the CDS, these slices have unique names, initial data and reducers. slice reducers are functions that alter the state of data in the slice when triggered. The CDS gives components ability to subscribe to the data in the store giving the components access to the data and the components are also notified of any changes made to the data they are subscribed to and they react to the change accordingly, components can also make changes to the store by triggering "actions" in the store through the store's reducers

For this article we will be building a simple counter app aiming at explaining the basic setup and usage of the Redux Toolkit on React apps.

Create React app

npx create-react-app counter-app

Your inital file setup will look like this on your IDE

We'll do a little cleanup of files we don't need and create two new folders in the src folder called components and store, your setup should now look like this..

Installation of packages

We need to install two packages on your React app, the redux toolkit and the react-redux package, react-redux is official React bindings for Redux, react redux is a helper package maintained by the official redux team that helps you manage redux data better, it enables you to easily make connections to the redux store and dispatch actions better, it checks to see if the data your component wants has changed, and re-renders your component, in all react-redux makes life easier when using redux toolkit.

npm install @reduxjs/toolkit react-redux 
OR
yarn add @reduxjs/toolkit react-redux

//this installs both packages

"npm run start" to start the application

LET'S BUILD

We'll set up our store folder this will contain our redux store, create a file called index.js

CREATING THE STORE

store/index.js

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: null,
});

export default store;

We make use of the configureStore function provided to us by redux toolkit and an object containing the reducer value is passed in as an argument, it creates the CDS (central data store) for us where we store our state slices in the store reducer.

CREATING THE DATA SLICE

createSlice is another function provided to us by redux toolkit, it takes in an object with three properties name, initialState which is the state of the data when the app starts and reducers which are functions that perform some kind of logic for changing the state of the data, when we create a slice redux toolkit automatically generates "actions" object from the data slice corresponding with the reducers names and these actions are what components trigger to make state changes.

//  store/index.js

import { configureStore, createSlice } from "@reduxjs/toolkit";

const initialCounterState = { count: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState: initialCounterState,
  reducers: {
    increment: (state) => {
      state.count++;
    },
    decrement: (state) => {
      state.count--;
    },
  },
});

const store = configureStore({
  reducer: counterSlice.reducer,
});

export const counterActions = counterSlice.actions;

export default store;

In the above code we have a counterSlice with a name, initialState and two reducers one for increasing the count by 1 and one for decreasing the count by 1. The reducers in the slice here get access the value of the current state of count which is currently 0 through the automatic state parameter provided by redux toolkit and has the ability to change it depending on the logic inside the reducer.

We then pass in the built-in reducer property of the slice (counterSlice.reducer) as a value to the reducer key of the configureStore object and that sets up our store. The reducer property is automatically created by redux toolkit gives the store access to the values of the slice.The data slice actions are also exported from the store so they can be used to make changes to our data from anywhere in the application.

MAKING OUR STORE GLOBALLY AVAILABLE

We need to make the store globally available to all components and for that we go to the top of our components tree index.js in the root folder

We import the store from store/index.js and a special component called Provider from our helper package react-redux this component is used to wrap App.js it takes in a store props which we set to our imported store, this makes our store available for all our components.

//  src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store/index";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

SETTING UP OUR COMPONENTS TO MAKE USE OF REDUX

Create a file in the components folder called Counter.js it will contain our Counter component with empty functions which we will wire up to the slice actions so we can trigger the reducers to increase/decrease the count.

const Counter = () => {
  const incrementHandler = () => {};

  const decrementHandler = () => {};

  return (
    <main>
      <h1>Redux Counter</h1>
       <h2>--Counter Value--</h2>
      <div>
        <button onClick={incrementHandler}>increase</button>

        <button onClick={decrementHandler}>decrease</button>
      </div>
    </main>
  );
};

export default Counter;

So in the Counter.js file we will be importing 3 things, the counterActions from store/index.js remember we exported the slice auto-generated actions earlier and two hooks from react-redux 1) useSelector for getting access to the state of your choice and 2) useDispatch to dispatch actions and trigger the reducer functions in your slice.

import { useSelector, useDispatch } from "react-redux";
import { counterActions } from "../store";

const Counter = () => {
  //storing our dispach function into a value
  const dispatch = useDispatch();

  // 
  const count = useSelector((state) => state.count);

  const incrementHandler = () => {
    dispatch(counterActions.increment());
  };

  const decrementHandler = () => {
    dispatch(counterActions.decrement());
  };

  return (
    <main>
      <h1>Redux Counter</h1>
      <h1>{count}</h1>
      <div>
        <button onClick={incrementHandler}>increase</button>
        <button onClick={decrementHandler}>decrease</button>
      </div>
    </main>
  );
};

export default Counter;

Getting the state out of the store using useSelector hook is done by passing in a function that receives the state being managed in the store and picking the exact state we need which in this case is the count state and if we had multiple slices and therefore multiple reducers in our store reducer for example an authentication slice..

Example:

//Single slice
const store = configureStore({
  reducer: counterSlice.reducer,
});

//Multiple slices
const store = configureStore({
 reducer: { counter: counterSlice.reducer, auth: authSlice.reducer }

});

you will then target the count state in the slice using this code
instead >>> const count = useSelector((state) => state.counter.count) we have to go down one more level because the count and auth slices are now being stored in an object.

Our decrease and increase buttons now work and the value of the count is displayed, We can take it a little further by passing in parameters to our slice actions/reducers.

//  store/index.js

import { configureStore, createSlice } from "@reduxjs/toolkit";

const initialCounterState = { count: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState: initialCounterState,
  reducers: {
    increment: (state) => {
      state.count++;
    },
    decrement: (state) => {
      state.count--;
    },
    increaseByValue: (state, action) => {
      state.count = state.count + action.payload;
    },
  }
});

const store = configureStore({
  reducer: counterSlice.reducer,
});

export const counterActions = counterSlice.actions;

export default store;

I've added one more function to the reducers and this function is different from the others because it takes in another parameter called "action" which is an object containing a "payload" property, this property is what wil holds whatever argument we pass into the action in our Counter component.

import { useSelector, useDispatch } from "react-redux";
import { counterActions } from "../store";

const Counter = () => {
  //storing our dispach function into a value
  const dispatch = useDispatch();

  // 
  const count = useSelector((state) => state.count);

  const incrementHandler = () => {
    dispatch(counterActions.increment());
  };

  const decrementHandler = () => {
    dispatch(counterActions.decrement());
  };

  const increaseByValueHandler = () => {
    dispatch(counterActions.increaseByValue(5));
      };

  return (
    <main>
      <h1>Redux Counter</h1>
      <h1>{count}</h1>
      <div>
  <button onClick={incrementHandler}>increase</button>
  <button onClick={decrementHandler}>decrease</button>
  <button onClick={increaseByValueHandler}>increase by 5</button>
      </div>
    </main>
  );
};

export default Counter;

AND WE'RE DONE!

You can tweak the increaseByValue function to receive it's argument dynamically using useState or useRef to get the value of an input field but this is as far as I'll take it.

Of course redux-toolkit/react-redux are mainly used for more complicated state logic and across much more components but the purpose of this article was just to demonstrate how redux works and as you can see it's not that hard to set up.

See you next time. Mikey out✌🏾

Understanding TypeScript....My Experience

Michael Umeokoli — Fri, 13 May 2022 19:33:32 +0000

I decided to look into Typescript this week because of Pavlo (a developer friend who I have never met😆)who has been of great help to me these past few months. You see Pavlo is a JavaScript developer who had just dove into Typescript at his new internship and had run into a bug already while building a new feature for the company and I wanted to help but I didn't know much about Typescript except for the YouTube videos from Fireship✨🔥(the best YouTube channel in the world)…This TypeScript in 100 seconds video is gold...and so I started doing some learning and what I discovered in the process was a better way of writing JavaScript (Oh well, I was always a strawberry man anyway🤷🏾‍♂️ get it??😀😀). So I decided to write this article on the basics of this cool language or at least try.

WHAT IS TYPESCRIPT???

Well I already said it is a better way of writing JavaScript but according to official docs, "TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale" What does this mean??? Let's break it down to two parts: "strongly typed programming language" and "builds on JavaScript"

STRONGLY TYPED💪🏾??

No No not that type of strong 😂, this just means that Typescript like other strongly typed languages such as Java and Python will not allow any unholy alliances between values of different types like it would in Vanilla JavaScript.

A very simple example:

let Age = 95; //TypeScript immediately assigns the number type to the
 Age variable due to type inference and doesn't allow any other type
 to be assigned//
*Type Inference is the ability Typescript has to assign types for you
 according to the type of value you give to a variable.

Age = Age + 'years old';  // This will produce an error on your IDE 
that Type 'string' is not assignable to type 'number'.

OR

let Age = 95;
Age = '95';  //Type 'string' is not assignable to type 'number'.

BUILDS ON JAVASCRIPT

Behind all the coolness of TypeScript is the fact that the language is literally still JavaScript, same syntax and methods. Typescript is not understood by the browser directly so code written in TypeScript is still compiled down to JavaScript using the TypeScript compiler, It literally creates a JavaScript file with your Typescript code converted to vanilla JavaScript for you, this JavaScript file is what the browser understands.

TypeScript does what we call 'type-checking' in development and in compile time(static type checking) instead of in run time(dynamic type checking) like in JavaScript, Type checking means checking that each operation should receive proper number of arguments and each variable is of the proper data type.. This helps reduce/eliminate type errors when working with numerous variables

TypeScript also allows us assign types to variables ourselves (it is advisable to assign types everywhere we can) so we can detect errors in time.

Example:

let Age:number = 23;
let Name:string = 'Mike'; 
let Male: boolean = true
// We are assigning the types that these variables can hold...

Here the Age variable will only hold numbers going forward and the Name variable will only hold strings etc. Giving these variables any other data type than the one assigned will produce an error when compiled.

FUNCTIONS IN TYPESCRIPT

Functions in the TypeScript are the same as in JavaScript with the exception of ability to add types expected for the parameters and also the type expected to be returned from the function.

Example:

JavaScript function

function addNumbers(num1, num2) {
  return num1 + num2;
 }
const result = addNumbers(5,10)
console.log(result) //result is 15     

TypeScript Function

function addNumbers(num1: number, num2: number): number //<=return type {
  return num1 + num2;
 }
const result = addNumbers(5,10)  
console.log(result) //result is 15

The addNumbers TypeScript function expects 2 parameters of the number type and also expects a number type to be returned from the function , any abstraction from these type rules would produce an error.

Of course you could do without assigning types to function parameters and they will automatically be assigned the 'any' type which allows for any data type to be passed into a variable or a parameter but then it would be counter-productive because why the hell are you using TypeScript then🤷🏾‍♂️.

ARRAYS IN TYPESCRIPT

In TypeScript Array types can be set , we can choose for an array to contain strings only or numbers only etc.

Example:

let favouritePlaces: string[]; //this array is being set to contain 
only strings and nothing else

favouritePlaces = ['New Orleans', 'French Riviera', 'Bali', 'Bora Bora', 'Santorini']

let Ages: number[];

Ages=[23, 45, 32, 26, 30]

Simple as that!

DEFINING OBJECTS TYPES IN TYPESCRIPT

There are two ways of defining object types in TypeScript:

1) Defining with Interfaces
Interfaces are like templates that describe how objects should look like and what types are given to the values of the objects

Example:

interface personObject {
name:string;
age:number;
hobbies:string[];
}

const person1:personObject ={
name:'mike',
age:'56',
hobbies:['movies','sports','coding' ]
}

Here we use the personObject interface as a type for the person1 object following the types set for each key-value pair

2) Defining Directly

Example:

const person: {
  name: string;
  age: number;
  hobbies: string[];
} = {
  name: "mike",
  age: 22,
  hobbies: ["sports", "cooking", "movies"],
};

TUPLES IN TYPESCRIPT

Tuples in TypeScript are basically arrays but they give us a way of stipulating the types and length of the array before hand.

Example:

let myTuple :[string, number, boolean] 
myTuple = ['string', 23, true]
console.log(myTuple)
//Here we fix the length of the array to (3) three values 
of types string , number and boolean

UNION TYPES ( | )

Union types are a special feature in typescript that allow you set multiple types when declaring a variable or setting a parameter, they are represented by the vertical bar ( | ).

Example:

let age:(string | number) ;
age = 29; //ok
age = '29'; // still ok

// We can also use this when declaring arrays
`const arr:(string|number)[] = ['Mike', 'Dan', 'Sam', 12, 34, 29]`

I have loved getting to learn this lovely ✨ language and will be using it in my future React and Nodejs projects and advice everyone to try it out. I recommend this video on Typescript by my goto guy Maximillian Schwarzmuller on his YouTube channel Academind where he goes through the setting up your environment for Typescript.

Thanks for reading👋🏾🙏🏾.