Relational VS Non-Relational Databases

Aulad Hossen (Himel) — Thu, 23 Dec 2021 17:35:50 +0000

For storing data of application choosing the right database is very important. Sometimes choosing the relational database might seem more natural but sometimes this choice may not be successful. Here I am trying to explain the differences between relational and non-relational databases.

Relational Database

A relational database organizes data into one or more tables which consists of columns and rows. All data is organized in the table where columns indicate attributes and every row indicates a single data item which is called records. In simple words, All the information in Relational Database is structured and is organized in tables. Here the primary key is something that identifies each item uniquely and a primary key can contain one or more columns of a table. Different tables can establish relations between them by different foreign keys. SQL is used for executing queries, retrieve data, and editing data. It is used for communicating with a Relational Database.

Advantages of Relational Database
A relational database is great for structured data. And it uses an existing query language (SQL) for making the relation between them. It can handle lots of complex queries and database transactions of data as here data in tables are very well connected by using unique keys. It is great for complex queries and it has easy data navigation. For a high level of data integration transactions are secure and it is very high reliability.

Disadvantages of Relational Databases
It has an up-front schema definition that means it has to maintain schema always. Here Relational Database has no adaptation to changing requirements. For that dynamic changes can affect all the other items in the same table and here data processing is slow. For getting high-performance expensive hardware is required.

Non-Relational Database

A non-relational database refers to a database that has no tabular schema of rows and columns. It maintains an optimized storage model which is very flexible.
It is also known as a NoSQL database that means “Not Only SQL”. The Meaning of that line is you don't need to use just SQL only to query the database, you can use any language which you prefer.

Advantages of Non-Relational Database
Non-Relational Databases are designed for use with low-cost commodity hardware. Here huge volumes of data can be easily handled. It can be easily installed in cheap commodity hardware. That means we can process and store more data within less cost. Non-Relational databases need no schemas. Non-Relational databases technologies have excellent integrated caching capabilities.

Disadvantages of Non-Relational Database
Non-Relational databases don’t have reliability functions. It is not compatible with SQL. We need a manual query language that makes things slower and more complex. It is less stable and may have fewer functionalities compared with a relational database.

What is Virtual DOM and how it works?

Aulad Hossen (Himel) — Wed, 22 Dec 2021 17:25:04 +0000

React is a very popular JavaScript library for its performance. It smartly does the work when it comes to handling page updates and data binding. But there are many scenarios behind that performance. Virtual DOM is one of them. When there is a change in UI then the DOM updates and the UI must be re-render.

This re-rendering is a slow process because CSS is also re-calculated at that time, then the layout must be re-computed, and at the last browser must paint the elements on the screen. For that reason, the concept of Virtual DOM appeared. Let's understand what is actually Virtual DOM.

Virtual DOM is something that represents a copy of the actual DOM. React creates a copy of DOM and renders the UI depending on that DOM. React observes all the changes made in the actual DOM and modifies the virtual DOM only where the changes happened. Then it renders the UI only where the changes happened in the virtual DOM. And the name of this process is diffing. Since the virtual DOM tree is just a JavaScript object that’s why this process is fast.

Figure-01: Virtual DOM and Diff Algorithm.

For doing this comparison React uses the "Diff" algorithm. With this algorithm React can understand where changes have occurred. Then React changes only that part of the DOM where the change was made. In the next step when the real DOM is updated then the updated virtual DOM becomes pre-updated virtual DOM for the next DOM change.

How rendering components work with Virtual DOM?

If we want to do DOM manipulation for simple event like click event at that time we will access the element by using getElementByID(‘id’) method. Here the method will find the element with specific id then it will perform the DOM manipulation. And this is very simple process. But if we have many components in our application and data inside them can be change within couple of seconds then it will be difficult to handle and also it will be time taking task. For overcoming this problem React uses Virtual DOM for DOM manipulation process.

The whole process of rendering are explained below:

At first, React will store in the memory the actual DOM before the re-render happens. Here we can call it Real Virtual DOM.
Then, React will create a new Virtual DOM which will have all the old components and the new changes. React will consider those components as new. Then the new Virtual DOM will be kept separate from the old one and it will change anything of actual DOM.
In the third stage, it will compare both Virtual DOMs and will find the new change that has to be implemented and the position. And it will happen by using the "Diffing Algorithm" .
When the change has been noticed then React will remove the old component from the actual DOM. And will set the new component onto the actual DOM. At first the removed component takes componentWillUnmount() lifecycle method which removes it. After that the new component that will be set takes componentWillMount() and componentDidMount() that will bring the component to the UI.

This is the process how Virtual DOM works. Since it is taking some crucial steps so it can be time taking process but most of the steps happening regarding Virtual DOM which is mainly objects stored in the memory till last step. So, this is the whole scenario of Virtual DOM and how it helps React in rendering components.

DEV Community: Aulad Hossen (Himel)

Relational VS Non-Relational Databases

Relational Database

Non-Relational Database

What is Virtual DOM and how it works?