Forem: Int_Shibin

Web rendering methodologies, a quick snap .

Int_Shibin — Wed, 30 Jun 2021 14:28:27 +0000

When it comes the performance tradeoffs in application development , rendering methodologies plays an important role.
Generally we classify this as server side rendering and client side rendering but there is more to it. for a detailed study anyone can refer this link https://developers.google.com/web/updates/2019/02/rendering-on-the-web

But in this article i am trying to share a quick introduction to three types of the rendering .

Static rendering
Server rendering
Client side rendering

Before getting into the subject let us check the performance time gaps which we can take for guaging the efficiency of a web application.

TTFB (Time To First Byte) - time between clicking link and first bit of content coming in.

FP (First Paint) - The first time any pixel becomes visible to the user.

FCP (First Content Paint) - The time when requested content becomes visible.

TTI (Time To Interactive) - The time at which a page becomes interactive.

In Server rendering generally produces a first paint(FP) and first contentful paint(FCP) .Running page logic and rendering on the server makes it possible to avoid sending lots of javascript to the client. Which helps to achieve a fast TTI (Time To Interactive) .Primary drawback of SSR is that generating pages on server takes time, which can often result in slower Time To First Byte(TTFB).

Static rendering happens at build time offers a fast First Paint, First Content Paint and Time To Interactive assuming the client side js is limited.
Unlike server side rendering consistantly fast Time To First Byte since the HTML for a page doesnt have to be generated on the fly.

one of the drawback of the static rendering is that it individual HTML files must be generated for every possible Url.

Where as in client side rendering rendering pages directly in the browser using javascript. All logic , data fetching, templpating and routing are handled on the client rather than the server.
The primary downside to client side rendering is that the amount of javascript required tends to grow as an application grows.

Is Node multithreaded?

Int_Shibin — Sun, 13 Jun 2021 12:01:17 +0000

As we all know that javascript is a scripting language used for building web application. Node introduced to leverage the capacity of javascript to make it as a scalable network language.

As per official definition Node is an asynchronous event-driven JavaScript runtime. this is in contrast to thread based networking.

First let us make a basic understanding of thread and process's. The basic instance of a computer program is called a process. within a single process we can have multiple things called threads , threads are kind of set of instructions that computer CPU needs to do and Scheduling is the ability of OS to decide which thread to process at anyinstance in time. Urgent threads should not be waited for too long.

strategies use to increase the rate in which these threads are getting processed are

Add more CPU cores to the machine.
More closely examine the work that being done by each thread.

Now let us understand the design of node ecosystem

Node js ecosystem consists of three entities node js interface, v8 library and libUV library. Here 70 % of v8 and 100% of libUV is written in c++. Node leveraging functions from both these libraries. libUV is an open source c++ project gives node access to underlying O.S , file system and networking.
Process.binding() connect js and c++ functions . V8 connects values between js and c++ worlds.

Now we can come back to our thread discusisons. So node uses a hybrid implimentation of threading system . Node event model is based on an event loop. Whenever we start a node function it will run inside a event loop , which is truly single threaded. Node js simply enters the event loop, after executing the input script. nodejs exits the event loop when there is no more callbacks to perform.

For some expesive functions Node LibUV(c++) part decide to execute outside the single thread which is used for eventloop execution. For this execution we have a threadpool which is a series of four(by default and can be increase) threads that are used to execute computational intensified tasks

How thread pool fitting in node ecosystem ? , tasks running in the threadpool are consdered as the pending operation , which is considered as one of the three kinds of events which happens in the event loop other 2 are

pending timeout operations.
pending OS tasks.

So in this way we can conclude that Node is truly single threaded but few heavy function executions are taking place in the multi threaded thread pool.

References:
Node official document.
Udemy Nodejs: advanced concepts.

React, under the hoods.

Int_Shibin — Sun, 30 May 2021 06:54:58 +0000

In this article i am going to discuss about the basic functionalities and operational flow involved in the react rendering process. like all other peer front end library/ frameworks the basic architecture behind React is also a data driven architecture. Where we receive data from back end render it in client side and form visible UI. the difference of front end frameworks lies in the execution way of this transformation.

React doesn't update or work on the enitre DOM( Document Object Model) each and every time when there is a change in data/ state. instead in react it uses a sophisticated algorithm to reduce the cost of DOM operations is called Fiber algorithm(Reconcile).

I try to unravel the algoritham and point out few functions so that anyone can start dig the react source code by having a brief understanding.

Lets start with the render method , which is apparantly returns the so called 'virtual DOM' . Virtual DOM primarily consist of a tree of immutable react elements. There are diffenet kinds of react elements like class / functional components, hostcomponents, portals etc. Besides the tree of this react elements Framework creat a tree of internal instances which is called Fiber.

React Fiber is getting created in reconciliation , during this execution every react elements returned from render method creates a corresponding Fiber node . Fibers are mutable datastructure that holds component data structure and DOM

All the Fiber nodes are connected through a linked list. First time react element moved to fiber and for the subsequent updates react reuses the same Fiber. When react working on first time render/update there will be two trees current and WIP. Fiber node object have all the necessery details require for the work to perform on that node or connected nodes( Through effect list). few of the fields are alternateTag, effectList and stateNode rest of the fields you can explore in the source code .

Reacts performs work in two phases.

Render
Commit

Render refering the first time creation of the fiber and subsequent updations on the same fiber.
result of this phase is the tree of fiber nodes marked with side effects. It can be asynchronous.

In Commit phase React takes the fiber nodes which is marked with effects and appliens them to the instances . in this phase goes over the list and performs DOM update which is visible to the users , because of that it will always be synchronous.

Main functions in Fiber node work loop( Where the nodes are getting processed) are

performUnitOfWork.
beginWork.
completeUnitOfWork.
completeWork.

in the execution variable nextUnitOfWOrk holds a refernece to the node in WIP it checks for the next node , the performUnitOfWOrk which then fetch the node. once it got the node it starts the execution which always return next child in the process if available or null. if a next child available then assign the refernece to nextUnitOfWOrk variable. once the work finishes backtrack execution starts to fetch next branch or sibling. which is done by completeUnitOfWork.

Refernce:
https://indepth.dev/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react

Linked list in javasript

Int_Shibin — Thu, 06 Aug 2020 10:25:46 +0000

Linked list as an integral part of software engineering learning has a huge impact on every engineers career. It is important to have a deep understanding of various datastructures and their ability to solve different types of problems.
Linkedlist is a linear datastructure in which each element is a seperate object. unlike array linked list is dynamic datastructure, meaning the memory allocated has flexibility to grow or shrink. Developer has the power to do that.
Linked list diffrentiated into two

SinglyLinkedList- which has only next property in node.
DoublyLinkedList- which has both next and prev property in it's node class, >dll is more flexible when it comes to the reverse traversal.

In this article we are going to use singlyLinkedList. Okey then let's dive into the concepts and implimentations.

Let us call each linked list element as node , each node has a data and a reference to next node .Last node has a reference to null.

A node 'll look like this

class Node{
  constructor(data){
    this.data = data;
    this.next = null
  }
}

To define a linked list another class need to create

class LinkedList{
  constructor(){
    this.head = null;
  }
}

and a method addEl for making a connected links of these nodes. in this method we have two conditions, one to add element in empty linked list another to add element to existing linked list which has nodes.
In the later condition we need to traverse through the linked list till the last element to add a new node with a data

addEl(data){
    let newNode = new Node(data),current;
    if(!this.head){
      this.head = newNode;
    }else{
      current = this.head;
      while(current.next){
        current = current.next
      }
      current.next = newNode;
      newNode = current
    }
  }

For traversing linkedlist need to set a pivot/current node, for moving forward or backward we need to replace the current node.

Let us move on to delete operation now

deleteEl(data) {
    if (this.head == null) {
      return false;
    } else {
      let current, temp;
      current = this.head;
      if (current.data == data) {
        this.head = current.next;
      } else {
        while (current.next.data != data) {
          current = current.next;
        }
        temp = current.next;
        current.next = temp.next;
      }
      this.size--;
    }
  }

here if data passed is valid then we have to again traverse through the linkedlist to fetch the node unless we have the data available in the head itself.Once we find out the data we need to rearrange the chain by linking previous node and next node of the deleted node.

Finally we can analyse reverse operation in linked list

reverseLinkedList() {
    let nodes = [],
      current,
      node;
    current = this.head;
    while (current) {
      nodes.push(current);
      current = current.next;
    }
    let revLl = new LinkedList();
    revLl.head = nodes.pop();
    current = revLl.head;
    node = nodes.pop();
    while (node) {
      node.next = null;
      current.next = node;
      current = current.next;
      revLl.size++;
      node = nodes.pop();
    }
    return revLl;
  }

First thing we need to initialise a diffrent linkedlist and required to add elements in reverse order, for doing that i created a stack and added all my nodes to it and retreive one by one and added to the new linkedlist.

Two major polyfill interview question's every js developer face.

Int_Shibin — Thu, 30 Jul 2020 06:00:11 +0000

Js interviews are pretty much tricky in nature. Since js realm consist of myriad libraries and frameworks it demands a huge time for brief preperation itself. But many companies focus only on your core domain and technical understanding, here comes the importance of fundamentals.
Two importance areas companies evaluate are design patterns and your ability to write robust and reusable code.
That is the primary reason most of the interviewer 've this question in their bag. Here i try to explain two commonly asked polyfill questions.One is bind and another one is reduce

Let's start with bind. Bind method enable us to call a function with different context.Bind primarily return a new function which has context provided as first argument and parameters as second.

Function.prototype.customBind=function(...args){
  let params = args.slice(1);
  let tempObj= {
    fn:this,
    ...args[0]
  }
    return ()=>tempObj.fn(...params);
}

The catch here is the this value of our customBind , since it is getting called on another function we 'll receive a function as this.

const obj={
  name:"Adam"
}
function show(age){
  console.log(this.name,age)
}
let outFn = show.customBind(obj,29);

Considering above code snippet , we 'll receive function show as this value inside cutomBind.

Reduce is another one ,find my custom reduce function here

Array.prototype.customReduce = function(fn,acc){
  let contextArr = this;
  for(let i=0;i<contextArr.length;i++){
    acc = acc!==undefined?fn(acc,contextArr[i]):contextArr[0];
  }
  return acc
}

Here reduce method has two parameters 1. function 2. accumulator later one is optional. In this case we need to add this function to Array prototype since it is an array function , thus value of this become the provided array upon which we called the reduce method. we can then iterate over the array and make an accumulated value by running the function provided.