Articles

Fullstack Application Work Flow (MERN)

Sun, 05 Jan 2020 22:12:03 GMT

Basic Explanation Of A Full-stack Application (MERN):-

Front-End:- This Is The Client Side Part Of The Application.Frontend is the part of the website users can see and interact with such as the graphical user interface (GUI).Basically We Are Using The React For The Front-End Development.
Back-End:- This Is The Server Side Of The Application. It stores and arranges data, and also makes sure everything on the client-side of the website works fine Basically We Are Using The Nodejs For The Back-End Development.

Explanation Of Whole Work Flow Front-End To Back-End:-

When Ever The Client Makes A Request From The Front To Server Which Basically Sitatued In The Backend That Request Must Have To Be Passed Form So Many Processes Before Showing Any Reaction To Client.Now I Would Like To Go Through Each And Every Step Of The Process.

The browser interaction to the backend:-

HTTP requests arrive from the browser at the backend. Those requests may contain data in the HTTP headers or request body. The intent may be to request new data or to transmit user-created data to the backend.

HTTP requests, are constructed inside the user’s browser and sent off. There’s a response for each request, carrying information in the HTTP headers and the request body. Those responses arrive back at the backend arrive back at the user’s browser.

What needs to happen, to make the browser have to send out a request? Those requests which are fired because a user clicked a link or by JS code running in the background. But there are more possible triggers

The user enters a URL, which makes the browser go and request it.
The browser reads the incoming HTML, and notices that there’s a resource it needs to load, such as a JS file, an image or a CSS file. It goes ahead and requests each with a single new HTTP request. Usually this happens while loading a website. (Those requests don’t have to go to the same backend, you could load JS from another site. People like to use CDNs for that as it’s pretty fast and convenient.)
A user clicks on a plain-ol’ link the webpage is loaded and rendered. The browser knows that they need to navigate to a new page and requests the corresponding URL.
JavaScript is executed on the site, and wants to have some data loaded in the background. Requests are being made, but the browser does that in the background. It doesn’t reload the whole page. That’s AJAX. Javascript can be triggered by a user clicking something, and it can tell the browser that the click wasn’t meant to navigate to a new page. This can be confusing.

Conclusion Of All Story:

This one can differ! But there’s a very popular way of doing things, which is used most often. It’s a good way of doing things for 99% of all frontend-backend communication scenarios.

The magic is within the HTTP request/response payloads. The backend usually responds with certain contents of the HTTP body:

HTML-formatted responses
other static files (CSS, JS, images, …)
JSON-formatted data
No body at all. Just a status code and header fields.

The frontend sends:

Simple HTTP requests without a body
Form data
JSON-formatted data

If You Want To See Example Of Full-stack (MERN) Application Follow The Link Given:- Lets Go Full-stack Applcation Example

Authentication and Authorization

Tue, 10 Dec 2019 22:12:03 GMT

If We Are Having Some Protected Routes That Provides Resources and Informational Data To User Without Authentication And Authorization Then There Will Be Compromise With The Sensitive Information That’s Why We Implemented The Auth Part To Protect Our Application

Using The Jwt Tokens To Making The Protected Routes:-

Jwt Is Called JsonWebToken Which Generates The Json Token.When The Client Side Information Comes To Server The Mongodb Database Verifies The Information Then The Jwt Comes In Play To Generate The Token.

Example:-

var token = auth.generateToken({userid: user._id})

Here We Are Generating The Token By Using The Jwt It Takes a Parameter Which Can Be Used for Generating The Token.That Parameter Is Either The User _id Provided By The Mongodb Or The Username

Now Using The Jwt Token For Making Our Route Protected:-

To Making The Route Protected We Just Have To Implemented That Token based Authentication In Our Route So When Someone Passes Through Our Route He Just Have To Passed Through The Middleware Which Verifies That The Particular User Is having Token Or Not If It Is Having The Token Then He Will Be Able To Access The Particular Route Otherwise Not. Example:-

//protectedRoute
router.get("/users", auth.verifyToken, (req, res) => {
  UserModel.find({}, (err, users) => {
    if (err) res.json({ Error: ErrorFounded })
    res.json({ users: users })
  })
})

By This Way We Can Protect Our Any Route By using The jwt Authentication.

Middleware Which Can Generates The Token And Verifies The Token:-

//requring the token
var jwt = require("jsonwebtoken")

//generating the middleware for token generating
module.exports.generateToken = function(payload) {
  return jwt.sign(payload, "abcdef")
}

//generating the verify middleware
module.exports.verifyToken = function(req, res, next) {
  var token = req.headers.authorization || ""
  if (token) {
    jwt.verify(token, "abcdef", (err, decoded) => {
      // console.log(decoded)
      if (err) res.json({ token: "notVerify" })
      next()
    })
  } else {
    return res.json({ token: "notFound" })
  }
}

Any Request Comes To A Particular Route It Must Have To Be Passes Through It That’s How Whole Authentication AndAuthorization Works.

React Redux

Mon, 02 Dec 2019 22:12:03 GMT

Article on Redux

Redux is Basically a State Management Tool Used For The Management Of State The Main Things Which We Used In Redux Are :-

1.Store 2.Reducers 3.Actions 4.Methods

Store:- The Store Is Place Where We Kept Our State.

Reducers:- The Reducer Is a Pure Function Which By Default Takes Two Parameters In It First Is State Which We Want To Update And Second The Action.

Action:- Action Is an Object Which Is The Second Parameter Of The Reducer Function It Is Having The Type Key In Itself.

Methods:- Methods Are The Pre-defined Functions Which Are Provided By The Store To Us By Using The Methods We Can Easily Interact With State Management Process.

Entire Work Flow Of The Redux:- First Of All We Needed A Function Called Reducer Function Which Having Two Parameters in It One Is State And Another One Is Action Object.

function reducer(state,action) {
if(conditional) {
Updated State
}
Esle {}
}

Now Make a Store And Put The Reducer Function In it

import { createStore } from "redux"

const store = createStore(reducer)

The Store Now Provides Some Of The Methods Which Are Given Below:-

1.store.dispatch()
2.store.subscribe()
3 store.getState()

These Methods Are Explain Below:

1 store.dispatch() :-
The Store Dispatch Is Method To Interact With The Action Object Or Dispatching An Action.

2.store.subscribe() :-
This Method is providing The Whole Information if There Is Any change In The Store

3 store.getState() :-
This Method Is Generally Used For Getting The Updated State.

Explanation Of The React -Redux

When We Are Using The React With Redux Then We Use The React-Redux Package. Now We Generally Used The React-Redux Package Because We Having The Store Which Is Called The Central Store Now When We Provide Access To All The Components Of Our Parent Component In React Application Then We Need React-Redux

Work-Flow Of React-Redux

Step 1.:- Importing The Provider From React-Redux By

import { Provider } from "react-redux"

We Use That Provider In The Main Parent Component Which Gives Access Of The Store To The Children Components Presented In It Example Given Below

ReactDOM.render(
  <Provider store={Store}>
    <App />
  </Provider>,
  document.getElementById("root")
)

Es6 Variable Declaration

Sat, 26 Oct 2019 22:12:03 GMT

Ways To Declare Variables In JavaScript

There are three ways to declare variables in the javascript given below:-
Var
Let
Const
Difference Between Var,Let,Const.

Variable Declaration with let and const and var

//ES5
var x = 10;
x = 12;
console.log(x);//12
12;

//ES6
let x = 10;
x = 12;
console.log(x); //12

//ES6
const y = 14;
y = 12; //TypeError: Assignment to constant variable.
console.log(y);

Scope of Let,Const and Var

var a //declaration a = 2 // initialization let b //declaration b = 12 //initialization var c = 6 //declaration plus initialization in one step let d = 5 //declaration plus initialization in one step const a ; // SyntaxError: Missing initializer in const declaration a = 2; console.log(a); const a = 5 console.log(a) //5

1: when we start our variable with var, let is called declaration. e.g: var a; or let a; 2: when we start our variable and assigning value it is declaration and initialization with value 3: const cannot be declared only, you need to initialize it with declaration

Let and const have a block scope but var has function scope.

//ES5
function adult5(age) {
  if (age > 18) {
    var status = 'adult';
  }
  console.log(status); //adult
}
adult5(20);

/ ES6
function adult6(age) {
  if (age > 18) {
    let status = 'adult';
  }
  console.log(status); //ReferenceError: status is not defined
}
adult6(20);

1: var and let can change their value and const cannot change its value 2: var can be accessible anywhere in function but let and const can only be accessible inside the block where they are declared.

TypeConversion In Js

Thu, 12 Sep 2019 22:12:03 GMT

Meaning Of TypeConversion In js

It Means That The Converting One Type Of DataType Into Another Typeof It Happens By Two Types Implicitly and Explicitly

Implicit TypeConversion :-

It happens dynamiclly but the value must be same and datatype can of any type it return either true or false depend upon what value you enters

Eg:-

==(doubble Equal too)

“10”==10 true

Explicit TypeConversion :-

We Have To Implement It Manually In Our Conversion. There Are Many Predefined Functions Which Are Used for The Explicit Conversion Explain Below

To String (""):-

String();

Eg:- String(10); “10”

To Number (1,2,3 Etc.):-

Number();

Eg:- Number(“10”); 10

To Boolean (true,false):-

Boolean();

Eg:- Boolean(1); true

Boolean(0); false

Summary And Additional Information:-

*Numeric conversion happens in mathematical functions and expressions automatically.

For example, when division / is applied to non-numbers:

Console.log( “6” / “2” ); // 3, strings are converted to numbers*

Addition ‘+’ concatenates strings Almost all mathematical operations convert values to numbers. A notable exception is addition +. If one of the added values is a string, the other one is also converted to a string.

Then, it concatenates (joins) them:

console.log( 1 + ‘2’ ); // ‘12’ (string to the right) console.log( ‘1’ + 2 ); // ‘12’ (string to the left)

DataTypes in javaScript

Sat, 07 Sep 2019 22:12:03 GMT

what is a dataType means

It means that kind of data requried for a particular action in programming language different type of datatypes in js described below:-
Primitive

Numeric(any number like1,2,3etc..),Boolean(true,false),Null,Undefined,String("")
Non-Primitive

Array([])(contains key value set where key is index and the value any dataType),Objects({}(key is string and value can be any dataType))

Examples:-

Numeric

let n = 123;
n = 12.345;

String

let str = "Hello";
let str2 = 'Single quotes are ok too';

Boolean

let nameFieldChecked = true; // yes, name field is checked
let ageFieldChecked = false; // no, age field is not checked

Null

let age = null;

Undefined

let x;

alert(x); // shows "undefined"

Array

let fruits = ["Apple", "Orange", "Plum"];

Objects

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

Functions in js

Wed, 04 Sep 2019 22:12:03 GMT

what is function

Function is the set or collection of instructions which are kept in the box called function.which when we executes it pefroms a specific task as its output..

Types of Functions In JavaScript

Named Function
```
function sum(a,b) {
return a+b;
}
```
Named function means that function declaration with name eg i have given name to function above is sum
Anonymous Functions
```
var sum = function (a,b) {
return a+b;
}
```
Anonymous Function or function expression means function without name
Immediately invoked function expression (IIFE)
```
function (a,b) {
return a+b;
})(a,b)
```
An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.
Function Execution Or Invocation

It simply means that the giving command to function for executing the collection of code which we have put inside it

for example: Here im executing the one of function which i have defined above

sum(1,2);

*we can execute the function by its name i have provide arguments inside the brackets at time of execution so the output will be 3.the provided agruments will go inside the parameters which i define above in the function declaration.*

Different Components Of Functions

Genrelly The Main Components Of The Functions Are
Function Keyword
Function Name
Parameters Of The Function
Return Statement in The Function If Not Provided It Will Going To Return The Undefined
Arguments In The Function at Execution Time

Articles

Fullstack Application Work Flow (MERN)

Authentication and Authorization

React Redux

Article on Redux

Work-Flow Of React-Redux

Es6 Variable Declaration

Ways To Declare Variables In JavaScript

Var

Let

Const

Difference Between Var,Let,Const.

TypeConversion In Js

Meaning Of TypeConversion In js

Implicit TypeConversion :-

==(doubble Equal too)

Explicit TypeConversion :-

Summary And Additional Information:-

DataTypes in javaScript

what is a dataType means

Primitive

Non-Primitive

Examples:-

Functions in js

what is function

Types of Functions In JavaScript

Named Function

Anonymous Functions

Immediately invoked function expression (IIFE)

Function Execution Or Invocation

Different Components Of Functions