Forem: Asad Anik

Solution Of The Promise Chaining In JavaScript

Asad Anik — Mon, 10 Oct 2022 10:14:32 +0000

When we are gonna solve the problem of Callback Hell, then there is another type of problem which is not so good for coding style and handle the code. That is the chaining of then, catch multiple times. So the solution is to using Async-Await for handle asynchronous task with synchronous way.

⇒ This Async Await will solves the Callback Hell and the Promise chaining Hell problems. Our Async function should returns the Promise stand alone 😎.

⇒ Example of Async Await.

Find User by username.
Find Posts by userId.
Find latest Post.
Find Comments by postId.
Find latest Comment.
Find User of the last Commented User.

→ Implementation.

/users?username=[username]
/posts?user_id=[user_id]
/comments?post_id=[post_id]
/users?username=[username]

// Example of Async Await..
async function getUserName(username){
    const mainUser = await get(`/users?username=${username}`);
    const posts = await get(`/posts?user_id=${mainUser.id}`);
    const comments = await get(`/comments?post_id=${posts[0].id}`);
    const user = await get(`/users?username=${comments[0].username}`);
    console.log(user);
}

getUserName('Mosammat Akhi');

Basically the Async Await is the system where you can see the Asynchronous code just like same as the Synchronous code. 💁🏻 We declared this complex Callback Hell and Promise .this chaining Hell with simple like Synchronous style of Asynchronous Task 🙄.

→ So if we handle the Error to see and manage it.

// Example of Async Await..
async function getUserName(username){
    try {
            const mainUser = await get(`/users?username=${username}`);
            const posts = await get(`/posts?user_id=${mainUser.id}`);
            const comments = await get(`/comments?post_id=${posts[0].id}`);
            const user = await get(`/users?username=${comments[0].username}`);
            console.log(user);

    } catch (ERR) {
        console.log('ERR! when try to fetching data -- ', ERR);
    }
}

getUserName('Rakhiyaatul Kubra');

This code can handle or see the Error when you needs like Promise .catch chain. We can use Try-Catch block instead of Promise.

But without Promise you can’t understand the Async Await tasks.

Real life Example of Async Await.

We used https://jsonplaceholder.typicode.com this REST API website for using fake API to complete our example.
And we used Axios library to handle HTTP request.

/// Real World Example with Fake REST API..
// Example of Async Await.
const Axios = require('axios').default;

const USERS_URL = 'https://jsonplaceholder.typicode.com/users';
const POSTS_URL = 'https://jsonplaceholder.typicode.com/posts';
const COMMENTS_URL = 'https://jsonplaceholder.typicode.com/comments';

async function getCommentByUser(username){
    try {
        const { data: mainUser } = await Axios.get(`${USERS_URL}?username=${username}`);
        const { data: posts } = await Axios.get(`${POSTS_URL}?userId=${mainUser[0].id}`);
        const { data: comments } = await Axios.get(`${COMMENTS_URL}?postId=${posts[0].id}`);
        const firstComment = comments[0];
        console.log(firstComment);

    } catch (error){
        console.log('ERR! from -- ', error);
    }

}

getCommentByUser('Samantha');

⇒ Another Real Life Example of Async Await.

Async Await function returns the Promise it-self. So we can make .then .catch chaining of Async Await function calling.

// Another Real Life Example..
const Axios = require('axios');
const URL = "https://jsonplaceholder.typicode.com/users";

// Async Await to get data..
async function getUsers(){
    const { data: users } = await Axios.get(URL);
    return users;
}

// Make .then .catch promise from Async Await function..
// Async function returns the Promise.
getUsers().then((users) => {
    console.log(users);
}).catch((error) => {
    console.log(error);
});

Solution Of Callback Hell In JavaScript

Asad Anik — Mon, 10 Oct 2022 09:56:04 +0000

The Solution for callback hell we have figured out some concepts.

Promise
Async-Await

Promise can be the solution for the callback hell but after all it has own situation like the chaining of then, catch. And then we have figured out of this problem with Async-Await Concept. The Async-Await can help you from the multiple times chaining. Just write code like Synchronise way and it will handle the Asynchronous tasks as well.

Solution With Promise.

⇒ Example of Promise chaining.

Find User by username.
Find Posts by userId.
Find latest Post.
Find Comments by postId.
Find latest Comment.
Find User of the last Commented User.

→ Implementation.

/users?username=[username]
/posts?user_id=[user_id]
/comments?post_id=[post_id]
/users?username=[username]

// Solution Callback hell resolved with Promise..
const get = (url) => new Promise();

get(`/users?username=asadanik`)
    .then((user) => {
        return get(`/posts?user_id=${user.id}`);
    })
    .then((posts) => {
        const latestPost = posts[0];
        return get(`/comments?post_id=${latestPost.id}`);
    })
    .then((comments) => {
        const latestComment = comments[0];
        return get(`/users?username=${latestComment.username}`);
    })
    .then((user) => {
        console.log('Latest Comments user is -- ', user);
    })
    .catch(err => {
        console.log('ERR! of -- ', err);
    });

Not permanent, but this is the solution of Callback hell which is nested over times. But in this case, this is not nested hell but also this is chaining hell of .this Promise. Not so much difference between this 2 examples of data retrieving. But this is not hell chaining, this is easy to maintain and readable. This problem will solve with Async Await.

Real Life Example of Promise with .then chaining

We used https://jsonplaceholder.typicode.com this REST API website for using fake API to complete our example.
And we used Axios library to handle HTTP request.

/// Real World Example with Fake REST API..
// Example of Promise.
const Axios = require('axios').default;

const USERS_URL = 'https://jsonplaceholder.typicode.com/users';
const POSTS_URL = 'https://jsonplaceholder.typicode.com/posts';
const COMMENTS_URL = 'https://jsonplaceholder.typicode.com/comments';

Axios.get(`${USERS_URL}?username=Samantha`)
    .then((userResponse) => {
        const { data: user } = userResponse;
        return Axios.get(`${POSTS_URL}?userId=${user[0].id}`);
    })
    .then((postsResponse) => {
        const { data: posts } = postsResponse;
        return Axios.get(`${COMMENTS_URL}?postId=${posts[0].id}`);
    })
    .then((commentsReponse) => {
        const { data: comments } = commentsReponse;
        const firstComment = comments[0];
        console.log(firstComment);
    })
    .catch(error => {
        console.log('ERR! of -- ', error);
    });

So Let's see the solution of Promise Chaining
Solution Of Promise Chaining in JavaScript

Callback Hell In JavaScript

Asad Anik — Mon, 10 Oct 2022 09:46:12 +0000

Callback hell is a phenomenon that afflicts a JavaScript developer when he tries to execute multiple asynchronous operations one after the other. By nesting callbacks
in such a way, we easily end up with error-prone, hard to read, and hard to maintain code. Soln: Best code practice to handle it.

This is a big issue caused by coding with complex nested callbacks. Here, each and every callback takes an argument that is a result of the previous callbacks. In this manner, The code structure looks like a pyramid, making it difficult to read and maintain.

⇒ Example of Callback Hell.

Find User by username.
Find Posts by userId.
Find latest Post.
Find Comments by postId.
Find latest Comment.
Find User of the last Commented User.

→ Implementation.

/users?username=[username]
/posts?user_id=[user_id]
/comments?post_id=[post_id]
/users?username=[username]

// GetData..
function getData(path, cb){
    const data = []; // Somehow collect the Data..
    cb(data);
}

function getUserNameFromComment(username){
    getData(`/users?username=${username}`, (user) => {
        getData(`/posts?user_id=${user._id}`, (posts) => {
            getData(`/comments?post_id=${posts[0]._id}`, (comments) => {
                getData(`/users?username=${comments[0].username}`, (user) => {
                    // Then 😃 you can get latest user of comment.
                    console.log(user);
                });
            });
        });
    });
}

getUserNameFromComment("Mohammad Asad");

Real Life Example of Callback Hell.

We used https://jsonplaceholder.typicode.com this REST API website for using fake API to complete our example.
And we used Axios library to handle HTTP request.

/// Real World Example with Fake REST API..
// Example of Callback Hell.
const Axios = require('axios').default;

const USERS_URL = 'https://jsonplaceholder.typicode.com/users';
const POSTS_URL = 'https://jsonplaceholder.typicode.com/posts';
const COMMENTS_URL = 'https://jsonplaceholder.typicode.com/comments';

function getFunc(URL, cb){
    Axios.get(`${URL}`)
        .then((response) => {
            const { data } = response;
            cb(data);
        });
}

function getCommentByUser(username){
    getFunc(`${USERS_URL}?username=${username}`, (user) => {
        getFunc(`${POSTS_URL}?userId=${user[0].id}`, (posts) => {
            getFunc(`${COMMENTS_URL}?postId=${posts[0].id}`, (comments) => {
                const firstComment = comments[0];
                console.log(firstComment);
            });
        });
    });
}

getCommentByUser("Samantha");

So Let's see the solution of callback hell
Solution Of Callback Hell in JavaScript

Functional Programming

Asad Anik — Mon, 10 Oct 2022 09:38:49 +0000

In computer science, functional programming is a programming paradigm where programs are constructed by applying and composing functions.

Functional programming (also called FP) is a way of thinking about software construction by creating pure functions. It avoid concepts of shared state, mutable data observed in Object Oriented Programming. Functional languages empazies on expressions and declarations rather than execution of statements.

Functional programming is a style of programming that emphasizes the evaluation of expressions, rather than execution of commands. The expressions in these languages are formed by using functions to combine basic values. A functional language is a language that supports and encourages programming in a functional style.

Mainly the functional programming is the way of coding in expressions instead of coding in statements.

→ Function Expression vs Function Statement.

// Function Statement..
function sayName(){
    console.log('I am Rakhiyaatul Kubra');
}

// Function Expression..
const sayName2 = () => {
    console.log('I am Expression of Function');
};

Pure Function + Side Effects + Immutability.
Function Composition.
Higher Order Function ( HOF ).
Function Scope + Closure + Hoisting.
Callback Function.
IIFE (Immediately Invoked Function Expression).

Pure Function + Side Effects + Immutability

→ Pure Function.

// Pure Function..
function sum(a, b) {
  return a + b;
}

sum(10, 30); // 30

→ Side Effects.

It should not change the Mutable data. Cause of global scope of variable.

// Side Effects..
let limit = 100;

function changeLimit(limit){
  limit = 500;
  return limit;
}

changeLimit(limit);
console.log(limit); // 100

⇒ When it’s time to give without param. So it’s becomes the Impure function😃. And that is the side effect.

// Side Effects..
let limit = 100;

function changeLimit(){
  limit = 500;
  return limit;
}

changeLimit(limit); // 500
console.log(limit);

⇒ Pure function without Side Effect.

const arr = [1, 2, 3];

function add(data){
    arr.push(data);
}

→ And using of console.log() is also the Side Effect in the Function.

Function Composition.

Function composition is an approach where the result of one function is passed on to the next function, which is passed to another until the final function is executed for the final result. Function compositions can be composed of any number of functions.

// Simple example of function composition..
function r1(a, b){
    return a + b;
}

function r2(a, b){
    return a - b;
}

function times(a, b){
    return a * b;
}

let num1, num2, callStack;
num1 = 20; num2 = 5;
callStack = times(r1(num1, num2), r2(num1, num2));

console.log(callStack);

Higher Order Function ( HOF )

⇒ Function can be passed as an argument.

⇒ Function can be return from another function.

Hidden Concepts.

Scope
Closure
Function Context

→ Example of HOF.

function hFn(a, b){
    const sum = a + b;
    return sum;
}

→ Without HOF (Higher Order Function) Concept.

// Without Higher Order Function..
// Sum..
function sum(num1, num2, max = 100) {
  const rand1 = Math.floor(num1) * max;
  const rand2 = Math.floor(num2) * max;
  return rand1 + rand2;
}

// Sub..
function sub(num1, num2, max = 200) {
  const rand1 = Math.floor(num1) * max;
  const rand2 = Math.floor(num2) * max;
  return rand1 - rand2;
}

// Mul..
function mul(num1, num2, max = 10) {
  const rand1 = Math.floor(num1) * max;
  const rand2 = Math.floor(num2) * max;
  return rand1 * rand2;
}

sum(10, 20); // 3000
sub(30, 10); // 4000
mul(30, 20); // 60000

We did the easy and normal mode coding which is not very effective and not so efficient to clients. When they wants new feature and then it’s gone to break down or time consuming.

→ Little bit better than before.

// Without Higher Order Function..
// Random Numbers..
function genarateRandoms(num1, num2, max){
  const rand1 = Math.floor(num1) * max;
  const rand2 = Math.floor(num2) * max;
  return {rand1, rand2};
}

// Sum..
function sum(num1, num2, max = 100) {
  const { rand1, rand2 } = genarateRandoms(num1, num2, max);
  return rand1 + rand2;
}

// Sub..
function sub(num1, num2, max = 200) {
  const { rand1, rand2 } = genarateRandoms(num1, num2, max);
  return rand1 - rand2;
}

// Mul..
function mul(num1, num2, max = 10) {
  const { rand1, rand2 } = genarateRandoms(num1, num2, max);
  return rand1 * rand2;
}

sum(10, 20); // 3000
sub(30, 10); // 4000
mul(30, 20); // 60000

It’s great but not the Higher Order Function. We have to make this into the HOF for perfect example to understand what is Higher Order Function.

Function can be passed as an argument

⇒ Finally with HOF ( Higher Order Function ).

// With Higher Order Function..
function genarateTwoRandomNumbers(max, cb){
    const random1 = Math.floor(Math.random() * max);
    const random2 = Math.floor(Math.random() * max);
    const result = cb(random1, random2);
    return result;
}

// Sum..
genarateTwoRandomNumbers(100, (rand1, rand2) => {
    return rand1 + rand2;
});

// Sub..
genarateTwoRandomNumbers(10, (rand1, rand2) => rand1 - rand2);

// Mul..
genarateTwoRandomNumbers(20, (rand1, rand2) => rand1 * rand2);

The perfect example of HOF Higher Order Function. And It follows ⇒ Function can be passed as an argument. Also known as CallBack Function.

Function can be return from another function

⇒ Now let’s see how functions can be return from another function.

// Function returns the another function..
const power = (p) => {
  return (n) => {
    let result = 1;
    for (let i = 1; i <= p; i++){
      result = result * n;
    }
    return result;
  };
};

const sqr = power(2);
const cube = power(3);

console.log('Square of 2 -> ', sqr(2));
console.log('Square of 3 -> ', sqr(3));

console.log('Cube of 2 -> ', cube(2));
console.log('Cube of 3 -> ', cube(3));

A function returns another function, and there is the functions sequence. It follows ⇒ Function can be return from another function.

→ Another way of doing this.

// Function returns the another function..
const power = (p) => {
  const operation = (n) => {
    let result = 1;
    for (let i = 1; i <= p; i++){
      result = result * n;
    }
    return result;
  };
  return operation;
};

const sqr = power(2);
const cube = power(3);

console.log('Square of 2 -> ', sqr(2));
console.log('Square of 3 -> ', sqr(3));

console.log('Cube of 2 -> ', cube(2));
console.log('Cube of 3 -> ', cube(3));

We can working with return the functions statements rather-then returning full function.

→ Also we can call like this way — power()(); → power(powerArg.)(operationArg.);

// Function returns the another function..
const power = (p) => {
  const operation = (n) => {
    let result = 1;
    for (let i = 1; i <= p; i++){
      result = result * n;
    }
    return result;
  };
  return operation;
};

console.log('Square of 4 -> ', power(2)(4)); // 16
console.log('Cube of 2 -> ', power(3)(2));   // 8

→ And this is the Normal way of doing the things. Without functional programming.

// Sqrt..
const sqr = (n) => {
  return n * n;
};

// Cube..
const cube = (n) => {
  return n * n * n;
};

console.log('Square of 2 -> ', sqr(2));
console.log('Square of 3 -> ', sqr(3));

console.log('Cube of 2 -> ', cube(2));
console.log('Cube of 3 -> ', cube(3));

This is the example without functional programming.

Function Context / Execution Context

⇒ Function or, Execution Context here. It follows the Stack Data Structure’s concept.

// The Execution Context..
/// our coding contest here...
function A(){
  console.log('I am A');
}

function B(){
  A();
}

function C(){
  B();
  B();
}

function D(){
  C();
  A();
}

D();

This CallStack Function Context will show you with VS-Code (Run and Debug) if you are using with easy way. And it’s totally understanding things, without understanding you will not able to know how the functions callStack actually works and what is the Execution Context of functions.

Function Scope + Closure + Hoisting

The function scope is the block of statements, where codes are secure & safe into the scope. When the statement is not exists into current scope so it’s should search for it’s parent scope as well.

→ JavaScript Lexical Scoping.

A lexical scope in JavaScript means that a variable defined outside a function can be accessible inside another function defined after the variable declaration. But the opposite is not true; the variables defined inside a function will not be accessible outside that function.

When the statement is not exists its own scope so it should search for it’s parent then again if not found? Again it’s try to searching it’s parents → parents as well. Then we call this is Lexical Scoping in JavaScript.

// Example of Lexical Scoping..
function main(){
    let num1 = 5;

    function childFunc(){
        console.log(num1);
    }
}

JavaScript Closure

In JavaScript, a closure is a function that references variables in the outer scope from its inner scope. The closure preserves the outer scope inside its inner scope. To understand the closures, you need to know how the lexical scoping works first.

A closure is a function that preserves the outer scope in its inner scope.

⇒ Example 01.

/// Example 01 of Closure..
function greeting(){
    let message = 'Hi';

    function sayHi(){
        console.log(message);
    }
    return sayHi;
}

let hi = greeting();
hi(); // still can access the message variable

⇒ Example 02.

/// Example 02 of closure..
function greeting(message){
    return function(name){
        return message + ' ' + name;
    }
}

let sayHi = greeting("Hi dear, ");
let sayHello = greeting("Hello dear, ");

console.log(sayHi("Asad")); // Hi dear, Asad
console.log(sayHello("Akhiyaat")); // Hello dear, Akhiyaat

Hoisting of JavaScript

→ When you declared the function or variable after execution or definition, so it’s called hoisting. When you declare a function and you call the function before declaring it, it calls hoisting.

⇒ Example

// Hoisting..
func();

function func(){
    console.log(test);
}

var test = 'Something';

func();

undefined

Something

Callback Function.

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

// Example of CallBack function..
function sayName(name){
  console.log(`My name is ${name}`);
}

function takeUsername(callBack){
  const userName = prompt('Please enter your name : ');
  callBack(userName);
}

takeUsername(sayName);

→ Or this way.

// Example of CallBack function..
function takeUsername(callBack){
  const userName = prompt('Please enter your name : ');
  callBack(userName);
}

takeUsername(function(name){
  console.log(`My name is ${name}`);
});

IIFE (Immediately Invoked Function Expression)

An Immediately-invoked Function Expression (IIFE for friends) is a way to execute functions immediately, as soon as they are created. IIFEs are very useful because they don't pollute the global object, and they are a simple way to isolate variables declarations.

we can declaring IIFE with 3 ways.

IIFE.
Arrow Function IIFE.
async IIFE.

→ IIFE.

// IIFE..
(function(name){
  console.log(`I am ${name}`);
})('Samantha');

→ Arrow Function IFFE.

// Arrow Function IIFE..
((name) => {
  console.log(`I am ${name}`);
})('Rakhiyaat');

→ async IIFE.

// async IIFE..
(async function(){
    console.log('hello');
})();

(async function(){
    console.log('Hello');
})();

Resources:

Functional Programming: Concepts & Advantages

9 Functional Programming Concepts Everyone Should Know | HackerNoon

JavaScript Functions Deep Dive

Asad Anik — Mon, 10 Oct 2022 09:36:19 +0000

A function can also create with new keyword. And a function can assigning with multiple ways. And It’s called the Function Constructor. Function this is our function Constructor.

⇒ Simple Function..

// Function define & defination..
function strToObj(str){
    let obj = new Object();

    for (let s of str){
        if (s !== ''){
            obj[s] = s;
        }
    }
    return obj;
}

// Invoking function with calling..
console.log(strToObj("Asad Anik"));

⇒ Construct a function. This mode is awesome to working and declaring function inside the Runtime😎. And the Runtime makes it the normal function as well. This also known as Runtime Function.

→ Similar function with new keyword like creating an Object or calling Class’s Constructor method.

→ Syntax ⇒ new Function(Arguments, Body);

// Actual function in JavaScript Behid the scense..
const strToObj = new Function(
    'str',
    `let obj = new Object();

    for (let s of str){
        if (s !== ''){
            obj[s] = s
        }
    }
    return obj;`
);

console.log(strToObj("Asad Anik"));

→ With multiple params.

⇒ Syntax — new Function(Argument1, Argument2, ….., Body);

// Multiple arguments..
const mySum = new Function(
    'a',
    'b',
    `
        const sum = a + b;
        console.log(sum);
    `
);

// Calling & Invoking..
mySum(20, 10);

→ Also can code like this way.

// Take all data of function into an object.
const fData = {
    params: ['num1', 'num2'],
    body: ['const sum = num1 + num2', 'return sum']
};

// Bring body array to string body..
const fBody = fData.body.reduce((acc, cur) => {
    acc += cur + ';';
    return acc;
}, '');

// Calling Function Constructor..
const myOwnFunc = new Function(...fData.params, fBody);
console.log(myOwnFunc(20, 10));

Multiple Operations Constructor Function.

// Mutiple Operations Constructor Function..
const Operations = [
    {
        args: [10, 20],
        params: ['num1', 'num2'],
        body: `console.log("Operation 1:", num1 + num2)`
    },
    {
        args: [10, 20],
        params: ['num1', 'num2'],
        body: `console.log("Operation 2:", num1 - num2)`
    },
    {
        args: [10, 20],
        params: ['num1', 'num2'],
        body: `console.log("Operation 3:", num1 * num2)`
    },
    {
        args: [10, 20],
        params: ['num1', 'num2'],
        body: `console.log("Operation 4:", num1 / num2)`
    },
];

// Calling Stack..
Operations.forEach((operation) => {
    const fn = new Function(...operation.params, operation.body);
    fn(...operation.args);
});

Modern Tech World

Asad Anik — Thu, 06 Oct 2022 09:31:57 +0000

Modern world is depends on the SaaS (Services like Software As A Service), BaaS (Backend As A Service), IaaS (Infrastructure As A Service), and PaaS (Platform As A Service).

SaaS

Software as a service (or SaaS) is a way of delivering applications over the Internet—as a service. Instead of installing and maintaining software, you simply access it via the Internet, freeing yourself from complex software and hardware management.

Software as a service (SaaS) allows users to connect to and use cloud-based apps over the Internet. Common examples are email, calendaring, and office tools (such as Microsoft Office 365).

SaaS provides a complete software solution that you purchase on a pay-as-you-go basis from a cloud service provider. You rent the use of an app for your organization, and your users connect to it over the Internet, usually with a web browser. All of the underlying infrastructure, middleware, app software, and app data are located in the service provider’s data center. The service provider manages the hardware and software, and with the appropriate service agreement, will ensure the availability and the security of the app and your data as well. SaaS allows your organization to get quickly up and running with an app at minimal upfront cost.

⇒ There is the SaaS Hub called Product Hunt😎

Product Hunt - The best new products in tech.

⇒ Another is SaaS Hub☺️

SaaSHub - Software Alternatives And Reviews

SaaS is considered to be part of cloud computing, along with infrastructure as a service (IaaS),[5] platform as a service (PaaS), desktop as a service (DaaS), managed software as a service (MSaaS), mobile backend as a service (MBaaS), data center as a service (DCaaS), integration platform as a service (iPaaS), and information technology management as a service (ITMaaS).[citation needed]

SaaS apps are typically accessed by users using a thin client, e.g. via a web browser. SaaS became a common delivery model for many business applications, including office software, messaging software, payroll processing software, DBMS software, management software, CAD software, development software, gamification, virtualization,[6] accounting, collaboration, customer relationship management (CRM), management information systems (MIS), enterprise resource planning (ERP), invoicing, field service management, human resource management (HRM), talent acquisition, learning management systems, content management (CM), geographic information systems (GIS), and service desk management.

BaaS

Backend-as-a-Service (BaaS) is a cloud service model in which developers outsource all the behind-the-scenes aspects of a web or mobile application so that they only have to write and maintain the frontend.

Backend-as-a-Service (BaaS) allows developers to focus on the frontend of their applications and leverage backend services without building or maintaining them. BaaS and serverless computing share some similarities, and many providers offer both, but the two models have several differences.

⇒ So there are more Backend As A Service😎😎

—> 8Base

8base | Platform and Services for Web and Mobile Apps

—> Firebase

Firebase

—> AWS Amplify

AWS Amplify | Scalable, Full-Stack Web & Mobile Apps | Amazon Web Services

IaaS

Infrastructure as a service (IaaS) is a type of cloud computing service that offers essential compute, storage and networking resources on demand, on a pay-as-you-go basis. IaaS is one of the four types of cloud services, along with software as a service (SaaS), platform as a service (PaaS) and serverless.

Migrating your organisation's infrastructure to an IaaS solution helps you reduce maintenance of on-premises data centres, save money on hardware costs and gain real-time business insights. IaaS solutions give you the flexibility to scale your IT resources up and down with demand. They also help you quickly provision new applications and increase the reliability of your underlying infrastructure.

IaaS lets you bypass the cost and complexity of buying and managing physical servers and datacentre infrastructure. Each resource is offered as a separate service component and you only pay for a particular resource for as long as you need it. A cloud computing service provider like Azure manages the infrastructure, while you purchase, install, configure and manage your own software—including operating systems, middleware and applications.

⇒ Some IaaS Products☺️

What is IaaS? Infrastructure as a Service | Microsoft Azure

PaaS

What is PaaS? Platform as a Service | Microsoft Azure

Platform as a service (PaaS) or application platform as a service (aPaaS) or platform-based service is a category of cloud computing services that allows customers to provision, instantiate, run, and manage a modular bundle comprising a computing platform and one or more applications, without the complexity of building and maintaining the infrastructure typically associated with developing and launching the application(s); and to allow developers to create, develop, and package such software bundles.

Platform as a service (PaaS) is a complete development and deployment environment in the cloud, with resources that enable you to deliver everything from simple cloud-based apps to sophisticated, cloud-enabled enterprise applications. You purchase the resources you need from a cloud service provider on a pay-as-you-go basis and access them over a secure Internet connection.

Like IaaS, PaaS includes infrastructure—servers, storage, and networking—but also middleware, development tools, business intelligence (BI) services, database management systems, and more. PaaS is designed to support the complete web application lifecycle: building, testing, deploying, managing, and updating.

PaaS allows you to avoid the expense and complexity of buying and managing software licenses, the underlying application infrastructure and middleware, container orchestrators such as Kubernetes, or the development tools and other resources. You manage the applications and services you develop, and the cloud service provider typically manages everything else.

⇒ Some Platform As A Service hub

PaaS Orchestrator

Understanding The Backend MVC & SPA Architecture

Asad Anik — Thu, 06 Oct 2022 09:08:40 +0000

Backend is the backbone of an Application. You can say it should be any application like Android, iOS, Web, iOT, Robotics, Desktop, Games e.t.c Apps. Backend will definitely controls your application from back. Which people will never seen into inspect elements or else.

This is the system which can controls your application. You can create API or standalone Backend for specific Web or Mobile or you can developing or designing your own games backend too.

Actually backend will manage your applications data or states. And the backend can also communicate with Database.

Now we have some application development architectures like,

MVC Architecture ( Model View Controller ).
SPA Architecture ( Single Page Application ).

Also there is most popular Backend architecture besides of applications architecture we have like,

Monolithic Architecture.
Microservice Architecture.

MVC ( Model View Controller ) Architecture

This is the Backend’s most used and successful and traditional architecture. PHP also used this architecture on their framework call Laravel. But we can implements into any other language, frameworks like Express (Node.js), DJango (Python), Nest.js etc.

SPA ( Single Page Application ) Architecture

Single Page Application is most powerful and cross independent Backend architecture. Developed to focusing on not only developing web application. But also focused on any others application developments like: Mobile Application, Desktop Application, iOT Device, Web Application, Games, and more. Because this Backend should returns API (Application Programming Interface), that’s why any others application of Frontend should must understand this API and it knows how to communicate and deal with this.

React Native Environment Setup

Asad Anik — Wed, 05 Oct 2022 10:00:27 +0000

Environment Setup

We can also following the official Documentation for installing and setup React Native.

Setting up the development environment · React Native

Setup React Native CLI

⇒ Mac OS setup

Install Homebrew
Install Node NPM
Install Watchman
Install X-Code and X-Code command line tools
Setup iOS Simulator
Install Ruby and Gem with FFI and COCOAPODS dependencies
Initialize your first React Native project with React Native CLI
Run the iOS Simulator
Install IDE VS-Code and open your project then enjoy

⇒ Windows OS setup

Install Chocolaty
Install Node NPM
Install JDK (openjdk11)
Install Android Studio and setup Android Studio SDK, SDK Platform, Virtual Device
Configure the ANDROID_HOME environment variable
Initialize your first React Native project with React Native CLI
Run React Native Metro and android emulator
Install IDE VS-Code and open your project then enjoy

Setup Expo in Mac / Windows OS

Go to the React Native official website and open for installation is just easiest as like water.

Installation - Expo Documentation

Speed Testing Object VS Array Operation In JavaScript

Asad Anik — Tue, 04 Oct 2022 07:26:49 +0000

When you wants to working with collections of data, there is a conclusion between Object and Array. Sometimes Array works great and sometime Object works outstanding. We are going to testing these 2 things when million of data comes into an empty Array & Object, and how they perform. How many times they needs to update data.

Update operation speed comparisons.

Array updating speed with 5M. data

// Array..
const arr = [];

for (let i = 0; i < 5000000; i++){
    arr.push({
        id: I,
        value: `${i * 84}`
    });
}

// Updating data..
console.time('ARRAY SPEED');
let id = 4999998;
const findItem = arr.find(item => item.id === id);
findItem.value = 'HACKED BY ASAD ANIK';
console.timeEnd('ARRAY SPEED');

ARRAY SPEED: 48.817ms

Object updating speed with 5M. data

// Object..
const obj = {};

for (let i = 0; i < 5000000; i++){
    obj[i] = {
        id: I,
        value: `${i * 84}`
    };
}

// Updating data..
console.time('OBJECT SPEED');
let id = 4999998;
obj[id].value = 'HACKED BY RAKHIYAATUL KUBRA';
console.timeEnd('OBJECT SPEED');

OBJECT SPEED: 0.085ms

Delete operation speed comparisons.

Array’s Deleting speed.

// Array..
const arr = [];

for (let i = 0; i < 5000000; i++){
    arr.push({
        id: I,
        value: `${i * 84 + 77}`
    });
}

// Deleting data..
console.time('ARRAY DELETE SPEED');
let id = 4999999;
const index = arr.findIndex(item => item.id === id);
arr.splice(index, 1);
console.timeEnd('ARRAY DELETE SPEED');

ARRAY DELETE SPEED: 49.457ms

Object’s Deleting speed.

// Object..
const obj = {};

for (let i = 0; i < 5000000; i++){
    obj[i] = {
        id: i,
        value: `${i * 84 + 77}`
    };
}

// Deleting data..
console.time('OBJECT DELETE SPEED');
let id = 4999999;
delete obj[id];
console.timeEnd('OBJECT DELETE SPEED');

OBJECT DELETE SPEED: 0.084ms

Reduce Vs Map, Filter method.

Reduce is more powerful method than Map and Filter. Let’s see the prove.
→ Map, Filter

const arr = [];

for (let i = 0; i < 5000000; i++){
    arr.push(i);
}

// Not Optimised operation..
console.time('MAP_FILTER');
arr.filter(item => item %2 === 0).map(item => item * 2);
console.timeEnd('MAP_FILTER');

MAP_FILTER: 153.749ms

→ Reduce

const arr = [];

for (let i = 0; i < 5000000; i++){
    arr.push(i);
}

// Optimised operation..
console.time('REDUCE_WAY');
arr.reduce((acc, cur) => {
    if (cur %2 === 0){
        acc.push(cur * 2);
    }
    return acc;
}, []);
console.timeEnd('REDUCE_WAY');

REDUCE_WAY: 89.065ms

Decision making

→ When is time to build an Application, so we have to decide about its task. Is your Application are handling lots of traversing ? ⇒ So go for working with Array Operations in the most case. it’s totally fine.

→ And if your Application handles lot’s of CRUD operations like Create, Retrieve, Read, Update, Delete ? ⇒ So go for working with Object Operations in the most case. It’s fine.

Nullis Operator In JavaScript

Asad Anik — Tue, 04 Oct 2022 07:16:51 +0000

Nullis Operator

When it got Null Or Undefined Data Type, Then this should return false and never executes the value. Whenever it will get All Falsely values also that not restricts anyone.

const iAmAStudent = false;
const isValid = iAmAStudent ?? 'Okay'
console.log(isValid);

This will return you ‘Okay’ because there is only restriction for Null & Undefined value. And all over the truly and falsely value is actually not restriction for this.

What is JavaScript Short Circuit?

Asad Anik — Tue, 04 Oct 2022 07:08:30 +0000

Let’s talk about JavaScript / React Falsely value ignorance. It’s call JavaScript Short Circuit Evaluation. In React we can learn and we also know about how to developing Applications. But We don’t know about some special things like JavaScript Short Circuit.

In JavaScript short-circuiting, an expression is evaluated from left to right until it is confirmed that the result of the remaining conditions is not going to affect the already evaluated result.

And there is 2 types of short circuits.

And Short Circuit
Or Short Circuit

And Short Circuit

When we are saying if something is there so do like this specific work or if you here then i will go. 🙄 I know that seems confusing here. So let’s see the real world example.

const iAmAStudent = true;
iAmAStudent && console.log('Yes you are a student!');

So here we saw the and short circuit example, there is a log with iAmAStudent value when true. 😎

Or Short Circuit

When the decision is for just looking up choice who is 💝 present right now, then this will execute. This is actually the conditioning stages value.

const HOST = process.env.HOST || 'localhost';
console.log(HOST);

Here we can see the useful example of or short circuit. If you have the value of process.env.HOST so okay it’s fine 🙃 but if you don’t has the .env value so it will set the ‘localhost’ for you.