DEV Community: Anguram Shanmugam

Event Loop

Anguram Shanmugam — Wed, 19 May 2021 17:01:56 +0000

Disclaimer: This article is all about event-loop. It may have soo many dependency articles or too little. But It will confuse you like christopher nolan movies. So, Save your brains✌

Let's Begin 🚀

EventLoop

In a nutshell it's a loop. But differ from other loops i.e., from movies or traditional loop(for, while). Because, you can't write this eventloop. In nature it's declarative. I know you won't get nothing with the definition above 🤷‍♂️.

It's Okay let's go for an analogy tour. Let's use flash from DC Comics. If anyone not familiar with "flash". He's speedster, nerd, moron, who got superpower from lighting. Not only that it makes him run like thunder.
If you think that you don't get it. Just see the intro of any episode. Same blah blah blah for every episodes😒😒😒
The Flash Series | Intro

There's an episode in flash which very opt for this article. But I don't wanna stack you with these sci-fi stuffs. So, Imagine flash running on a Athlete track with his lighting speed⚡

According to flash he see stuffs too slow which is completely opposite for us. So, I let's make him to do some stuffs.
For example: I want him to capture photo of 734th seat in the stadium and also I want him to change lane for every time he take photo of 734th seat in the stadium.

I don't want you to calculate. Just letting you know his capability⚡
This is event-loop. It runs on it's track by doing the tasks/process in the main thread.

Main Thread?

Don't worry this is not gist article. Trust me!

In nature JavaScript is single-threaded i.e. it runs in single procress of CPU's bunch of processes. Process are called thread. Because it's good to have a convention which stick tight to the processor POV. Each core are compatible for certain limit of threads and virtualization, etc,. that's processor side which we don't really need here.

The thing is simple. The app you're running which is built in javascript runs only in one thread. That thread is known as main thread and that's where event-loop a.k.a flash now runs😅 just joking!. But here's the nolan twist for you 🤗. Well it's not totally true.

Well the main purpose of the eventloop is to stick with main thread. So, whenever you pass a task which need more time to process. Then the eventloop will mark it and sends it to the engine i.e. JavaScript Engine. The engine runs the process and let the eventloop know when it's done. Then eventloop get the finished process from engine and do it's stuffs.

If you still struggling to wrap your head around?
Okay, I told you above, That there's an episode in flash which is very opt right!
watch the below youtube video.

See! The main thread a.k.a is not protaganist anyway😂.
just kidding. he is. Then why do we need a thread like 'savitar' anyways right?

Well It turns out. We need it. because nowadays I don't wait to see the above video loading for even a second. I need that blazing fast performance✨ out of everything. because CPU's gettings shrink to 2nm & even smaller (Anyway it don't know what is corona! I need to declare that 🤷‍♀️)

So, Threads will take care of that heavy lifting. Event-loop will let the Engine know about the process and engine creates or use another thread(like Poor Savitar😅) then join it to the main thread.

But Actually how this works in JavaScript?

JavaScript has three concepts that we need to know first.

Promises
callback
async await

Here's an free token to get out this article. You can either watch the below youtube videos to getting professional level knowledge(see it in order) or if you're good with me then trust I'll save you 🤗

Back to article

If you're reading still. Thanks mate for trusting me🤧

Promises

It's nothing but the promise your girlfriend/boyfriend made to you😂. Either It'll be fulfilled or rejected a.k.a fake promise🤣.

Yeah, It's true. let me show you.

const myLovePromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('foo');
}, 300);
});

myLovePromise
.then(handleResolvedA, handleRejectedA)
.then(handleResolvedB, handleRejectedB)
.then(handleResolvedC, handleRejectedC)
.catch(err => { console.log(err) });

Every promise will have two parameters. Using this we can attach many function/operations depending on a single promise. This process is called promise-chaining.

Callback

It's the cool feature I've ever seen. A Callback function is just function. But passed an argument. See 😃 it's freakin awesome right!

// normal function
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

// function which accepts a function as parameter: myCallback
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

// Passing function as a parameter
myCalculator(5, 5, myDisplayer);

If you need a simple and sweet example. Take setTimeout Function. All need to do is to pass your operations in as function with the delay.

Async Await

This is an syntatic sugar for promises. After using the above method for some time. You'll realise that you are just pouring code in a single block. Instead of adding more readability to the code. That's where async await come in to picture.

Finally

As it turns out event-loop handle these three concepts efficiently by catagorize them as Microtasks and Macrotasks. Each are treated in each way. For an elaborated explanation use MDN Docs.

So, Eventloop in JavaScript is crucial when it comes to task management. In server-side with the help of NodeJS, You can play with the eventloop to get a good picture out of it.

Hope I confused you most enough with my explanation.

Some developers openly stated in many videos, articles that JavaScript confusable and non-sensicle language.

But If you ask me! 🤷‍♀️

Com'on mate, It's a friendly programming language.

Learn Fullstack | 2021

Anguram Shanmugam — Wed, 19 May 2021 04:32:09 +0000

This article focus on Fullstack web development. So, Don't blame me for the "anaconda article".

If you're not using React or using Angular/Vue. It's totally fine and will be compatible for you. You can start with idea and gist that I provide. Then Ladder up your skills with your taste 😉.

let's begin 🚀

Fullstack web development

According to W3Schools:

A full stack web developer is a person who can develop both client and server software.

In addition to mastering HTML and CSS, he/she also knows how to:

Program a browser (like using JavaScript, jQuery, Angular, or Vue)
Program a server (like using PHP, ASP, Python, or Node)
Program a database (like using SQL, SQLite, or MongoDB)

But If you ask me. An fullstack devloper is a "wizard" in web dev universe. Because you can do literally everything from backend to frontend. So, Enough about the inaugurals.

Learning Curve

There's a gotcha though i.e. the "Learning Curve". It's High if you look as a big picture. The first thing is to breakdown/compartmentalize your stack(Stack is nothing but like a stack of cards. But here each card is each tech e.g. React is an Tech in your tech Stack.)

People will usually tell don't start with library or framework. Just start with Plain HTML, CSS, JAVASCRIPT.

Of course, It's crucial to have a crisp knowledge on Fundamentals. Because the reason is very simple. End of the day you'll be working on a Enterprise. In which you probably work for your company on a budgeted project. So, All your knowledge will be compromised for their requirements. You may learn in way that suits you. But it won't fit on their belts and they'll shape it according to their needs. For example: You learn modern database system. But what if your project have that old SQL system. will you fit in?

The thing you missed probably is 'Standard'. The more standard you're, The more flexible you'll be. So, immediatly don't start from Assembly language😂. Just keep this in your mind. You'll know these in long run.

Checkpoint Reached

If you're this far. congratulations🙌. You have the patience to master the full stack.

Frontend

If you're a beginner and new to programming world. Start with HTML, CSS, JavaScript.

w3schools is the best resource for newbies. But if you wanna be sassy😎 in it. Here are my recommendations.

Some CSS related link will help in learning process

For JavaScript

JavaScript.info Beginner Friendly
MDN Docs

Wanna get more sassy!

use MDN for everything 😂 MDN Docs
Learn TypeScript for making better JavaScript codes

Now you're strong enough to survive in web-dev-world. But that's not enough. why?

Frontend Framework

However we're going work with more and more pages and logics right?

So, we need some tools or heavy-lifters to get things done in a organized and maintainable way for long-run. So, we're going to use library/Framework in it.

Here comes the problem of 'This or That'.

Which framework library should I learn?
Which is best?

The question is more like Batman or Ironman, Superman or Thor. Each of them is best in their universe. So, It's not necessary to stick with one. Also remember, End of the Day it's all corporate.

Don't put all your apples in one basket! - EDWARD SNOWDEN

If you're beginner. Not in programming, But in web dev. Start with React. Since, it has good community and learning curve too simple. Once you got the hold. Try Vue, Svelte, Gatsby, Next.js, etc,.

Checkout this youtube channel. It's awesome "one stop shop" for React:
CODEVOLTION

Backend

oof! finally the second-half 😒kill me right!

Here's the another 'This or That'.

which language for backend?
Is node.js is secure like java, Python?
SEO, ORM, blah blah.

😂 This is were I stuck myself for long time. It's a black hole if you're learning on your own.

The only way is start with one. Once you got the rhythm then learn new things. Have a standard knowledge about one thing(helps you in crucial scenario).

My recommended resource for NodeJS:

Node.js with REST_API

API is the most vital part

NOTE: You don't really need to learn Database side to learn BACKEND just know why's and what's. when you're doing things that you do!
Learn graphql because most of the enterprises moving from REST to GraphQL. It's more like JQuery thing!.

GraphQL is simple when you keep things simple.

Database side

I know it's killing you already. But com'on guys!

You may pick whatever you want. Unless or untill your boss thinks that you're a moron😂. Yeah that's true modern database can do anything.

For example: If you see SQLite. It store every data not as traditional table format but as files.
But If you proposed this idea to an enterprise which has terabytes of data!. you'll be kicked out of the office right away. I'm not trolling SQLite 😅😅😅 anyway some enterprise using SQLite.

My Recommendation is Go for MongoDB or PostgreSQL. Both awesome, beginner friendly, had good community support.

After learning all the above go for these link: https://fullstackopen.com/en/

It's an anaconda article, I know. But I need to make sure that the content I provide is pretty good and meaningful.

Have a blast🎉. Never get tired. If you got just watch something that get you out of the box for sometime!

React or React Native?

Anguram Shanmugam — Tue, 02 Mar 2021 09:00:45 +0000

Hey 👽's

I started React-Native for two todays. Which is very easy since it has same ReactJs features.

But now I'm confused. Because the styles and codes are totally native codes. How Can I achieve the cross platform support feature i.e., Web.

Also the doc specifies about React-Native_web.

What's the Dealio?