DEV Community: AD

Smallest popular Javascript Library

AD — Mon, 01 Jun 2020 14:35:51 +0000

Which is the most used smallest Javascript Open Source Library?

I am going to start with reading source codes. Can you help me in listing out the popularly used Javascript library?

Can you implement forEach() correctly?

AD — Fri, 15 May 2020 10:57:20 +0000

So if you're into JavaScript you may be using forEach() daily. Let's dive deep into and see whether we can implement our own forEach() or not.

forEach() usage

The forEach() method executes a provided function once for each array element. - MDN



const arr = [1, 'ashok', 3, 4]
arr.forEach(el => console.log(el));

So how you'll move forward with implementing your own forEach()?
We have to iterate through the elements with the given callback, Simple!



function myEach(callback) {
  for (let i = 0; i < this.length; i += 1) {
    callback(this[i], i, this);
  }
}

Done? No, you will say we can make it even more realistic by adding it to the Array prototype chain and rule like a King.

Ok, here you go!



Array.prototype.myEach = function myEach(callback) {
  for (let i = 0; i < this.length; i += 1) {
    callback(this[i], i, this);
  }
};

I hope now it's complete. Yay!

Voila!

The above implementation floating around the web is wrong. Find the ECMA Specification here

Know your forEach() better

forEach() calls a provided callback function once for each element in an array in ascending order.

It is not invoked for index properties that have been deleted or are uninitialized¹

The above point is something people are not caring about when implementing forEach, to keep things simple, I am skipping the implementation of the 3rd argument this as you can see in the signature arr.forEach(callback(currentValue [, index [, array]])[, thisArg])



Array.prototype.myEach = function myEach(callback) {
  for (let i = 0; i < this.length; i += 1) {
    callback(this[i], i, this);
  }
};

const arr = [1, 'ashok', 3, 4]
// let's delete one of the elements
delete arr[1];

// native
arr.forEach(el => console.log(el));
console.log('-------')
// testing myEach()
arr.myEach(el => console.log(el));

Can you guess the output of the above two? Here is the output:

Did you notice that our implementation of the myEach() enumerates on deleted indexes as well?

This has something to do with Prototype Chain I am not willing to cover it here but we can fix this using .hasOwnProperty()



Array.prototype.myEach = function myEach(callback) {
  for (let i = 0; i < this.length; i += 1) {
    if (Object.hasOwnProperty.call(this, i)) {
      callback(this[i], i, this);
    }
  }
};

We can step further and can reduce some code if we can directly run hasOwnProperty() on the current instance i.e this



Array.prototype.myEach = function myEach(callback) {
  for (let i = 0; i < this.length; i += 1) {
    if (this.hasOwnProperty(i)) {
      callback(this[i], i, this);
    }
  }
};

Now you can test this and celebrate that we covered the most distinctive feature of forEach()

Few people are implementing the built-in JS methods Have a look here:

knaxus / native-javascript

Can you re-implement your own version of JavaScript built-in functions? Let's try it out.

Native JavaScript

Let's implement the built in functions again!

How to Contribute?

Try to use native functions and operators
Avoid ES6+ features
Your solution file should contain the MDN Link of the method you impleneted
Your solution file should also contain some introduction about the method and few examples
We will provide review to your implemenation
Your PR should contain commented test cases
We'll add our test cases during the review as well.

Spread

Star the repo if you liked the efforts of the initiators
Tweet about it.

All the best

View on GitHub

I hope you liked it! For digging deeper, here is one more article: https://alligator.io/js/foreach-array-method/

Let's try to scale an API

AD — Fri, 01 May 2020 07:11:48 +0000

I previously wrote about:

In this article, we'll get to know the preliminary steps you can take as a Software Engineer for improving your code and scaling it.

Let's see how we can decrease loadtest time from 187s to 31s

Note: I'll be using Node.js but don't skip reading, try to absorb the concept, especially if you're a beginner.

Here is the task:

Build a server with only one GET request to return the highest Prime number between 0 - N

My Setup

I've used pure Node.js (Not express.js) for the creation of my server and routes as well, you are free to use express.js
You can use this idea with any language, so don't skip reading but you can skip the code/code repo.

Let's Start!

I used this as one of my assignments for hiring (experienced) devs. The session used to be a pair-programming setup where the candidate was free to use the Internet and tools of his/her choice. Considering the kind of my routine work, such assignments are really helpful.

When you wrote a brute-force approach

Let's assume you created your server with the basic algorithm to find a Prime Number. Here is an brute force approach example:

// just trying the first thought in mind
function isPrime(n) {
  for(let i = 2; i <= Math.sqrt(n); i += 1) {
    if (n % i === 0){
      return false;
    }
  }
  return true;
}

function calculateGreatestPrimeInRange(num) {
    const primes = [];
    for (let i = 2; i <= num; i += 1) {
      if (this.isPrime(i)) primes.push(i);
    }
    return primes.length ? primes.pop() : -1;
  }

You'll try to use it in your GET route say like this https:localhost:9090/prime?num=20, it will work fine and you'll feel good. You tried it with some numbers like ?num=10, 55, 101, 1099 you will get instant response and life feels good :)

Hold On!

As soon as you try a large number say num=10101091 you will feel the lag (I've tried it in the browser, you can use Postman)

Since we are not using PM2 right now (which does a ton of things many of the beginners are not aware of), you'll notice that when you try to open a new tab and try for a smaller number, your tab will be waiting for the result of the previous tab.

What can you do now?

Let's bring in concurrency!

Cluster mode at the rescue!

Here is the block of code showing Cluster mode in action. If you are not aware of Cluster Module please read about it.

const http = require('http');
const cluster = require('cluster');
const os = require('os');
const routes = require('./routes');

const cpuCount = os.cpus().length;

// check if the process is the master process
if (cluster.isMaster) {
  // print the number of CPUs
  console.log(`Total CPUs are: ${cpuCount}`);

  for (let i = 0; i < cpuCount; i += 1) cluster.fork();

  // when a new worker is started
  cluster.on('online', worker => console.log(`Worker started with Worker Id: ${worker.id} having Process Id: ${worker.process.pid}`));

  // when the worker exits
  cluster.on('exit', worker => {
    // log
    console.log(`Worker with Worker Id: ${worker.id} having Process Id: ${worker.process.pid} went offline`);
    // let's fork another worker
    cluster.fork();
  });
} else {
  // when the process is not a master process, run the app status
  const server = http.createServer(routes.handleRequests).listen(9090, () => console.log('App running at http://localhost:9090'));
}

Voila!

After implementing the Cluster Module, you'll see a drastic change!

You can notice after this using threads, the browser tab with a smaller number will get the response quickly, meanwhile the other tab is busy doing the calculations (you can try it out in Postman as well)

For those who are not using Node.js, cluster mode refers to running your app in concurrent mode, utilizing the available threads on the CPU.

Now we have a bit of relaxation, but what else can we do to make it even more performant, because our single requests with large numbers are still lagging?

Algorithms at your rescue!

I know this is a haunting word but it is an essential tool you cannot ignore and in the end, after implementing a new algorithm you'll get to realize the worth of Algorithms.

So for prime numbers, we have a Sieve of Eratosthenes
We have to tweak it a bit so as to fit this in our use-case. You can find the complete code in the repo inside the class Prime.

Let's have a look at the Loadtesting Results

Brute force approach for num=20234456

Command passed to the loadtest module:

loadtest -n 10 -c 10 --rps 200 "http://localhost:9090/prime?num=20234456"

Result:

INFO Total time:          187.492294273 s
INFO Requests per second: 0
INFO Mean latency:        97231.6 ms
INFO 
INFO Percentage of the requests served within a certain time
INFO   50%      108942 ms
INFO   90%      187258 ms
INFO   95%      187258 ms
INFO   99%      187258 ms
INFO  100%      187258 ms (longest request)

Using SOE with modifications for num=20234456

Command passed to the loadtest module:

loadtest -n 10 -c 10 --rps 200 "http://localhost:9090/prime?num=20234456"

Result:

INFO Total time:          32.284605092999996 s
INFO Requests per second: 0
INFO Mean latency:        19377.3 ms
INFO 
INFO Percentage of the requests served within a certain time
INFO   50%      22603 ms
INFO   90%      32035 ms
INFO   95%      32035 ms
INFO   99%      32035 ms
INFO  100%      32035 ms (longest request)

You can compare both the results above and can see SOE is a clear winner here.

Can we improve it further?

Yes, we can, we can add a cache, a plain Object in Javascript which can be used as a HashMap.

Using a cache will store the result for a given number N, if we get a request again for N, we can simply return it from the store instead of doing the calculations.

REDIS will do a much better job here

Let's see the results

Brute force approach with cache for num=20234456

INFO Target URL:          http://localhost:9090/prime?num=20234456
INFO Max requests:        10
INFO Concurrency level:   10
INFO Agent:               none
INFO Requests per second: 200
INFO 
INFO Completed requests:  10
INFO Total errors:        0
INFO Total time:          47.291413455000004 s
INFO Requests per second: 0
INFO Mean latency:        28059.6 ms
INFO 
INFO Percentage of the requests served within a certain time
INFO   50%      46656 ms
INFO   90%      46943 ms
INFO   95%      46943 ms
INFO   99%      46943 ms
INFO  100%      46943 ms (longest request)

Using SOE with modifications & cache for num=20234456


INFO Target URL:          http://localhost:9090/prime-enhanced?num=20234456
INFO Max requests:        10
INFO Concurrency level:   10
INFO Agent:               none
INFO Requests per second: 200
INFO 
INFO Completed requests:  10
INFO Total errors:        0
INFO Total time:          31.047955697999996 s
INFO Requests per second: 0
INFO Mean latency:        19081.8 ms
INFO 
INFO Percentage of the requests served within a certain time
INFO   50%      23192 ms
INFO   90%      32657 ms
INFO   95%      32657 ms
INFO   99%      32657 ms
INFO  100%      32657 ms (longest request)

Time Analysis

Conditions	Time
With basic algo	187.492294273 s
With Cache	47.291413455000004 s
With SOE	32.284605092999996 s
With SOE & Cache	31.047955697999996 s

Finally

I hope you understood the benefits of the following:

Multithreading
Algorithms
Caching a.k.a Memoization

I hope you liked this short note, your suggestions are welcome. Hre is the code repo: find-highest-prime

You can find me on Github, LinkedIn, and, Twitter

Highly Scalable Codebase Architecture

AD — Thu, 30 Apr 2020 09:58:50 +0000

Hello Folks!

Back in time, I was preparing for a live-code session where I demonstrated adding a layer of GraphQL to an existing REST API. The session went well, and after that, I noticed my way of writing code and organizing files have really helped me adding the GraphQL layer very smoothly, the codebase architecture really made it feel like a hot knife on butter.

You can find the code repo here (do star it! :P) rest-and-graphql

Let's explore the codebase.

The source files are inside the /src folder. Let's define the roles of the folders inside /src

config: contains the .env files
controllers: contains the route handlers using methods inside routes
db: contains the database connection logic
graphql: contains the resolvers and definitions
routes: contains the definition of the routes using services
services: contains the logic to fetch data from DB
utils: contains the globally used util functions

As you can see, the codebase is organized as per the entities. What really helped me to scale here is the services folder, it is the real gem here

I wrote the services only once for the REST APIs and due to the patterns I followed made the construction of the GraphQL layer very easy. I only had to call the service inside the resolvers instead of writing it again and again for different layers.

One added benefit of this kind of codebase is that you can easily split it into independent microservices just by taking out the entities from routes, services, controllers folder

Feel free to explore the repo on Github: rest-and-graphql, you can also browse my other projects. And with time I will try to extend this article in detail.

Let me know your thoughts!

Find me on LinkedIn and Twitter

Open-source JavaScript Data Structures & Algorithms

AD — Tue, 28 Apr 2020 06:40:25 +0000

Repo having 99% coverage, 350+ unit tests

If you are too excited, here you have it Problem Solving using JavaScript! Do star/share the repo if you like it.

Back in time

I always wanted to implement the most commonly used Data Structures

Although I am very active on GitHub, with JavaScript as my primary language, I was having no intentions to implement the Data Structures using JavaScript. C++ was my first preference.

But due to my busy work schedule, I was not able to do it for a long time. (I am working as a Fullstack JavaScript Engineer since 2017, for more, you can peep into my LinkedIn profile)

Today, Problem Solving using JavaScript

I started solving interview questions in JavaScript and initiated a repo back in December 2018, fast forward August 2019, the thought of having a Data Structure repo pop up in my mind again. This time without thinking any further, I started implementing the common Data Structures using JavaScript.

List of Data Structures

This repo has the implementation of the following:

Linked Lists (SLL, DLL)
Stack & Queue
Bloom Filter & Set
Binary Tree, Binary Search Tree & Suffix Tree
Heaps

You can find a long list here: Table of Contents

What are the perks

Travis CI running the tests

The repo hash the following:

Most commonly used/asked Data Structures
Commonly asked interview questions with solutions
Unit Tests for every Data Structures and Problem Solutions
CI integration with Travis CI
Actively Maintained
Open for anyone willing to contribute
Human-friendly PR resolution

Future

I would like people who are interested should come forward and contribute to this repo.

This repo is very helpful for beginners to learn a lot of stuff like:

Learning about Data Structures
Learning about open source contributions
Learn about the importance of Testing
Learn best practices and tools like ESLint, Prettier

DEV Community: AD

Smallest popular Javascript Library

Which is the most used smallest Javascript Open Source Library?

Can you implement forEach() correctly?

forEach() usage

Voila!

Know your forEach() better

knaxus / native-javascript

Can you re-implement your own version of JavaScript built-in functions? Let's try it out.

Native JavaScript

How to Contribute?

Spread

Let's try to scale an API

I previously wrote about:

Here is the task:

My Setup

Let's Start!

When you wrote a brute-force approach

Hold On!

What can you do now?

Voila!

Algorithms at your rescue!

Can we improve it further?

Let's see the results

Time Analysis

Finally

Highly Scalable Codebase Architecture

Open-source JavaScript Data Structures & Algorithms

Back in time

Today, Problem Solving using JavaScript

List of Data Structures

What are the perks

Future

Thank You