DEV Community: HM Nomaan

How to start working with Node, MongoDB for the MERN stack

HM Nomaan — Tue, 28 Dec 2021 16:06:44 +0000

I will giving few instance how do we use Node, MongoDB, ReactJS, and Express.

React: Front-End Library
React is a JavaScript library that is used for building user interfaces. React is used for the development of single-page applications and mobile applications because of its ability to handle rapidly changing data. React allows users to code in JavaScript and create UI components.
Why use React?
Virtual DOM – A virtual DOM object is a representation of a DOM object. Virtual DOM is actually a copy of the original DOM. Any modification in the web application causes the entire UI to re-render the virtual DOM. Then the difference between the original DOM and this virtual DOM is compared and the changes are made accordingly to the original DOM.
JSX – Stands for JavaScript XML. It is an HTML/XML JavaScript Extension which is used in React. Makes it easier and simpler to write React components.
Components – ReactJS supports Components. Components are the building blocks of UI wherein each component has a logic and contributes to the overall UI. These components also promote code reusability and make the overall web application easier to understand.
High Performance – Features like Virtual DOM, JSX and Components makes it much faster than the rest of the frameworks out there.
Developing Android/Ios Apps – With React Native you can easily code Android-based or IOS-Based apps with just the knowledge of JavaScript and ReactJS.
You can start your react application by first installing “create-react-app” using npm or yarn.
npm install create-react-app --global
OR
yarn global add create-react-app

Node.js: JS Runtime Environment
Node.js provides a JavaScript Environment which allows the user to run their code on the server (outside the browser). Node pack manager i.e. npm allows the user to choose from thousands of free packages (node modules) to download.
Why use Node.JS?
Open-source JavaScript Runtime Environment
Single threading – Follows a single-threaded model.
Data Streaming
Fast – Built on Google Chrome’s JavaScript Engine, Node.js has a fast code execution.
Highly Scalable
Initialize a Node.js application by typing running the below command in the command window. Accept the standard settings.
npm init
Express: Back-End Framework:
Express is a Node.js framework. Rather than writing the code using Node.js and creating loads of Node modules, Express makes it simpler and easier to write the back-end code. Express helps in designing great web applications and APIs. Express supports many middlewares which makes the code shorter and easier to write.

Why use Express?
Asynchronous and Single-threaded.
Efficient, fast & scalable
Has the biggest community for Node.js
Express promotes code reusability with its built-in router.
Robust API
Create a new folder to start your express project and type below command in the command prompt to initialize a package.json file. Accept the default settings and continue.
npm init
Then install express by typing the below command and hit enter. Now finally create a file inside the directory named index.js.
npm install express --save
MongoDB: Cross-platform Document-Oriented Database
MongoDB is a NoSQL database where each record is a document comprising of key-value pairs that are similar to JSON (JavaScript Object Notation) objects. MongoDB is flexible and allows its users to create schema, databases, tables, etc. Documents that are identifiable by a primary key make up the basic unit of MongoDB. Once MongoDB is installed, users can make use of Mongo shell as well. Mongo shell provides a JavaScript interface through which the users can interact and carry out operations (eg: querying, updating records, deleting records).
Why use MongoDB?
Fast – Being a document-oriented database, easy to index documents. Therefore a faster response.
Scalability – Large data can be handled by dividing it into several machines.
Use of JavaScript – MongoDB uses JavaScript which is the biggest advantage.
Schema Less – Any type of data in a separate document.
Data stored in the form of JSON –
Objects, Object Members, Arrays, Values, and Strings
JSON syntax is very easy to use.
JSON has a wide range of browser compatibility.
Sharing Data: Data of any size and type(video, audio) can be shared easily.
Simple Environment Setup – Its really simple to set up MongoDB.
Flexible Document Model – MongoDB supports document-model(tables, schemas, columns & SQL) which is faster and easier.
Creating a database: Simply done using a “use” command:
use database_name;
Creating a table: If the collection/table doesn’t exist then a new collection/table will be created:
db.createCollection("collection_name");
Inserting records into the collection:
db.collection_name.insert
(
{
"id" : 1,
"Name" : "Klaus",
"Department": "Technical",
"Organization": "Geeks For Geeks"
}
);

Why do we use react? will it be everlasting?

HM Nomaan — Tue, 28 Dec 2021 15:06:59 +0000

Now, the main question arises in front of us is why one should use React. There are so many open-source platforms for making the front-end web application development easier, like Angular. Let us take a quick look on the benefits of React over other competitive technologies or frameworks. With the front-end world-changing on a daily basis, it’s hard to devote time to learning a new framework – especially when that framework could ultimately become a dead end. So, if you're looking for the next best thing but you're feeling a little bit lost in the framework jungle, I suggest checking out React.

Simplicity

ReactJS is just simpler to grasp right away. The component-based approach, well-defined lifecycle, and use of just plain JavaScript make React very simple to learn, build a professional web (and mobile applications), and support it. React uses a special syntax called JSX which allows you to mix HTML with JavaScript. This is not a requirement; Developer can still write in plain JavaScript but JSX is much easier to use.

Easy to learn

Anyone with a basic previous knowledge in programming can easily understand React while Angular and Ember are referred to as ‘Domain-specific Language’, implying that it is difficult to learn them. To react, you just need basic knowledge of CSS and HTML.

Native Approach

React can be used to create mobile applications (React Native). And React is a diehard fan of reusability, meaning extensive code reusability is supported. So at the same time, we can make IOS, Android and Web applications.

Data Binding

React uses one-way data binding and an application architecture called Flux controls the flow of data to components through one control point – the dispatcher. It's easier to debug self-contained components of large ReactJS apps.

Performance

React does not offer any concept of a built-in container for dependency. You can use Browserify, Require JS, EcmaScript 6 modules which we can use via Babel, ReactJS-di to inject dependencies automatically.

Testability

ReactJS applications are super easy to test. React views can be treated as functions of the state, so we can manipulate with the state we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc.

Will ReactJs Everlasting?

As long as , the community is rising with reactJs and this is going to be stay inthe long run. But The scalability in reactjs is increasing day by day. I hope this is going to be a approach if react team work with stable updates to the reactJs Libraries or efficient rendering.

I think the load time can be reduce in react , with that we can go in the long run. See if we do more research , there are bunch of amazing technology in the , market and the industry is growing higher everyday. In the frontend tech, React is not leaving so far. As long as ,Facebook backed reactjs .

How to use design patterns in JavaScript?

HM Nomaan — Mon, 27 Dec 2021 14:25:33 +0000

JavaScript is a lightweight, interpreted, object-oriented programming language with first-class functions most commonly known as a scripting language for web pages

What Are Design Patterns?
As I said before, design patterns are reusable solutions to commonly occurring problems in software design. Let’s take a look at some of the categories of design patterns.
Proto-patterns
How does one create a pattern? Let’s say you recognized a commonly occurring problem, and you have your own unique solution to this problem, which isn’t globally recognized and documented. You use this solution every time you encounter this problem, and you think that it’s reusable and that the developer community could benefit from it.
Does it immediately become a pattern? Luckily, no. Oftentimes, one may have good code writing practices and simply mistake something that looks like a pattern for one when, in fact, it is not a pattern.
How can you know when what you think you recognize is actually a design pattern?
By getting other developers’ opinions about it, by knowing about the process of creating a pattern itself, and by making yourself well acquainted with existing patterns. There is a phase a pattern has to go through before it becomes a full-fledged pattern, and this is called a proto-pattern.
A proto-pattern is a pattern-to-be if it passes a certain period of testing by various developers and scenarios where the pattern proves to be useful and gives correct results. There is quite a large amount of work and documentation—most of which is outside the scope of this article—to be done in order to make a fully-fledged pattern recognized by the community.
Anti-patterns
As a design pattern represents good practice, an anti-pattern represents bad practice.
An example of an anti-pattern would be modifying the Object class prototype. Almost all objects in JavaScript inherit from Object (remember that JavaScript uses prototype-based inheritance) so imagine a scenario where you altered this prototype. Changes to the Object prototype would be seen in all of the objects that inherit from this prototype—which would be most JavaScript objects. This is a disaster waiting to happen.
Another example, similar to one mentioned above, is modifying objects that you don’t own. An example of this would be overriding a function from an object used in many scenarios throughout the application. If you are working with a large team, imagine the confusion this would cause; you’d quickly run into naming collisions, incompatible implementations, and maintenance nightmares.
Similar to how it is useful to know about all of the good practices and solutions, it is also very important to know about the bad ones too. This way, you can recognize them and avoid making the mistake up front.
Design Pattern Categorization
Design patterns can be categorized in multiple ways, but the most popular one is the following:
Creational design patterns
Structural design patterns
Behavioral design patterns
Concurrency design patterns
Architectural design patterns
Creational Design Patterns
These patterns deal with object creation mechanisms which optimize object creation compared to a basic approach. The basic form of object creation could result in design problems or in added complexity to the design. Creational design patterns solve this problem by somehow controlling object creation. Some of the popular design patterns in this category are:
Factory method
Abstract factory
Builder
Prototype
Singleton
Structural Design Patterns
These patterns deal with object relationships. They ensure that if one part of a system changes, the entire system doesn’t need to change along with it. The most popular patterns in this category are:
Adapter
Bridge
Composite
Decorator
Facade
Flyweight
Proxy
Behavioral Design Patterns
These types of patterns recognize, implement, and improve communication between disparate objects in a system. They help ensure that disparate parts of a system have synchronized information. Popular examples of these patterns are:
Chain of responsibility
Command
Iterator
Mediator
Memento
Observer
State
Strategy
Visitor
Concurrency Design Patterns
These types of design patterns deal with multi-threaded programming paradigms. Some of the popular ones are:
Active object
Nuclear reaction
Scheduler
Architectural Design Patterns
Design patterns which are used for architectural purposes. Some of the most famous ones are:
MVC (Model-View-Controller)
MVP (Model-View-Presenter)
MVVM (Model-View-ViewModel)
In the following section, we are going to take a closer look at some of the aforementioned design patterns with examples provided for better understanding.

how does the JavaScript work with DOM or VDOM in Browser?

HM Nomaan — Mon, 27 Dec 2021 14:05:12 +0000

how does the JavaScript work with DOM or VDOM in Browser?

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. This guide will introduce the DOM, look at how the DOM represents an HTML document in memory and how to use APIs to create web content and applications.

What is the DOM?
The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.
A web page is a document that can be either displayed in the browser window or as the HTML source. In both cases, it is the same document but the Document Object Model (DOM) representation allows it to be manipulated. As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.
For example, the DOM specifies that the querySelectorAll method in this code snippet must return a list of all the

elements in the document:
const paragraphs = document.querySelectorAll("p");
// paragraphs[0] is the first

element
// paragraphs[1] is the second

element, etc.
alert(paragraphs[0].nodeName);

All of the properties, methods, and events available for manipulating and creating web pages are organized into objects. For example, the document object that represents the document itself, any table objects that implement the HTMLTableElement DOM interface for accessing HTML tables, and so forth, are all objects.
The DOM is built using multiple APIs that work together. The core DOM defines the entities describing any document and the objects within it. This is expanded upon as needed by other APIs that add new features and capabilities to the DOM. For example, the HTML DOM API adds support for representing HTML documents to the core DOM, and the SVG API adds support for representing SVG documents.

Virtual DOM

React creates elements for itself using its createsElements () function. By combining all the elements, he creates a separate dom inside himself. This dom is called Virtual Dom. React's virtual dom basically renders as much as the browser's dom has changed.

We can imagine the Virtual Dom as a simple tree. The different notes of which are one component. Whenever we change the state of a component, a tree is created first. Where the modified component and its child components are reconstructed. That is, React has two representations of the virtual dom. One is the state before it, and the other is the state after the change. React compares these two conditions.

What Actually Pseudo Element? Why Do We Need Pseudo element?

HM Nomaan — Mon, 20 Dec 2021 12:50:49 +0000

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

There are many CSS Pseudo Element, but today We are going to talk about ::before and ::after pseudo Element.

CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a

but not an ). This effectively allows you to show something on a web page that might not be present in the HTML content. You shouldn’t use it for actual content because it’s not very accessible in that you can’t even select and copy text inserted on the page this way — it’s just decorative content.

img { display: block; /* Avoid the space under the image caused by line height */ position: relative; width: 100% }

In this article, I’ll walk you through seven different examples that showcase how ::before and ::after can be used to create interesting effects.

img::before { background-color: hsl(0, 0%, 93.3%); border: 1px dashed hsl(0, 0%, 66.7%); /* ... */ }

That’s because we set content to an empty string (which we need to display our generated content and styles) and cover the entire space, including the actual alt text. It’s there, we just can’t see it.

We can see it if we display the alt text in an alternate (get it?) way, this time with help form the ::after pseudo-element. The content property is actually capable of displaying the image’s alt attribute text using the attr() function:

` img::after {
  content: attr(alt);

  /* Some light styling */
  font-weight: bold;
  position: absolute;
  height: 100%;
  left: 0px;
  text-align: center;
  top: 1px;
  width: 100%;
}