DEV Community: Manas Mishra

Do you know Javascript ?

Manas Mishra — Sun, 13 Feb 2022 18:21:09 +0000

We already know that javascript is single threaded, but the way it works is totally different from other programming languages like C and Java.

The Event Loop

Javascript has a runtime model, which is based on an event loop. It's responsible for three things:

Executing the code.
Collecting and Processing Events
Executing Queued tasks (actually sub-tasks).

Stack

function foo(b) {
  let a = 10
  return a + b + 11
}

function bar(x) {
  let y = 3
  return foo(x * y)
}

const baz = bar(7) // assigns 42 to baz

In the above example, the order of operation will be in the following manner.

When bar is being called, the first frame is created, which was containing references to bar's argument and local variables.
When bar calls foo, a second frame is created and pushed on top of the first one, containing references to foo's arguments and local variables.

Heap

Objects are allocated in a heap which is just a name to denote a large (mostly unstructured) region of memory.

Queue

A JavaScript runtime uses a message queue, which is a list of messages to be processed. Each message has an associated function that gets called to handle the message.

At some point during the event loop, the runtime starts handling the messages on the queue, starting with the oldest one. To do so, the message is removed from the queue and its corresponding function is called with the message as an input parameter. As always, calling a function creates a new stack frame for that function's use.

The processing of functions continues until the stack is once again empty. Then, the event loop will process the next message in the queue (if there is one).

Adding Messages

The function setTimeout is called with 2 arguments: a message to add to the queue, and a time value (optional; defaults to 0). The time value represents the (minimum) delay after which the message will be pushed into the queue. If there is no other message in the queue, and the stack is empty, the message is processed right after the delay. However, if there are messages, the setTimeout message will have to wait for other messages to be processed. For this reason, the second argument indicates a minimum time—not a guaranteed time.

const seconds = new Date().getSeconds();

setTimeout(function() {
  // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
  console.log(`Ran after ${new Date().getSeconds() - seconds} seconds`);
}, 500)

while (true) {
  if (new Date().getSeconds() - seconds >= 2) {
    console.log("Good, looped for 2 seconds")
    break;
  }
}

Final Words

The above article codes are being taken from MDN docs about the event loop

YUVA: A Component Based React Library

Manas Mishra — Fri, 28 Jan 2022 10:16:22 +0000

I started developing my first React Based Library, which is by now, is just a side project.

You can consider this series, as the progress of YUVA, as a library, which I will keep updating in this series, every week.

Current Status of the Project

Created a Button component, in which you can pass title and type prop. title: You can pass title as a prop get text inside the button.

<Button title="Yuva" />

which will be shown like the below button

type: If you need, eithher primary button, or ghost button, info buttons etc. You just have to pass type as a prop, and then you can call any type of pre-defined button.

<Button type="primary" title="Manas" />
<Button type="success" title="Manas" />
<Button type="warning" title="Manas" />
<Button type="danger" title="Manas" />
<Button type="info" title="Manas" />
<Button type="text" title="Manas" />
<Button type="ghost" title="Manas" />
<Button type="raised" title="Manas" />

Only this is being done by now, and planning to increase more functionality in the Button prop.

Apply Filter while redirecting links using React.JS and Umi.JS

Manas Mishra — Tue, 18 Jan 2022 12:35:15 +0000

Recently, working on a project (Which is built using ReactJS and routing is based on Umi.JS). And, I got a scenario where, I created a statistics page (in which I am showing the count of every different type of data of a particular category), and then I have to create a button of each category, which should push to that particualr category page (using history.push()).

Now, initially, when I click over "View Complaints" button then it used to just take me to Complaints page.

Now, what I want to do is when I click on the "View Complaints" then instead of just pushing the history to that specific page, it should even pass the specific branchId as a query, which will behave as a filter over the pushed page (complaints page).

What I did?

At first, I focused on the button to be clicked, which means "View Complaints" Page.

At first, my button code was looking like this...

 <Button
  type="primary"
  onClick={(event) => {
  event.stopPropagation();
  history.push(`/complaints/all`);
  }}>
  View Complaints
 </Button>

As, I already mentioned that I have to send branchId as a query to apply filter, so I have to send the query with the path, inside history.push() and now, it looks like this.

<Button
type="primary"
onClick={(event) => {
event.stopPropagation();
history.push({
pathname: `/complaints/all`,
query: {
branchId: profileId,
  },
 });
}}>
View Complaints
</Button>

and now with this thing, it will pass query, when you click on the button.

But, this will still not apply the filter, and for that, I have to pass query to the filter function, which is eventually getting the filtered data from the API.

import { useLocation } from 'umi';

const { pathname, query: branchQuery } = useLocation();

and then, I am calling the query inside the function, where we are dispatching the API, with the query as a payload.

const getFinishedComplaints = () => {
    let query = {
      statusId: 'CRQ_CLOSED',
      customerId: currentUser?.personal_details?.organizationDetails?.orgPartyId,
      keyword: searchText,
      startIndex: completeStartIndex,
      viewSize: completeViewSize,
    };

    if (branchQuery?.branchId) {
      query = { ...query, branchId: branchQuery?.branchId };
    }

    dispatch({
      type: 'product/getFinishedComplaints',
      payload: {
        query,
      },
    });
  };

And, in this way, you can easily apply filter functionality, by passing query using history.push() of Umi.js.

Alternative way

You can even use react-router-dom for above given functionality.

AngularJS is dead.

Manas Mishra — Sat, 15 Jan 2022 06:52:05 +0000

Yes, you read it right. AngularJS is dead now. The first version of Angular, is not being supported by Angular any more. Angular Developer, published an article over "The Angular Blog", that they are discontinuing the Long Term Support for AngularJS (check here).

Angular Team recommend developers and businesses, who are using AngularJS to switch to the successor of Angular JS, which is Angular. Currently, they released Angular v13, but if you are using any angular version, other than the first one, which is actually Angular JS, then you are safe to work with it. But, if your project is still in AngularJS, then this article will help you to migrate it to Angular.

Here’s what you can expect as a part of this new long term state:

CDN links will remain active and AngularJS.org will remain online
We’ll provide read-only access to the code, issue, and pull request history on GitHub by archiving the angular.js repo and related repositories (that is, AngularJS Material, bower-material, etc.)
The AngularJS npm packages will remain on npm and bower, marked as deprecated

AngularJS set a solid foundation for Angular and helped define the future of the web, because many of us, who are web developers, learnt Angular as it's first Javascript framework.

New Technologies to learn in 2022 as a Web Developer

Manas Mishra — Wed, 12 Jan 2022 06:50:48 +0000

2021 has been a great year for Web Developers, even when Pandemic hits the whole world, Web Development as a technology was keep growing and we saw a lot of different changes last year. NextJS 12 was released, with Rust Compiler and Native ES Module support. React 18 was being announced, with new API's like startTransition and even it included its own React Compiler. Web 3.0 was trending, MicroFrontends was trending, Rust was on the trends (since 3 years) and many more things. So, as a Front-End Web Developer, I decided that this year, I will learn some of the tehcnologies that will obviously increase my skill as a developer, but it will even give me more chance and ways of completing a complex project.

1. Node.JS
When you work in a company with bunch of different people, working on bunch of different technologies, then you always get stuck at a point that it would have been better, if I know atleast that technology, so that I could have been known about this particular issue, and may be able to solve it too.
As a front-end developer, Backend always fascinates me but I never got the chance to learn it. But, as a web developer, it good to have a knowledge of frontend as well as backend. So, I decided to learn Node.JS this year.

2. Web AR
You read it right, I decided to learn Web AR in 2022, because Augmented Reality is the future, and with the help of this technology I can create interactive e-commerce websites, where you can try clothes directly on your body, using your phone.
Websites like Spatial are offering virtual meeting rooms where you can interact with your coworkers. Virtual reality and augmented reality technologies work fine with mobile apps, but WebAR technologies make it possible to experience it on web browsers. It lags in speed and cross-browser compatibility, which will come with improvements over time.

3. Flutter
My company works with React Native for client projects, but now they are planning to start with Flutter, and this is one of the reason, I started learning flutter (As I need to work on them). As a React Developer, its easy for me to learn React Native, but I love flutter for its continuous updates, fascinating community and its much faster then React Native. React Native even offers you two different way of creating project, Native and Expo but flutter gives only one, and thats the another reason that why I chose flutter, as many option creates confusion.

4. Advance Algorithms
It's may not a technology, but its necessary for me now. I heard many front-end web developers who say that DSA is not needed in Front-End Web Developement, but its not true. If you want to make a comment section like instagram, then you need to know the recursion, because thats what is going to help you to create infinite nested comments.

5. MongoDB
If I will learn NodeJS, then what's the use of a backend, without a database. And Node and MongoDB go hand-in-hand with React. I could have learnt SQL, but, Table based database, may be a little bit tough for me, and as MongoDB is offering Documents based DB, with many differnt features, like $lookup, $unwind etc, which ease the task.

That's all from my side. I chose less technologies to learn this year, but I will make sure that I will learn and implement it nicely.

The Better Way of Sending Data to the Backend

Manas Mishra — Sat, 08 Jan 2022 07:11:03 +0000

If you are a front-end developer, who ever worked on picture uploading, video uploading or audio uploading to the backend, then you should know that uploaind these types of data is a slow process, and it even becomes laggy when a large data is being upload at once.

When we want to upload a picture or audio to the backend, we can't just send it to the backend in their original format. Every picture or audio, has a binary format, which is first being converted to base64 format in the frontend, which is then being sent to the backend, and if you want to get the data again from the backend, then you can't show it on the frontend, in their base64 format, which means that with every GET request, the backend have to convert the data from the base64 to the binary, and then it perfomrs GET request.

You can cleary see, that it's a two time conversion. First from binary data to base64 data and then again from base64 to binary data, and eventually this process takes large data to upload slowly.

But, there's always a solution. What we have to do instead of converting it to base64 in the frontend, is sending binary data directly to the backend, which means that even backend don't have to convert it in any way, which makes the process fast.

But, now the question is that how to do that?

You can use FormData() constructor to send binary data directly to the backend.

At first, you have to create an instance of the formdata.



var formData = new FormData();

and then you have to append the data to the formData.



formData.append('username', 'Chris');

Let's take an example.



const sendAudioAsync = (audioChapter, index, audioBookId) => {
    message.warning(`Uploading audio ${index}`);

    const sendingAudio = new FormData();
    sendingAudio.append('audio', audioChapter?.audio); 
    sendingAudio.append('size', audioChapter?.audio?.size); 
    sendingAudio.append('name', audioChapter?.audio?.name); 
    sendingAudio.append('title', audioChapter?.title); 
    sendingAudio.append('time', audioChapter?.time);
    sendingAudio.append('index', index); 
}

The above example is the real time example of the client I am working for, in which I have to send audio and its detail to the backend, and I used FormData to send it.

FormData is always in key value pair, and you have to put a name and the data as key value pair, if using FormData to send binary data directly to the backend.