DEV Community: Martins Olumide

How to use Web Worker in React with TypeScript

Martins Olumide — Fri, 05 Jan 2024 20:02:06 +0000

What are web workers
Prerequisites
Initializing a project (VITE)
Connecting the dots
Wrapping up

What are web workers

According to MDN, Web Workers are a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. In addition, they can make network requests using the fetch() or XMLHttpRequest APIs. Once created, a worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code (and vice versa).

JavaScript as we all know is single-threaded I.E it can only execute only one thing at a time, it simple cannot multi-task like other languages out there. So, the Idea behind web worker is to aid or acts as an auxillary thread executer, taking the load off the Main thread. In some situations, we might want to fetch some resources that takes time to respond or perform some CPU intensive task that may cause the UI to hang or freeze, that's where Web Workers comes in. We take such Task or Computations and execute them in Background thread away from the main thread.

Prerequisites

Make sure you have a React project created, either CRA or VITE anyone. If you can't create one, follow this step. I'll be using VITE.

Initializing a project (VITE)

//Make sure you have NODE installed
//In your terminal, type this

npm create vite@latest

/**This will bring a prompt telling you to name your project folder, after typing a name, press

Enter, then you'll be asked what framework (Choose React obviously), and choose TypeScript if

you want. After that, your project is all set and we can begin writing code.**/

Connecting the dots

So now, after installations you should create a Worker folder (not a must but more conventional way of doing it). So we have

//src/Worker/worker.ts
const workerFunction = function () {
//we perform every operation we want in this function right here
   self.onmessage = (event: MessageEvent) => {
      console.log(event.data);

      postMessage('Message has been gotten!');
   };
};

//This stringifies the whole function
let codeToString = workerFunction.toString();
//This brings out the code in the bracket in string
let mainCode = codeToString.substring(codeToString.indexOf('{') + 1, codeToString.LastIndexOf('}'));
//convert the code into a raw data
let blob = new Blob([mainCode], { type: 'application/javascript' });
//A url is made out of the blob object and we're good to go
let worker_script = URL.createObjectURL(blob);

export default worker_script;

Here is my React Component accessing the worker file.

//src/App.tsx
import { useEffect } from 'react';
import worker_script from './Worker/worker';

let worker: Worker;

function App() {
   if(window.Worker)
     worker = new Worker(worker_script);

   useEffect(() => {
      worker.postMessage('Beunos Dias!');
   });
   return <p>Web Workers</p>;
}
export default App;

Because my useEffect doesn't have a dependency, the worker.postMessage function will be called once the page load and no more, until you refresh the page again.

Wrapping Up

once that is done, you can just run your code with a simple npm run dev this will build your whole project and serve it on port 5173, yours might be a different port due to different configuration. In addtion, the build up process is lightning fast ⚡⚡, I recommend using VITE for your projects...

Time Complexity of JavaScript Array Methods (Part One)

Martins Olumide — Fri, 01 Sep 2023 07:36:08 +0000

JavaScript array methods are simply function (also called method) that perform specific task and computations on the array it is called on. Majority of the time, they either return a new array, mutate an existing array, search an array, or return some truthy or falsely value based on a condition or statement. Knowing the time complexity of the array methods being used is not only eye-opening, it also allow enhance the performance of our programs and applications.

So, lets dive in my JavaScript Geeks 😎👨🏽‍💻;

Array.pop(): This array method is the type that returns an item (generically called element) from an array, pop() removes the last element from an array and returns it. If the array is empty, undefined is returned and the array is not modified. let's see an example.

let names = ['Dave', 'Martins', 'Tobby', 'Rielle']
names.pop()
//return 'Rielle' since it is the last element of the array

let emptyNames = []
names.pop()
//returns undefined since there are no element in the array

from the example above, think about the names in the array as people on a queue, since pop() return the last element, the last person on the queue will be removed and returned. And doing this simply have no effect on the rest of the people since there is no need for reindexing of rest of the people in the queue. This implies that the time complexity to remove an element in an array is O(1).

2..Array.push():
push() is an array method that appends a new elements to the end of an array, and returns the new length of the array. let's proceed using our names array;

names = ['Dave', 'Martins', 'Tobby']
//This is our new array since 'Rielle' has been removed
names.push("Wick")
console.log(names) // ['Dave', 'Martins', 'Tobby', 'Wick']

push() is performing the opposite operation of the pop() method. pop() removes, push() adds. So, what do you think the Time complexity to add to people on the queue will be? my answer is O(1). How I got my answer?, well adding a new person to that names array doesn't require the change of the indexes of the persons in the array therefore, the only person changing index is the new person being added.

3..Array.Unshift():
unshift() is an array method that adds a new element to the start of an array i.e array index 0, It is working in same way the array.push() is but different postion.

names = ['Dave', 'Martins', 'Tobby', 'Wick']
names.unshift("Maroon")
console.log(names) // ['Maroon', 'Dave', 'Martins', 'Tobby', 'Wick']

the above example shows that Maroon has taken the postion of index 0, which was the initial position of Dave. This signifies that Dave's index is now 1 and same is applicable to the rest of the elements in the array

//initial indexing
['Dave', 'Martins', 'Tobby', 'Wick']
Dave = 0
Martins = 1
Tobby = 2
Wick = 3

//latest indexing since calling the unshift method
['Maroon', 'Dave', 'Martins', 'Tobby', 'Wick']
Maroon = 0
Dave = 1
Martins = 2
Tobby = 3
Wick = 4

The time complexity for this operation is O(n).

4..Array.shift():
The shift() method of Array instances removes the first element from an array and returns that removed element. This method changes the length of the array.

names = ['Maroon', 'Dave', 'Martins', 'Tobby', 'Wick']
names.shift() // returns Maroon
//new array state
['Dave', 'Martins', 'Tobby', 'Wick']

For this also, reindexing would have to occur, consequently, the time complexity will be O(n) too.

5..Array.forEach():
The forEach() method of Array instances executes a provided function once for each array element. It takes a callback function with a couple of parameters. Basically, it loops through each element in the array and the time complexity for this operation is O(n) as the time taken will be proportional to the number of input.

Conclusion
This is concludes the first part of the Time Complexity series, where we discuss thoroughly JavaScript methods and their time complexity. Stay tuned for the next parts I'll be uploading, have a nice day 🙂✌️

ALX Portfolio Project

Martins Olumide — Sun, 16 Jul 2023 17:33:45 +0000

Title: Agrocademy - A Farmer, customer social forum

*Introduction
*
Agricultural products are essential to not only the Farmers but to each and every one living in the world so far you eat, drink and make use of something Agro-based. In today's world where sole farmers aren't appreciated enough, an agro-based forum or social media can play a vital role in improving, motivating and inspiring more individual entrepreneurs to take on the farming business. I once had a relative who was a very successful sole farmer back in the 90s when the chance of making it as a sole commercial farming entrepreneur was very high. But since the emergence of large-scale commercial farming, the hope of such farmer succeeding is very slim, don't get me wrong, large-scale commercial farming has been a game changer and it is still very much needed but we seem to care less about small-scale commercial farmers.

This blog post will delve into the inspiration behind the project, provide a summary of its anticipated accomplishments, and list the technical challenges encountered during the development process.

Inspiration

The Farmers-Customer forum project was conceived out of an attempt to complete and create a useful application for my portfolio project, It will be easy to create just anyhow project to present and proceed to the 3months specialization but in the long run, I will be affected and my 9 months of assessment and test will probably be in vain. Furthermore, it is a portfolio project, not an ALX portfolio project alone, I knew creating a project I can show and talk about with people would be best. Additionally, It will be a crime if after the second sprint of the program I couldn't apply the knowledge and practical experience gained from the program.

Project Summary

Agrocademy is aimed at providing a social media-like interface where farmers can upload images of farm products (any other images can be uploaded), create, delete, like, and comment, on a post, and also, users can have a global group(just a term I use for a chat interface with every authenticated user added). Users can also change profile images, follow a user and more. Future integrations and updates will improve the UX/UI, create a Direct message interface, and personalize feed post recommendations. The Project utilizes a 3-Tier Software Application architecture, with HTML, CSS, JavaScript and React-TypeScript for the UI/frontend, Node(Express TypeScript) for the backend and Sqlite3 (the next version will be migrated to MongoDB) for the database.

Here are the steps I took in making progress in building the project.

I. I first designed the database schema and write out the relationship between each table, row, and column. Sqlite3 was chosen because it is lightweight, and I can deploy it directly with the server.

II. I started building my routes and middleware and some configurations. I have never used typescript on the backend, but I was taught to do hard things, so I used it and I'd say it was fun.

III. Lastly, my client side. The front end was pretty easy and fast, maybe because it's my second year of building UIs LOL. I was faced with some challenges but I overcame.

Here is the Diagram of my App architecture;

Technical Challenges:
Time posed a significant technical challenge during development as I did the project all by myself which presented a lot of obstacles. The project was designed serve a lot of functionalities for the first version but time wasn't on our side, so I picked out the basic functionalities I want it to have. Also, the deployment is an ongoing challenge that I'm facing till now.

Conclusion
Agrocademy is aimed at bringing together sole or individual commercial farmers for the common goal of encouraging, motivating, Inspiring and education each other. Also, it attract consumers to farm product which can be a great way to improve sales

Profile
The project was developed by Martins Olumide, a software engineer and ALX Software Engineering student.

Github: https://github.com/Martins100-Tmd
Landing Page: https://agrocademy.netlify.app
LinkedIn: https://www.linkedin.com/martins100tmd