---
title: 'Introducing react.dev'
date: '2023-04-03'
thumbnail: '/thumbnails/react.png'
slug: 'react-dot-dev'
tag: 'react'
canonicalUrl: 'https://medium.com/hackernoon/the-node-js-system-51090c35dddc'
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1683360513/devamiya/blogs/REACT-NEW-DOC_ghx0aw.png'
---
![React.dev](https://res.cloudinary.com/dhboldbpa/image/upload/v1683360513/devamiya/blogs/REACT-NEW-DOC_ghx0aw.png)


React, one of the most popular JavaScript libraries for building user interfaces, has recently launched a new blog site, `react.dev`. This new blog site is an exciting development for React developers as it offers a wealth of information on React, its ecosystem, and related technologies.

React.dev is the official blog site for React, managed by the React team at Facebook. The site features a clean and modern design that is easy to navigate. It offers a rich collection of blog posts, tutorials, and documentation that cover a wide range of topics related to React.

One of the standout features of react.dev is its in-depth tutorials that cover everything from basic concepts to advanced techniques. These tutorials are written by experts in the field and provide step-by-step instructions for building real-world applications using React. The site also includes a comprehensive documentation section that covers all aspects of React, including its core features, hooks, and the latest updates.

In addition to tutorials and documentation, react.dev also features a series of blog posts that cover a range of topics related to React and its ecosystem. These blog posts are written by members of the React team as well as external contributors, and they provide valuable insights into the latest trends and developments in the React community.


My favorite aspects on it : 

1. The focus on hooks and functional components
2. The guides with many diagrams, illustrations and interactive challenges
3. The emphasis of React as a cross-platform solution, not web-only
4. API pages well separated in references/usage, current/deprecated, client/server
5. The overall consistency of the whole experience

there were controversial aspect as well, specifically regarding the recommendation of a limited selection of frameworks (Next.js, Remix, Gatsby, Expo) for starting a new React project, while not endorsing several others (Vite, Create-React-App, client-side SPA...).

# Conclusion 

**From basic to advanced topics, these docs cover everything you need to learn how to use the best of modern React to create user interfaces**. If you are new to the React world, this documentation will definitely help you a lot with the interactive examples. For experienced React developers, this documentation brings together several important advanced concepts that are sure to help you create better UI components.


Introducing react.dev

---
title: 'Why JavaScript is single threaded?'
date: '2022-07-22'
thumbnail: '/thumbnails/js.png'
slug: 'why-js-is-single-threaded'
tag: 'js'
canonicalUrl: 'https://medium.com/hackernoon/the-node-js-system-51090c35dddc'
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1680897629/devamiya/blogs/javscript-single-thread_ypm62z.png'
---

JavaScript is a `High-level`, `single-threaded`, `JIT-compiled`, `Garbage collected`, `prototype-based`, `multi-paradigm`, `dynamic language `with a non-blocking event loop also with functions as first class citizens. 

# Single Threaded

JavaScript is signle threaded Non Blocking programming language with an event loop in it.

this means it can execute only one signle piece 

```js
const parent = () => {
  const child = () => {
    console.trace();
  }
  child();
}

parent();
```
!["Signle Threaded"](https://res.cloudinary.com/dhboldbpa/image/upload/v1680429703/single-thread_ks5xci.png)

Why JavaScript is single threaded?

---
title: 'Choreography vs Orchestration in Microservices'
date: '2021-09-27'
thumbnail: '/thumbnails/react.png'
slug: 'microservices-choreography-vs-orchestration'
tag: 'microservices'
canonicalUrl: 'https://medium.com/hackernoon/the-node-js-system-51090c35dddc'
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1683288630/devamiya/blogs/MS-OR-CH_rg7fyl.png'
---

Microservices are an architectural approach to building software applications as a collection of loosely coupled services that communicate with each other over the network. When building microservices-based systems, there are two main approaches to coordinating the interactions between the services: choreography and orchestration.

Choreography is a decentralized approach to service coordination, where each service communicates with other services directly to achieve a desired outcome. In a choreographed system, each service is responsible for its own behavior and communicates with other services using events and messages. Choreography can be thought of as a collaboration between services, where each service contributes to the overall behavior of the system.

Orchestration, on the other hand, is a centralized approach to service coordination, where a central orchestrator service is responsible for coordinating the interactions between the services. In an orchestrated system, the orchestrator service controls the flow of messages between services and is responsible for ensuring that the services work together to achieve a desired outcome. Orchestration can be thought of as a conductor directing an orchestra, where each service plays a specific role in the overall behavior of the system.

Both choreography and orchestration have their own advantages and disadvantages. Choreography is more flexible and allows services to be added or removed without affecting the overall behavior of the system. However, choreography can also be more complex to implement and may require more testing to ensure that all services are working correctly.

Orchestration, on the other hand, can be easier to implement and can provide a more predictable and consistent behavior for the system. However, orchestration can also be less flexible and may require more maintenance if services need to be added or removed from the system.

In summary, the choice between choreography and orchestration for coordinating microservices depends on the specific needs of the system. Choreography can be a good choice for systems that require flexibility and scalability, while orchestration can be a good choice for systems that require consistency and predictability. Ultimately, both approaches can be effective when implemented correctly and can help developers build robust and scalable microservices-based systems.

Choreography vs Orchestration in Microservices

---
title: 'Atomic Design in ReactJS'
date: '2021-03-12'
thumbnail: '/thumbnails/react.png'
slug: 'atomic-design-in-reactjs'
tag: 'react'
canonicalUrl: 'https://medium.com/hackernoon/the-node-js-system-51090c35dddc'
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1706120158/devamiya/blogs/vvmhnu7f1pu2wgz3ncp8.png'
---
![Atomic Design](https://res.cloudinary.com/dhboldbpa/image/upload/v1706120158/devamiya/blogs/vvmhnu7f1pu2wgz3ncp8.png)


Atomic design is a popular design methodology that has gained immense popularity in recent years. The main idea behind atomic design is to break down the interface of a web application into smaller, reusable components that can be easily combined to create more complex UIs. ReactJS is a popular JavaScript library that is often used to build UI components, and it is a perfect match for atomic design principles. In this blog post, we will explore atomic design in ReactJS and how it can be used to build reusable and maintainable UI components.

# What is Atomic Design?

Atomic design is a methodology for creating design systems that can be used to build interfaces. The methodology is based on breaking down the interface into smaller, more manageable components. These components are organized into a hierarchy that starts with the smallest, most basic components and builds up to more complex components. The five levels of the atomic design hierarchy are:


![Folder Structure](https://res.cloudinary.com/dhboldbpa/image/upload/v1680334594/Screenshot_2023-04-01_at_1.05.50_PM_tziini.png)

 1. `Atoms`: These are the smallest building blocks of a design system. Atoms are the basic elements such as buttons, inputs, and labels.

2. `Molecules`: These are a combination of two or more atoms. They are relatively simple components, such as forms or cards.

3. `Organisms`: These are complex components made up of molecules and atoms. Examples include headers, footers, and navigation menus.

4. `Templates`: These are the page-level templates that bring together organisms and molecules to create a complete page layout.

5. `Pages`: These are the final output of the design system. Pages are the actual content that users see and interact with.

The idea behind atomic design is that each level of the hierarchy should be reusable and modular, making it easier to create new designs and maintain existing ones.

# Atomic Design in ReactJS

ReactJS is a perfect match for atomic design principles. ReactJS allows developers to create reusable and maintainable UI components by breaking down the interface into smaller, more manageable components. Let's take a look at how atomic design can be applied in ReactJS.

# Atoms

Atoms are the basic building blocks of a design system. In ReactJS, atoms can be created as simple components that render a single element. For example, a button component might look like this:




<CodeBox template="react" files={{
"/App.js": `import React from 'react';

const Button = ({ name="Button" }) => {
  return (
    <button>
      {name}
    </button>
  );
};

export default Button;`
}}/>

Atomic Design in ReactJS

---
title: 'The Node.js system'
date: '2021-01-01'
thumbnail: '/thumbnails/node.png'
slug: 'nodejs-system'
tag: 'nodejs'
canonicalUrl: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1680894848/devamiya/blogs/NodeJS_lgv54q.png'
image: 'https://res.cloudinary.com/dhboldbpa/image/upload/v1680894848/devamiya/blogs/NodeJS_lgv54q.png'
---

When I started learning Node.js, I always wondered, how does it work? How is it inside Node.js? Event loop and Event Queue jargons are digested. But what exactly is going on? Where do those jargons Event Loop and Event Queue come from.To satisfy my curiosity as well to know the answer to my previous question, I went in depth as much as I can and came across some things which I’d like to share with you. In brief, this article is about **Node.js System** — a glimpse of internal workings of Node.

If you are familiar with Node.js, it is a known fact that Node.js is single threaded. If you are from programming/computer science background you know what a thread means. Consider this scenario: traditionally — an I/O request comes to a web server and is assigned to an available thread, and for each concurrent connection there is one thread available. That request is handled on the specific thread until it is fulfilled and the response is sent.

This scenario is a perfect example of **Blocking I/O** because while handling a particular request by a specific thread, there will be some idle time when the operations are being done (such as retrieving a file, opening it, reading it, etc.). A single thread consumes memory. A longer running thread for each connection and then sitting idly for some amount of time is not considered an efficient way in the [world of Node.js](https://medium.com/@amanhimself/the-node-way-philosophy-of-a-platform-f9738ed5f9d2).

## Enter Reactor Pattern- Heart of Node.js

Reactor Pattern is an idea of non-blocking I/O operations in Node.js. This pattern provides a handler(in case of Node.js, a callback function) that is associated with each I/O operation. When an I/O request is generated, it is submitted to a demultiplexer.

This demultiplexer is a notification interface that is used to handle concurrency in non-blocking I/O mode and collects every request in form of an event and queues each event in a queue. Thus, the demultiplexer provides the Event Queue, which we often hear. When a request is collected by the demultiplexer, it returns the control back to the system and does not blocks the I/O. At the same time, there is an Event Loop which iterates over the items in the Event Queue. Every event has a callback function associated with it, and that callback function is invoked when the Event Loop iterates.

The callback function further mostly have other callbacks associated within representing some asynchronous operations. These operations are inserted in the Event Queue by the demultiplexer and are ready to be processed once the Event Loop iterates over them. That is why calls to other operations must be asynchronous.

When all the items in the Event Queue are processed and there are no pending operations left, Node.js terminates the application automatically.

## Building Blocks of Node.js

- Reactor Pattern
- [libuv](http://docs.libuv.org/en/v1.x/)
- A set of Bindings
- Chrome’s V8
- Core JS Library

## libuv

Pronounced as “lib u v”, is library written in C language to make Node.js compatible with every OS and provide the non-blocking I/O behaviour. libuv is the low-level engine that implements reactor pattern thus providing an API for creating the Event Loop, managing an Event Queue and running asynchronous I/O operations. It is built specifically to provide a unified experience over different Operating Systems.

## Need for libuv?

Each operating system has its own interface for the demultiplexer. Such as Kqueue for Mac OS X, IOCP for Windows and Epoll for Linux. Different multiplexers will behave differently when handling an I/O request. And then, each I/O operation can differ in its behaviour within the same operating system. This creates an inconsistency and to overcome this inconsistency libuv is the solution.

I am not going to talk about internal workings of libuv here, not an expert on that, myself. For more info on libuv [check their docs](http://docs.libuv.org/) or this [slide](http://www.slideshare.net/saghul/libuv-nodejs-and-everything-in-between) by Saúl Ibarra Corretgé [(@saghul)](https://twitter.com/saghul) is a good start.

[Also, libuv is independently maintained by awesome developers.](https://github.com/libuv/libuv)

## Set of Bindings

These set of bindings are responsible for wrapping and exposing libuv and other low-level functionality to JavaScript.

## V8

It’s a runtime engine[ developed by Google for Chrome browser for JavaScript](https://developers.google.com/v8/). It is the reason Node.js is fast and efficient.

## Core Library

This is a JavaScript library that implements high-level Node.js API (a.k.a. node-core).

The image borrowed above clarifies and represents a complete Node.js System. I hope this article has made things more clear as it did to me.



