DEV Community: Aravind Kumar

Part 1: React.js - Overview, Virtual DOM and State

Aravind Kumar — Sat, 17 Apr 2021 11:08:50 +0000

React is one of the most popular JavaScript Framework on the Client side. In Part 1, we will be understanding the props, state and it's internal rendering process. Redux and Context API are conceptually different from React when it comes to handling of state, so we will be looking into those in Part 2 and 3 respectively.

Overview

create-react-app allows to build react projects. The entry point to the application is the index.js. Goal of React is render HTML in a web page. It uses ReactDOM.render() which takes two arguments, HTML Code and HTML element.
In index.js we can see this HTML Code is in form of <App /> and HTML element to be "document.getElementById('root')". App is the root/top most component in the component tree. While, the root element in index.html which is passed as second argument, will be appended by JSX code we write inside the components.

Components:
React is all about Components. Components, the building block of React are reusable and reactive in nature, they are written as JSX (custom HTML and Javascript) which are nothing but JavaScript methods called on React objects.

The tags in the JSX expression within the JavaScript file will be converted into createElement() by babel complier/transpiler.

Example:
JSX code:

let framework=
  <div className='library'>
    Hello, React!
  </div>

Converted JavaScript equivalent:

let framework=
  React.createElement(
    'div',
    { className: 'library' },
    "Hello, React!"
  )

Props:
Props or Properties are a system for passing data from "parent" to "child" components. Let's look at an example in which we will see how props can only be passed from parent to child but there is a bottom up way of approach where we can call a method in parent component from a child component.
Example:
Here AddName is a parent component and ClickName is a Child component. handleOnSubmit method reference is passed as a property from parent to child.

const AddName= () => {

  const handleOnSubmit = (name) => {
    concole.log("Rendered from AddName, called from ClickName with value: " + name);
  }

  return (
    <React.Fragment>
      <ClickName handleOnSubmit={handleOnSubmit} />
    </React.Fragment>
  )
}

We will receive the props ClickName and call the parent function by using props.handleOnSubmit.

const ClickName = (props) => {
    return (
        <div>
            <button onClick={() => props.handleOnSubmit("React")}>
             Click Child
            </button>   
        </div>
    )
}

//Output: From AddName, called from ClickName with value: React.

State

State are JavaScript objects that are relevant to a component. They must be initialized when they are created.

Example:

class demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {title: "React", firstName: "Dev", lastName: "tools"};
  }
  render() {
    return (
      <div>
        <h1>Demo {this.state.title}</h1>
        <p>
          My name is {this.state.firstName}
          {this.state.lastName}.
        </p>
      </div>
    );
  }
}

//Output: Demo React
My name is Dev tools.
State can be updated and when doing so the component gets re-rendered. To change the state always use the setState() method.

Example: From the previous demo example, let's add a method

changeTitleName() {
   this.setState({title: "Redux"});
}

Inside the render method let's include a button below the paragraph,

render() {
    return (
      <div>
        <h1>Demo {this.state.title}</h1>
        <p>
          My name is {this.state.firstName}
          {this.state.lastName}.
        </p>
        <button
          type="button"
          onClick={this.changeTitleName}
        >Change Title</button>
      </div>
    );
  }
}

This change in state triggers component's render() method, it's other lifecycle methods and causes re-rendering.

//Output: Demo Redux
My name is Dev tools.

Let us look into the React's way of re-rendering components before we see more about states.

Virtual DOM and State
It is React's virutal DOM which ultimately deals with the HTML elements in the screen. React on other hand notices the changes in state, that component that needs to be changed, the differences in previous state compared to the current state and these information are passed on the React's Virutal DOM. Virtual DOM then passes this information to the Real DOM which is part of the browser.
To sum up, the Primary feature that React care about are the data (props, state and component wide data). So, whenever the data change, components that use these data are basically updated and React lets virtual DOM know about these differences and the latest change is brought on to the screen after the browser's DOM gets the communication from virtual DOM.

Example:
Before update

<div> 
   <h2>React</h2>
</div>

After update

<div> 
   <h2>React</h2>
   <h3>Only this content will be re-rendered</h3>
</div>

React does diffing and let's virtual DOM know about the changes, virtual DOM then updates the browser's DOM to insert <h3>. The entire DOM will not be re-rendered.

Stateful and Stateless
State is similar to props, they are private to the component and it's fully controlled . Components can either maintain state which are Stateful or can remain stateless and contain no state in them.
Stateless components are simple functional components which try to print something or call some parent functions through props or render always the same thing. They are also called as dumb/presentational components.

Example:

const ProjectList = ({projects}) => {
 return (
   <Row>
     {projects.map(project => {
       return <Col>project</Col>
     })}
   </Row>
 )
}

Stateful components keeps track of it's changing data. These components gets re-rendered on change of state. They are also called as Container/Smart components.

Example:

class Demo extends Component {
  constructor() {
    super()
    this.state = {
      titles: []
    }
  }
  render() {
    return (
      <div>
        <p>List of Titles</p>
        <Row>
          {this.state.titles.map(title => {
            return <Col>< {title} /></Col>
          })}
        </Row>
      </div>
    )
  }
}

We coved some basic grounds in React. I hope this article was helpful. Thanks for reading :)

Threads and Node.js in a nutshell

Aravind Kumar — Tue, 13 Apr 2021 11:15:20 +0000

1. Overview of Node Internals:
Once we write JavaScript code(index.js) and execute the command "node index.js" from the command line, we are invoking the Node.js project. This thus invokes V8 (JavaScript engine) and Libuv (C/C++ Library, it abstracts non-blocking I/O operations).

Above we can see the internal architecture of Node.js

The purpose of node is to give us a consistent API for us to work with and the implementation internally is performed by one of V8 or Libuv.

2. What are Threads, Scheduling and Execution?
A thread is a sequence of programmed instructions that are managed by scheduler.
The computer we use are backed by multicore (Quad-core/ Octa-core) system which makes us perform simultaneous operations without any interruption.
Thread Scheduling is a decision made by the operating system to process a thread at a given time. The executions of thread happens at the CPU.
A Multicore systems support MultiThreading, which makes the process run on separate cores at the same time. This thus increases the overall speed of program execution.
MultiProcessor System is two or more CPU's present in the same computer. The system is more reliable than multicore system(uses single CPU) since failure of one processor does not affect other processors.

Laptop that we use are backed by a single CPU with multiple cores. But, modern day laptop uses Hyperthreading which creates a logical processor(two virtual processors) thus improving the performance of CPU.

Above picture highlights the CPU, Cores and Logical Processors.

Note: Hyperthreading are outside the scope of current topic, the idea was to give how our system performs multiple processes at the same time. Now let's look into how Node.js performs the threading..

3. How Node.js uses Multithreading...
Not all of the code that we write are executed in a single thread in node. Some standard library function calls the Node C++ side(C++ Add-ons from the Node architecture) which then calls Libuv. Libuv internally makes use of thread pool that creates 4 threads. Libuv is a major dependency for node.js which features event loop and thread pool.

Event Loop:
When we start the Node.js application, the single threaded Event loop executes all lightweight work, such as requiring the modules, the initialization, executing the callbacks. Also, it helps in offloading heavy tasks(file I/O) to the Thread pool.

Thread Pool:
Thread Pool handles the "heavy tasks". The works delegated are I/O intensive/CPU intensive. For example: DNS, File System (I/O) and Crypto, Zlib (CPU). By default the Thread pool creates 4 threads to execute a given task.
If there are 5 calls involving I/O or CPU, the first 4 tasks are scheduled in the thread pool and once they are completed the 5th task is placed in the thread pool by the scheduler.

Note: Non-blocking asynchronous network I/O tasks are performed by event loop and DNS tasks are performed by thread pool.

To increase the number of threads we can use the below piece of code in our js file,
process.env.UV_THREADPOOL_SIZE = 5;

JVM Architecture Model

Aravind Kumar — Wed, 07 Apr 2021 11:00:51 +0000

Once we write Java program in the IDE, the moment we press the run button the execution begins in the background. What happens behind the scenes are rarely thought or learnt. Here we will explore the underlying JVM (Java Virtual Machine) workings, it's internals and how it runs the Java code that we write.

Before we dig deep into the JVM Model, a review on how Java works.

Source: Create a source document (.java file)
Complier: Compile the document through a source code complier (.class file)
Output: The Complier creates a new Byte-Code version which is capable of running in any other Java Enabled System. (WORA)
Virtual Machine: Runs the Byte-Code version (.class file) by starting the JVM. Translation of bytecode to underlying machine code happens here.

Let's say we create a basic java program with a .java extension and we want it to be executed. We run the command "javac Filename.java" (compilation process). This creates a Filename.class file which is to be executed, so now we use the "java Filename" command to run your program. At the time we call this command we have created a JVM instance.

The JVM Architecture Model is shown below.

Overview:

JVM's primary purpose is to load and execute your application.
Your application's .class file as well as built-in class files of Java API (Collections, Object..) are loaded by the Class loader. The bytecode instructions from the Class Loader are then fed into the Execution engine which then executes the bytecode. The Execution engine here talks to the Host OS through native method calls in order to execute the instructions and then the bytecode is translated to Machine code(the underlying language which the platform understands).

3 Component breakdown of JVM:

1. Class Loader Subsystem
2. Runtime Data Area
3. Execution Engine

1. Class Loader Subsystem:
Responsible for loading the bytecode into memory from various sources(filesystem, .jar..). The activities the Class Loader performs are LOAD, LINK and INITIALIZE.

LOAD -
There are three types of class loaders Bootstrap, Extension and Application. The Java's internal class files(inside rt.jar distributed with JVM implementation), core API's are loaded by Bootstrap class loader. Extension class loader loads additional application jar(jre/lib/ext). The classes and values specified in your classpath environment variables are loaded by Application class loader.

LINK -
Verify verifies if the bytecode is valid (JVM Compatible). The Prepare phase is where memory for static variables are allocated. Example: Class variable, private static boolean isNum = false (default). Here a default initialization of value is allocated in the Prepare step.(Note: Memory Allocation happens only for class variables, not for instance variables). The Resolve stage is where the symbolic reference of the current class is changed to the actual reference.

INITIALIZE -
Here is where the class variables are initialized to the value in code, the static init block are run, the static variable values are set in memory locations.
Example: Class variable, private static boolean isNum = true (actual value set in code is assigned)

2. Runtime Data Area:
The Memory of JVM. There are five different areas namely the Method Area, Heap, Stack, PC Register and Native method stack. Java Stacks, PC Register and Native method stacks are per thread, while Method Area and Heap are per JVM.

Method Area -
Method area is where the metadata about the class are stored. Only class data such as static variables, class level constants are stored in memory of method area. 64mb is allocated for the method area which can be modified.

Heap -
Heap is where Object data, Instance variables are stores. When we instantiate an object such as using a new keyword, that object's creation and storage happens in the Heap.

PC Register -
This is a per thread runtime data area. It contains program counter which is basically a pointer to the next instruction which needs to be executed per thread.

Java Stacks -
Java Stacks contains stack frame(thread #1, #2, #3 will contain it's own stack frames) that contains data related to currently executing method. This is the memory area for Local Variables, Parameters, return values. Stacks are also executed per thread.

Native Method Stack -
For each thread that calls a native method a native method stack will be created.

3. Execution Engine:
Until now the data is just present in the memory area and yet to be executed. The .class file(bytecode) needs to be executed and here in the Execution Engine is where the actual instruction to be executed takes place. The Execution Engine has the Interpreter, JIT Complier and Garbage Collector.

Interpreter -
Interpreter takes the current instruction that has been set by the PC register and interprets the bytecode. It finds out native operation to be performed and executes it. The interpretation process is line by line and the disadvantage of that is, it interprets each time for the one method that has been called multiple times.

JIT Complier -
The efficiency and performance of the interpreter is important for the system to execute the code faster. The JIT Complier does just that. When Interpreter sees a repeated method call, JIT provides native code for that particular method on the fly so that re-interpretation does not happen.

Garbage Collector -
Cleans up unused classes, unreferenced objects and memory area.

Java Native Interface -

An Interface that interacts with the native method libraries. This loads the libraries during run-time which are required for execution.

Native Method Libraries -

Native Libraries in C, C++ that are required during the execution.

This is my first blog, I would like to contribute to the Tech Community on different topics. I started with JVM Architecture and hope this article provides you the concept of what happening behind the scenes.