DEV Community: Chaitanya

React Element vs React Component

Chaitanya — Sat, 25 Jun 2022 04:33:21 +0000

Hey there,

Most of the developers would be using the React in their projects, but we often ignore the small things that sometimes may need to have a deep insight to understand.

One of the such concepts for React is React Elements, and Component differences.

Let us see the differences between them:

React Element:

React Element is an object which has the information about the type of react element, and the props that, it can hold and the children.

let us say we have an react element whose tag is 'h1', and the text between the tag would be "Hello world". In this scenario the React element which is said an object earlier would be represented as below:

This is the representation would be stored in the react tree

const reactElement = {
 type: 'h1',
 null,
 'Hello world',
};

To create that react element we would use createElement API of react as below:

React.createElement('h1', null, 'Hello world');

and same can be created using JSX:

<h1>Hello world</h1>

Now let us say we have to create the same above element multiple places and we have such multiple usages. In such case we can create the function and keep the JSX in that function. so whenever we need we can call that function to have the same element.

const renderElement = text => {
  return (
     <h1>
       {text}
     </h1>
  );
};

since the above function returns the JSX we can call that function whenever we need in JSX

the usage of that function would be as below:

{renderElement("text1")}
{renderElement("text2)}

we can also pass the renderElement function to the createElement API to create reactElements

React.createElement(renderElemet, null, 'Hello world');

But what we cannot do with the renderElement function is we cannot use the renderElement as tag which we did for div tag as shown below:

for a div tag you could have done this

Vanilla JavaScript

const element1 = React.createElement('div', null, 'Helloworld');

JSX

<div>
 Hello world
</div>

const element2 = React.createElement(renderElement, null, 'Hello World');

but you cannot use the element as JSX

In order to use that function as tag, the name should be start with capital letter, and such functions are called components.

const CustomComponent = ({ children }) => {
return (
 <h1>
   {children}
</h1>
);

this CustomComponent can be used as tag, or also rendered with React API as shown below:

Vanilla JS:

const element3 = React.createElement(CustomComponent, null, 'Hello world');

JSX:

<CustomComponent>
  <h1>
   Hello world
  </h1>
</CustomComponent>

These Components also have access to the special variables within the scope of the Class, and functions called state which holds the values and the React elements can be re-rendered whenever these values are updated.

Big-Oh(O) does not give you always the worst-case, But why?

Chaitanya — Mon, 22 Mar 2021 11:23:42 +0000

The running time complexity of an algorithm is given by the run-time function of that algorithm. All the run-time functions are expressed in terms of mathematical functions. sometimes these run-time functions are compared with the standard mathematical functions like exponential functions, quadratic functions, and more. The input variables of the function are compared to inputs of the algorithm and the running time of the algorithm is the output of the mathematical functions. This comparison gives an understanding of the variation of the out with the change in the input variables which is an analogy to the change in the run-time of the algorithm with the change in the input size. Formally this comparison and analysis of the functions are called asymptotic analysis of an algorithm. The well known asymptotic notations are as below:

Big-Oh
Theta
Omega

All these asymptotic analyses give you the order in which the growth of the function depends on a change in the input of the function. The growth of the functions is considered and compared with the slopes and the manner how they grow. All these functions use auxiliary variables to give you a generic description and definition.

Big-Oh

The Big-oh notation is defined as the upper bound of the given run-time function of the algorithm. This Big-Oh notation gives the functions which have a higher growth rate than the calculated run-time function where the starting input condition is given n0 or upper bound functions.
Mathematically the Big-Oh notation is given as below:

\lbrace f(n): 0\leq f(n) \leq c*g(n), \forall n \geq n0\rbrace

Here g(n) is the function calculated for the run-time of an algorithm. And the O(g(n)) depicts the set of functions whose growth is higher than the computed function of some constant c. If the algorithm which is considered for the computation is the worst-case related scenario then the function g(n) gives the worst-case runtime function and the O(g(n)) is the worst-case runtime asymptotic notation. Basically, O(g(n)) is the set of functions and each of the functions in the set has a higher sloper than the g(n) by some constant 'c' commonly called as upper bound functions of f(n).

So the Big-oh notation gives you the upper bound functions of the input function irrespective of the run-time it is calculated. If the input function of the Big-oh is the best time/ minimum run-time of an algorithm then it gives the upper bound function of that input function. If the function is the average run-time function then the Big-oh notation gives the function which has greater growth than the given input functions with the change in the size of the input.

And the other two notations are described below

Theta

The theta notation gives the functions which are asymptotically lower or which have lower slopes than the given run-time function. As in the asymptotic upper bound notation which is described with the set, THETA notation is also described using in a similar manner.

The theta notation is defined as a notation that gives the functions with tight boundary limits of given run-time function by some constants. Asymptotic tight bound is denoted with the Greek letter theta.

Mathematically it is defined as below:

\Theta(g(n)) = \lbrace f(n): 0\leq c1*g(n) \leq f(n) \leq c2*g(n), \forall n \geq n0\rbrace

The function g(n) is defined using the run-time of the algorithm, and the set is defined using the rules in such a way that the function g(n) sandwiches the function f(n) by some constants c1 and c2.

Omega

Asymptotic lower bounds give you the function with lower slopes than the calculated run-time function f(n) by some constants c.
Mathematically the asymptotic lower bound notation is defined as below:

\Omega(g(n)) = \lbrace f(n): 0\leq c*g(n) \leq f(n), \forall n \geq n0\rbrace

All the functions in the set would have slower growth slopes than the computed run-time function of an algorithm. So with the change in the input to the run-time function the growth observed in the set of functions would not be a greater than the run-time function itself.

Image source: Internet.

ES6 Promises

Chaitanya — Wed, 15 Jan 2020 18:11:59 +0000

Some of the features to learn in ES6 are Promises, async-await, destructuring and more.

Here In this blog, we can explore the ES6 Promises and more details about them.

Before to get into the Promises, we need to examine the difference between asynchronous and synchronous.

Generally, when we compile the code it compiles with JIT Compiler and Intrepretes the code line after the line and continues till the end of the file.
The execution of the code happens with-in Interpreter each line.
Such execution is called synchronous.
Synchronous:

            fun()
          {
            console.log('Hello World1');
            console.log('Hello World2');
            console.log('Hello World3');
          }

          fun();

Line2 doesn't execute till the completion of the line1, and same goes with the line3. The execution start time of a new line will be after the completion of the old line.

Point to remember: JavaScript is used in the Web apps and in which communication between the Client and Server happens

It may not seem to have any problem with such the execution, but while the communication between server and client is done with the JavaScript execution, If any of the JS code executes for a long time till then the other part of the file has to wait for the completion of the execution. if it happens to take a long time(for suppose to be 10min or more), till then the other part has to hang on. Here the problem arises. Such problems can be resolved with the asynchronous execution type.

             fun()
             {
                setTimeout(function fun1()
                              {
                                console.log('Hello from function');
                              },2000);
                 console.log('Hello fromoutside fun');
             }

             fun();

Things to notice from above code:

function fun1 is passed as a parameter to the setTimeout function(It's not a function call but a function definition itself)
setTimeout is an in-built function which executes the passed function parameter after n seconds, where n value is passed as the second parameter to the setTimeout.
It's a basic and general one to consider setTimeout as an asynchronous as it takes executes after a few seconds. Here we are using the setTimeout function for the simulation of the asynchronous type of code.

let us consider one example for more explanation


     myvar=100;
     console.log('Before function Myvar:'+myvar);
     setTimeout(()=>{
          myvar=myvar/2;
           },2000);
     console.log('After function Myvar:'+myvar);

Output
You may expect the output would be to print the value of myvar value as 100 and 50 respectively.
But when you run it in v8 console you would get the output as below

In order to print the Myvar value as 100 and 50 respectively after the first and second console of the variable, we need to make use of ES6 features

It(Asynchronous code execution) can be achieved through

a. function callbacks,
b. Promises,
c. async-await functions.

Here we will look at details about the Promises.

Promises are in-built objects, which are instantiated with the Promise constructor. The Promise constructor takes a function as a parameter.
Promise objects have three states in any of the execution:
Three of the Promise states are:
a. Pending state,
b. Resolved state,
c. Rejected state.

Whenever we want to execute the asynchronous code we will wrap such block in the Promise and write it so we can achieve what we require. In order to make it we instantiate an object with Promise constructor and use the object for further computing. Promise constructor has a function parameter. so we need to pass it in the call.

p = Promise(function);

`
This is how we need to instantiate the Promises. At the instantiation level, all the promises would be a pending state. Now we need to include the asynchronous code in the function parameter. Thus we will look at the implementation of it. Based upon the Implementation of the promise it would resolve Also, that parametric function also has again two function parameters. By convention, these two functions are named as resolve and reject.

p = Promise(function(resolve,reject){
                   //Asynchronous code block
});

In the function parameter after the asynchronous code Implementation, the promise needs to be resolved into a rejected state or fulfilled state upon the success or failure of the promise.

For further computation based on the results of the Promise states, we can proceed with the then or catch functions.

Example scenario: If the asynchronous code is Implemented and the promise reaches the fulfilled state. Hence the result can be taken in the then method of the promise instance.

Consuming Promises

myvar=100;
console.log('Myvar before function:'+myvar); 
p = new Promise(function(resolve,reject)
                {
                   setTimeout(()=>{
                                    myvar=myvar/2;
                                    resolve(myvar);  
                                   },2000);
                                 //promise is fulfilled with resolve call
                });
p.then((result)=>{
console.log('Myvar after function:'+result);
});
})

'Then' method has an extra second parameter where the error of the resolved promise can be handled. resolve and reject can pass a string, variable, array or of any other data types. Here we are passing the numerical variable whose value we need it in future circumstances.

But if the asynchronous code implementation is deduced that it leads to rejected state from the Pending state. Then the resultant compilation would not go to the resolve function but to the catch promise method.

password='mypassword';

p = new Promise(function(resolve,reject)
{
             //Async code block
              if(password == 'mypassword')
               resolve();
              else
              reject();
});

p.then((result)=>{
          console.log('Valid Password');
});

password='password';

p = new Promise(function(reslove,reject)
{
             //Async code block
              if(password == 'mypassword')
               resolve();
              else
              reject();
});

p.then((result)=>{
          console.log('Valid Password');
});

p.catch((error) => {
          console.log('Invalid Password:Error');
});

As the promise is rejected, it is handled with the catch method.

Promise Object after asynchronous implementation will return the Promise object again.which is resolved/rejected.

But if you want the any implementation to be resolved at a particular instance then it can be done with the resolve method.

Creating settled Promises

p = Promise.resolve(3);

p.then((value)=>{
     console.log('value:'+value);
});

The above code prints the numerical value 3.
so we need to pass the function for the direct transfer of a promise to resolved state. We can make it upon the function call. Note that we didn't create promise object here with new keyword but we directly called the resolve method on the promise constructor. And as stated earlier resolve method returns the Promise but fulfilled state which can be handled in 'then' method.

same can be done with the reject method if one wants to reject the promise object with the rejected state. While the rejected state can be handled with the catch method.

p = Promise.reject(3);

p.catch((value)=>{
     console.log('Rejected value:'+value);
});

Chaining of Promises
As the fulfilment of the promise to resolved state or rejected state, we consumed them separately upon the Promise object with then and catch method calls. But they can also be chained.
Considering the above example again here.


password='password';

p = new Promise(function(reslove,reject)
{
             //Async code block
              if(password == 'mypassword')
               resolve();
              else
              reject();
});

p.then((result)=>{
          console.log('Valid Password');
}).catch((error) => {
          console.log('Invalid Password:Error');
});

Note that the promise methods are defined on the same promise object 'p'. Whereas before it was defined separately on p. Such a methodology is called chaining of promises.

Interested can check for:

Promise.all, and various other Promise methods.
callback functions and call back hell problem
async-await functions.

Web Services & Architecture Styles

Chaitanya — Wed, 08 Jan 2020 12:55:09 +0000

WEB-SERVICES

The service offered by the components which can be invoked or used to invoke the other components over the Inter-network.

Web Service Implementation methods:

        1. Using Remote procedure(RPC) 
        2. Using Service-oriented-architecture(SOA).
        3. Using Representational State Transfer(REST).
        4. Using Application Programme Interface(API).

More About the Service:

In the typical Client-Service architecture model, where client requests and the server responds, the same happens here in the services. Where one component(service requestor) would request an object and client(service responder) object would respond with success/failure.

Service Provider:
From where the required services can be caught with the Invocation if it has, through the service broker/service repository/service registry. It responds if it has if it doesn't then it invokes other service provider and get the objects.

Service Requestor:
Service requestor requests the required services and makes the resources avail to the components through the series of communications. The communication between the Service requestor and the Service Provider would happen through the Service repository/Service registry. It is called Service consumer as it consumes the services from the Service Provider.

Service Broker:

These types of services act as an intermediary component between the Service Requestor and the Service consumer. Sometimes when the Service Provider doesn't have the resources asked by the Service consumer, then the present Service consumer would request the corresponding resources for other service providers.

Example:
Let us assume Service requestor(SR1) has requested through the service broker(SB1) to the service provider SP1, but the service provider (SP1) doesn't have the corresponding resources. So now the SP1 would request the same resources to another service provider(SP2) in the name of service requestor(SR2) to the SP2 through the same/other service broke. At the same time, here SP1 is a service broker to the SR1. Eventually, It may continue as long as the resource is available. After the resource is found at SP[n]. It would return the same result to the service requestor(SR1) which might resemble Peer-to-Peer style.

And Hence the same component might act as a service requestor as well as the service provider/service broker.

Few of the ARCHITECTURE STYLES:

  Basic Architecture styles in order:
  1.Client-Server
  2.Peer-to-Peer
  3.Monolithic
  4.Service-Oriented
  5.Micro Services

Starting from the First

Client-Server

As stated above the Server is the resources provider while the client is the one who would access them. Many clients would request the same/different resources and the server shall serve all the client requests. A client can access the files from the remote as well.

Peer-to-Peer

All the systems(Nodes) would be collectively made network and share the files among them, whenever required. Each node can access common files and folders. The sharing is done through the medium of cable, Optical fibre.
Every node has the same processing power and Equipotent.

Monolithic

The software is made upon the single and only one module. All the features and tasks will be done through the same module. Whenever the changes required to make then, the same module need to be changed and deployed the same.While the modularity of the modularity programming style is very thin. It can be compared to the analogy of the Solo player playing the game.

New Generation Architectures:

Service-Oriented

Encapsulating all the application logic within a few components and share them as the services among them with the common protocols such as Simple Object Access Protocol(SOAP), and the messages can be exchanged with the XML.
Each of the Component in the SOA may have specific functionality and SOAP is the protocol used to convey the messages between the components and HTTP protocol is used to access the application at the higher level of communication between the applications. While the Web Service Description Language(WSDL) is used in the SOA to describe the services available to other components so other components can access them. But the Implementation particulars of the services in the components are not represented in the WSDL, but to be done in the XML. In between Universal Description Discovery and Integration(UDDI) is used to describe the description, integration of the web services.
It acts as the index of the web services available in the Web. It can be compared to the Phone Directory where all the services and the contacts are available.

A minute Issue to be discussed in the SOA is the communication between the applications of different types which are made of different programming languages an incompatibility issue is araised. This incompatibility can be resolved using the SOAP implementation methodologies of Web services through an Internet Network. This resolves the major issue in a simple fashion and made the application-to-applications communication simpler. It acts as an Interface of the different applications. It not only solves the single-layered software problem but also a multi-layered architecture problem.

Micro-Services

In short, the REST is the architectural style of the Micro-services. But It can also be Implemented even in many ways. Coming to the REST it shortened from the Representational State Transfer where it means that whatever the resource/objects present would be accessed with the URLs'
and the result would be transferred in JSON format. The REST couldn't be complete without the HTTP methods which are based on CRUD operations.
REST is a state transfer strategy method and stateless which means that the state would not be stored.

Example: You can Implement the HTTP methods on the object and the state of the resource is always checked, and the result is returned.
Suppose that I use the HTTP Delete method and delete an Image, I could never know that it is deleted unless the GET method is imposed on the same resource and result would be found to be not found and hence the resource is deleted. Hence it can be seen as the verification method for the deleted resources.

It is also to be noted that making use of URI's/URL's doesn't mean that you are using the microservices.URI's can also be used to access the other resources on the WEB.

REST-API
API is the way of implementing the web service access methodologies, where the services are taken and given. API acts as the gateway to Interact with any of the applications to the outside world, who wants to communicate with them.
Example: Facebook offers the "facebook share API" which can be used to share the specified sites on your facebook wall.

In simple API is the way of modern communication between the two applications, and the results are formatted in JSON.
The REST API is to make the resources available on the web through the REST architecture. Each of the resources in REST would have specific culture and feature viz UI, log in. Formally to be the give-and-take culture. And the API's can also be made a call through an app over the Inter-Network.
To make it simple, the collection of services gives an application,
where data flows within the services to make it a complete architecture.
At last, API is not the same as of REST.

Points to Check:

Differences between Service Provider and Service Requestor
Differences between Monolithic and SOA
Differences between SOAP and API
Differences between the REST and API
Differences between the Microservices and API
Differences between the SOAP and SOA

Image source: From Book "Service-Oriented Architecture: A field guide to XML and Web services".

Esoteric Programming Language

Chaitanya — Wed, 01 Jan 2020 15:27:53 +0000

JSF*ck

As every CS guy would always love to learn a new programming language. This Blog emphasise the fun part of the programming languages(playing with the programming language)

As of Introduction
Programming languages are divided into many types depending upon the properties they possess:
Few of the Programming languages categorised as

Array type
Declarative type
Concurrent type
Esoterical type
Compiled type
Interpreted type
Functional type and the list goes on...

You can find the complete list in the wiki.

To keep things tidy we would not go into the question of what properties did segregate them.

Some languages even might belong to more than one category as it would possess the specified categorical properties.
Example: Java -It posses the properties of Declarative and Compiled type.
Java belongs to both categories.

Now the discussion is all about the Esoterical programming languages.
Esoterical Programming languages however, they are not meant for any software development, but to test the limitations of the conventional programming languages(as stated by the one of the sites). Learning them doesn't make you a career, but might help to play with computer and enjoy better for those who are obsessed with computer programming.

Taking dive deep into the Esoterical type programming languages discussion. programming languages list under the esoterical type states as BF(Brain Fuck), JSFuck, Piet.

I would like to make it short and formal to spell JSFuck as JSF in this blog.
Now, here the discussion is about JSF It would be a tutorial for the JSF Programming Language. Among them, Piet and BF would require the special compiler to execute, whereas the JSF can be executed in the web-browser console and node as well.
As the name suggests JSF is a subset of JavaScript and the syntax whatever would be similar to the Java Script.

Those who are familiar with the JS would find of no surprise in the JSF syntax. JSF includes only 6 characters and the whole script need to be written using only those prescribed 6 characters.

6 characters listed here: [, ], +, (, ), \

JSF an exceptional of esoterical programming languages

Advantage of learning Esoterical languages wouldn't help but learning JSF
make you strong with the puzzling scripts of JavaScript, which need not to scratch the head when encountered while dealing with JS.

To be said in another way, to practise the confusion part of JS getting familiar with JSF will surely help

Making JS Basics Familiar

    []      //evaluates []
    ''      //evaluates ''

   '' == []     //evaluates true
   '' === []    //evaluates false

! operator in JS returns the Boolean NOT of the operand.
In JS empty string, Boolean false, null considered as a falsy.

!''       //returns true
![]       //returns false
!Nan      //returns true
!null     //return true

As a Bonus, few of the JS would go

![] == null //returns false

Here null is not a Boolean yet, still, it is a special null value so it returns false. After the occurrence of the '!' operator type coercion occurs and converted into Boolean value.

'+' operator is used as concatenation operator as well as the addition operator. The behaviour depends upon the operands being acted.
If any of the operands is String it would convert the non-string operand into the String and concatenate into a new String.

  "Hello"+2            //returns Hello2 String
   "Hello"+Nan         //returns HelloNan
   "Hello" + Infinity  //return Hellonfinity

Though Nan, Infinity are special values in JS, type coercion is made upon the Nan and String type result is obtained.

    +[]         //return Nan
    +![]        //returns 0
    +!![]       //returns 1
    2 + ''      //returns '2'
    [] + []     //returns string
    [2] + [3]   //returns '23'

Detailed JSF

In JSF as no special characters should be used except those of 6 characters makes the JSF Interesting.

   ![]            //value '0'
   !![]           //value '1'
   +![]           //value 0
   +!![]          //value 1
   !![] + ![]     //value 10
   [][[]]         //value undefined
   +[![]]         //value NaN

Same as in JS, JSF has Constructors but with of those 6 characters

[] + []    //String Constructor

+[]        //Number Constructor

![]        //Boolean

[]         //Array Constructor

Whenever you want to print the value n, the value of one (+!![]) should be added to recursively 'n' times. And hence the corresponding result would be obtained.

Now Whenever you want to print the alphabets, we shall extract the corresponding characters from the String and print them

Example:

   [![] +[] ][ +[]][ +[]]   //gives f

Usage of [ ]

An array is an object to hold one/more number of elements and each element is given an index to access. An array may also contain other arrays inside it as an element. It is legal to use such.

IN JSF [ ] is regarded as an Array

   []       //Array
   [[]]     //An array with an element at index 0 as []

Whenever we want to access the elements in Array we would do them with index placed within the square brackets []
When we want to access the element at the index at 0


[][]          //Syntax to access the elemnts in an array
[][[]]        //sytax to access the '' property of object inside first[]  
[[]][ +[]]    //returns an empty array []

As stated earlier [ ] is an array, and [ ] can also be used in the array elements access. Same happens here in the first expression
To keep things simpler [array][index] supposed that 'array' is the name of an array. But remember that we don't have alphabets to name the array hence we should keep the names as with expressions.

In the above second expression, we are trying to access the property of the Object stated in the RHS side. It returns the property value if it has.
But in the expression, it is given as [ ], which evaluates as ''(empty string). Hence we are trying to access the ''(empty string) named property to an object in the RHS side.

In the above third expression, there are two parts to evaluate first let us evaluate the left side expression as goes [[]]. It can be evaluated as an expression of an array with an inner array as its element.
And the second expression goes as [ +[]]] as the left part of the expression evaluated as an array, the square brackets in the right-side can be used to access, so the right part needs to be given an integer value to access the elements in an array. To get the index value we are accessing we need to evaluate the inner expression of the right-side part.

so upon evaluation of the inner +[ ] expression it gives the value of 0, and at the index 0, an empty array is present so it returns an empty array.

The same method to access the characters in the strings can be used.


   ![]                     //returns false
   ![] +[]                 //returns false as string
   [ ![] +[]]              //Keeping the false string in an array
   [ ![] +[]][+[]]         //returns false takes outside from an array
   [ ![] +[]][+[]][+[]]    //returns the 'f'

And the various methods can be used to extract the characters from the predefined JS words.such as true, null, undefined, Infinity, false.

Isn't that fun to get the numerical values and other characters whatever you required and whenever without actually using them.

Yes,It is....

JSF can be used to write functions and objects as well.
I want to make it as a series of posts and complete them.
In the next post, we could dwell little with the Functions, classes, Objets and more.

Programming is fun, Programming languages are funnier and, post readers are the funniest :) .

Sigh.