DEV Community: Saran Chakravarthi

Event propagation in javascript

Saran Chakravarthi — Wed, 11 May 2022 13:53:45 +0000

Introduction

Javascript events happen in three phases, namely,
1.the capturing phase,
2.the target phase and
3.the bubbling phase.

Before understanding how event propagation works, let's understand why we have to understand event propagation.

Sometimes, JavaScript event handlers may get invoked in unintended places. If we understand how event propagation occurs, we can avoid those kind of unintended event handling.

Consider the following example:

<div id="main-section">
      <button id="main-btn">click me</button>
</div>

const mainSection = document.getElementById("main-section");
const mainButton = document.getElementById("main-btn");

mainSection.addEventListener("click", () => {
  console.log("Clicked main-section");
});

mainButton.addEventListener("click", () => {
  console.log("Clikced button");
});

We have a div element with id main-section , inside which we have a button with id main-btn.

We are adding a click event listener to the div, which will print the string Clicked main-section to the console. Similarly, we have a click event listener for the button as well, which will print the string Clikced button to the console.

Let's say we click the button, what will get printed on the console?

If you guessed Clikced button, you are wrong. It will print both Clikced button and Clicked main-section.

The event handler of button is invoked first and then the event handler of div is invoked.

The three phases

Let's understand why. The event is not generated at the target element, where the event happened. Instead the event is generated at the root of the document (i.e, the top of the DOM tree)

Then the event travels downwards, from the root to the target element. This phase is called the capturing phase. As it travels down, the event will be passed through every single parent of the target element.

As soon as the event reaches the target, the event listener attached to the target element will start executing. This phase is called as the target phase.

Once target phase is over, the event will travel all the way up to the root again, this phase is called as the bubbling phase. In bubbling phase,similar to capturing phase, the event will be passed through all the parents.

We can notice that, in case of both capturing phase and bubbling phase, events are passed through the parents. It's like the event has happened in all these parent elements. Which means, if you have an event listener of same kind in one of the parent elements, that event listener will also be executed while performing the event on the target.

By default, events can be handled in the target element, during the bubbling phase. This explains why the event handler of div is invoked after the event handler of the button.

During the capturing phase, the event will travel from the root to the button and the target phase will take place, during which the event handler of the button will get invoked and Clikced button will get printed to the console. And finally during the bubbling phase, the event will travel from the target to the root, through the button's parents. Since we have a click event listener on the main-section div, it will be invoked and the string Clicked main-section will get printed to the console.

Event bubbling prevention

Inorder to prevent the propagation of the event, you can invoke the stopPropagation method of the event. If you invoke this method, the event propagation will stop then and there in the target itself, it will not travel up to the root. In other words, the bubbling phase will not take place.

mainButton.addEventListener("click", (event) => {
  console.log("Clikced button");
  event.stopPropagation();
});

JavaScript Demystified: Short-circuiting, nullish coalescing and Optional chaining

Saran Chakravarthi — Wed, 12 Jan 2022 06:48:24 +0000

Hello Devs! In this blog, I'll walk you through the concepts of logical operator, Short-circuiting, nullish coalescing and optional chaining in JavaScript.

Logical operators:

It is essential to understand the working of logical operators inorder to understand short-circuiting.

There are three logical operators in JavaScript: the AND operator, the OR operator and the NOT operator.

AND operator:

AND operator will return true only if all the values are truthy, else it will return false.

const a = true, b = "hey", c = 0, d = null;
a && b //true
a && c //false
c && d //false

OR operator:

OR operator returns true if atleast one of the values is true, else it will return false.

const a = true, b = "hey", c = 0, d = null;
a || b //true
a || c //true
c || d //false

NOT operator:

The NOT operator will return true if used with a falsy value and it will return false if used with a truthy value.

const a=false, b = "hey"
console.log(!a) //true
console.log(!b) //false

Out of these three operators, the AND operator and the OR operator can be short-circuited.

Short-circuiting:

Short-circuiting can be defined as the phenomenon in programming by which the compiler or the interpreter skips the evaluation of the sub-expressions in an expression, as soon as it determines the final result of that expression.

AND operator:

We know that the AND operator will return true only if all the values are true. So, it can safely return false, as soon as it encounters a falsy value. It does not have to check other values, because if one of the values is falsy, entire expression will turn out to be false.

const a = 12, b = "hello", c = 0, d = true;
console.log(a && b && c && d) // 0;

Here in this example, JavaScript will stop evaluating the expression as soon as it encounters the variable c. Because c is 0 , and 0 is a falsy value.

OR operator:

The OR operator returns true if atleast one of the values is truthy. So, as soon as JavaScript encounters a truthy value, it can stop evaluating the expression.

const a = 0, b = "", c = 12, d = false;
console.log(a || b || c || d) //12;

In this example, JavaScript will stop evaluating as soon as it encounters c, since it's a truthy value.

Before es6, default parameters were not a thing. So programmers used "OR short-circuiting" to get things done.

Let's say you are developing the backend for a bank. There are two types of accounts, zero balance account and normal account. The minimum balance for normal account is 1000, if that is the case, the customer can choose not to enter any value for deposit amount. In the backend, we can check if the deposit amount is present, if it is present, we can set it as the balance, if not, we can set 1000 as the balance. Sounds good?, let's implement this logic.

let dataBase = [];

function createAccount(name, id, depositAmount){
  const newUser = {
    name: name,
    id: id,
    balance: depositAmount || 1000,
  }
  dataBase.push(newUser);
  return newUser;
}

const user1 = createAccount("Alice", 1, 5000);
console.log(user1); //{ name: 'Alice', id: 1, balance: 5000 }
const user2 = createAccount("Bob", 2);
console.log(user2) //{ name: 'Bob', id: 2, balance: 1000 }
const user3 = createAccount("Joe", 3, 0);
console.log(user3) //{ name: 'Joe', id: 3, balance: 1000 }

uh-oh, seems like our logic isn't that good. Notice what happens when the value passed as depositAmount is 0(incase of zero balance account). 0 is a falsy value hence the balance will get assigned with 1000. Which is wrong and bad for your business. What if I tell you there's a way around it?

Nullish coalescing operator.

The nullish coalescing(??) is very similar to the logical OR operator. The difference is nullish coalescing operator treats null and undefined as falsy values and everything else as truthy values.

let name = undefined ?? "John";
console.log(name);//John

let isVerified = true ?? null;
console.log(isVerified); //true

So in the bank account creation example, we could use nullish coalescing operator instead of the OR operator. Trust me, it would save your bank a ton of money.

let dataBase = [];

function createAccount(name, id, depositAmount){
  const newUser = {
    name: name,
    id: id,
    balance: depositAmount ?? 1000,
  }
  dataBase.push(newUser);
  return newUser;
}

const user1 = createAccount("Alice", 1, 5000);
console.log(user1); //{ name: 'Alice', id: 1, balance: 5000 }
const user2 = createAccount("Bob", 2);
console.log(user2) //{ name: 'Bob', id: 2, balance: 1000 }
const user3 = createAccount("Joe", 3, 0);
console.log(user3) //{ name: 'Joe', id: 3, balance: 0 }

Optional chaining:

Has it ever occurred to you, when you try to access a property of a variable you get the following error:

Error: Cannot read properties of undefined

This is because we did not receive the expected object, instead we received undefined. I know this error is annoying.

The optional chaining operator checks whether the referenced object is nullish(null or undefined) or not. If it is nullish , it returns undefined. If not, it returns the actual value of that property.

const person = {
    name: "Joe",
    age: 25,
}

console.log(person.name); //"Joe"
console.log(person.fav?.food); //undefined

connect with me:

I hope you liked this blog. Want to connect? You can DM on Dev.to and twitter.

Introduction to cloud computing

Saran Chakravarthi — Wed, 15 Sep 2021 18:37:47 +0000

Why cloud computing:

Before understanding what cloud computing is, Let's understand why cloud computing was needed and what are all the problems we had that cloud computing solved.

Before cloud computing, the business should buy a stack of servers for their use. They have to allot some space to place their servers. And then they have to hire people to monitor and maintain the servers. As the traffic increases, they have to buy more servers and hire more people to maintain the servers.

Now, let's consider an e-commerce website. The business realizes that it would need 1000 more servers for the new year sale. It could go ahead and buy 1000 more servers and hire more people to maintain those servers. But most probably the traffic won't be that high after new year sales, which means some servers have to stay idle most of the times. So they end up paying a lot more than they use.

The business needs someone who can provide 1000 servers whenever needed and take those servers away whenever not needed. Cloud exactly provides this.

Cloud is a solution with dynamic way to scale up and scale down the services as required. Cloud signifies abstraction. It is built of many data centers. The user need not worry about maintenance or security, the cloud provider will take care of it. When you use cloud computing, you don't have to buy any servers, you can just rent servers for a time period. Hence, there is no principal expenditure. The users gain access to advanced features. Users can rent only the services they need. Cloud computing follows "pay as you use" model, you have to pay only for the services that you use.

Now, the e-commerce business can rent 1000 more servers for a time period of three weeks. Pay as you use model and scalability makes cloud computing cost effective and agile.

What is cloud computing

Cloud computing is the on-demand availability of computer system resources, especially data storage (cloud storage) and computing power, without direct active management by the user. Large clouds often have functions distributed over multiple locations, each location being a data center. Cloud computing relies on sharing of resources to achieve coherence and economies of scale. Cloud providers typically use a pay as you use model, which can help in reducing capital expenses but may also lead to unexpected operating expenses for unaware users.

History of cloud computing

Before cloud computing, there was client-server computing, which is a centralized storage in which all the data, applications and controls are stored in the server side. If a user wants to access a specific data or a software, the user needs to connect to the server.

After this, distributed computing was introduced, in which computers are networked together and share the resources when needed. Cloud computing is based on the concept of distributed computing.

In 1961, John MacCharty proposed the concept of utility computing. Utility computing suggests that computing can be sold like a utility, just like water or electricity.

The launch of world wide web in the early 1990s had a huge impact on cloud computing. Millions of computers were connected to the internet which led to the dot com revolution and e-commerce gaining popularity. As a result, businesses like salesforce.com were born. Salesforce was the first company to offer application as a service over internet, Salesforce pioneered the concept of delivering enterprise app through a simple app.

Three years later, in 2002 Amazon launch Amazon Web services (AWS), it provided services like storage, computation and even human intelligence. Few years later in 2006, Amazon introduced new services like Amazon simple storage service (Amazon S3), Amazon elastic compute cloud (Amazon EC2). These services helped companies and individuals to rent virtual computers and run their own programs and applications on the virtual computer(s) through internet. Later that year, Google launched Google docs services.

In 2009, Google apps started to provide cloud computing services to enterprise applications. Microsoft entered the world of cloud by launching Microsoft Azure.

Now, the end users are familiar with the concept of cloud. They happily store their data in remote storage location provided by a cloud storage service provider.

What is a cloud service?

The term "cloud services" refers to a wide range of services delivered on demand to companies and customers over the internet. These services are designed to provide easy, affordable access to applications and resources, without the need for internal infrastructure or hardware. From checking email to collaborating on documents, most employees use cloud services throughout the workday, whether they’re aware of it or not.

The aim is to fullfil an customer's needs. A customer might have 10 needs, the aim of a cloud service provider is to meet all 10 needs. The service provider can carry out either customized approach or packaged approach to fullfil the customer's needs.

How do cloud services work?

Cloud services are fully managed by cloud computing vendors and service providers. They are made available to customers from the providers' servers, so there's no need for a company to host the applications on its own on-premises servers.

Types of cloud service models:

Cloud services can be broadly classified into three types of service models:

SaaS
IaaS
PaaS

SaaS

SaaS stands for software as a service. It is the most common use case of the cloud services. SaaS allows users to connect to and use cloud based applications over the internet. The software actually runs at the cloud service provider's data center on their physical servers. Even the data captures is stored in the service provider's data center. Everything is managed for us by the cloud service provider, we simply access the software over the internet.

Consider Gmail, the user is only concerned about using the application properly. The user need not worry about things like how the message gets delivered, what if the server goes down, what are the security concerns, what's happening in the background. Gmail is a good example of Saas.

Eg: office 365, Netflix, Amazon prime, Dropbox, Google drive.

Advantages:

Easy to get started
Accessibility
Automatic updates
Flexible usage based pricing
Reduced financial risk
Affordable
No maintenance cost as it does not require any additional hardware or software versions.
Scalability

Disadvantages:

Insufficient data security
Troublesome software integration
Once an enterprise becomes dependent on a SaaS application, it will be difficult to switch from one vendor to another.

PaaS

PaaS stands for platform as a service. PaaS is a programming platform for developers. This platform is generated for the programmers to create, test, run and manage the applications.
A developer can easily write the application and deploy it directly into PaaS layer.
PaaS gives the runtime environment for application development and deployment tools.
Server and virtual machines are provided and maintained by the cloud service provider. No need to handle backups as its also handled by the cloud service provider.

eg:Google Apps Engine(GAE), Windows Azure, SalesForce.com, Amazon Web Services(AWS), IBM Blue mix

Advantages:

simplified development
lower price
Integrates with web services and databases.
Accessible to various users via the same development application.
Instant community support
Builds on virtualization technology, so resources can easily be scaled up or down as per the organization's need.
Developer only requires a PC and an Internet connection to start building applications.

Disadvantages:

Security risks
Developer can write the applications as per the platform provided by PaaS vendor hence the moving the application to another PaaS vendor is a problem.

IaaS

IaaS stands for infrastructure as a service. In IaaS, you buy complete resources rather than purchasing server, software, network equipments individually. The customers can access these resources through cloud computing service provider platform. The customer need not worry about the principal expenditure of setting up the servers or maintenance, as they are taken care of by the cloud service provider.

Eg: digital ocean, Cisco meta cloud, linode, Google Compute Engine (GCE)

Advantages:

The customer doesn't have to worry about principal expenditure or maintenance cost.
Enhanced scalability
Support for dynamic workload
Users can choose a CPU, memory storage according to their needs
Automated administrative tasks
Flexible

Disadvantages:

Limited customisation
Security risks: IaaS providers secure the infrastructure, but businesses are responsible for anything they host.
Technical issues: downtime is one of the most common technical issues faced while using IaaS solution.
Changing vendors can be difficult

Cloud deployment model:

A cloud deployment model is a specific configuration of environment parameters such as the accessibility and proprietorship of the deployment infrastructure and storage size. This means that deployment types vary depending on who controls the infrastructure and where it’s located. Broadly, it can be classified into 4 types:

Public cloud
Private cloud
Community cloud and
Hybrid cloud

Public cloud

A public cloud is available for use, for anyone. If an individual subscribes to a public cloud service, the cloud service will provide services to that individual. It allows the system and services to be easily available to the general public.

Advantages:

1.Low cost
2.Higly scalable
3.Flexible
4.No hardware setup
5.No infrastructure management

Disadvantages:

Reliability issues
Data security and privacy concerns

Private cloud:

Unlike public clouds, a private clouds are owned by a single company. Hence, it is also known as internal model or. Corporate model.

The server can be hosted on the premises of the owner company or externally. Either way, the servers are to be maintained by the owner company.

Advantages:

Highly private
Secure
Control oriented
Private model can support legacy systems that cannot access the public clouds

Disadvantages:

High capital expenditure.
Fixed scalability
High maintenance cost.

Community cloud:

In community cloud model, only one company owns and maintains the cloud servers. But the cloud infrastructure is shared among different organizations with similar background. Access to a community cloud environment is typically restricted to the members of the community. An example of such a community is where organizations/firms are there, along with the financial institutions/banks. A multi-tenant setup developed using cloud among different organizations that belong to a particular community or group having similar computing concerns.

Advantages:

Cost reduction
Collaboration
Security and reliability
Ease of data sharing

Disadvantages:

Increased maintenance cost
Remote access may be limited
Have to hire more IT staffs

Hybrid cloud model:

As the name suggests, hybrid cloud model is a combination of two of more cloud models combined as one architecture. Hybrid model will have the advantages of all the models involved in it.

Advantages:

Flexible
Can be customized for a company's need.
Unique balance of control and performance
Quick deployment
Scalability
Low cost

Disadvantages:

Compatibility
Security
Networking bottlenecks
Maintaining visibility over a hybrid cloud service is complicated

Features of cloud computing:

Let's look at the most important features of cloud computing.

On demand self service:

This is a fundamental characteristic of cloud computing. The cloud computing services does not require much human interaction from the service provider. The user can provision, monitor and manage the resources as needed.

Resources pooling:

The cloud service provider can share the computing resources (like storage,network,server) among the users as per the individual's needs. In other words, the cloud service provider's resources are pooled to multiple customers using a multi-tenant model.

Scalability and rapid elasticity:

Resources can be elastically provisioned and released to meet immediate requirements. And the resources can be scaled in and scaled out as needed. This enables cost effective running of workloads that require large number of servers but only for a short period of time.

Economical:

The user has to pay only for the services used. There are no hidden charges.

Measured services:

The resource consumption is measured and reported for each service. This gives transparency to both the service provider and the consumer. This helps the user understand the effective use of resource.

Security:

Security is one of the most important features of cloud computing. The cloud service provider creates a copy of the data, so that even if the data gets lost by any chance, the copy version can be restored.

Broad network access:

Cloud computing services are generally accessible from anywhere over the internet. And incase of private clouds, services can be accessed from anywhere within the enterprise. The services can be accessed on a variety of platforms.

Maintenance:

The servers are maintained by the cloud service provider. The downtime is generally very low and in some cases, there is no downtime at all.

Challenges

Lack of expertise

With the increasing workload on cloud technologies and continuously improving cloud tools, the management has become difficult. There has been a consistent demand for a trained workforce who can deal with cloud computing tools and services. Hence, firms need to train their IT staff to minimize this challenge.

Cloud Cost Management:

Cloud computing enables you to access application software over a fast internet connection and lets you save on investing in costly computer hardware, software, management and maintenance. This makes it affordable. But what is challenging and expensive is tuning the organization’s needs on the third-party platform.

Another costly affair is the cost of transferring data to a public cloud, especially for a small business or project.

Cloud Migration:

It is easier to migrate a new application from one cloud service provider to another. Once application becomes dependent on a cloud service provider, it will be fairly difficult to move to a new cloud service provider.

Compliance:

Compliance means a set of rules about what data is allowed to be moved and what should be kept in-house. The organizations must follow and respect the compliance rules set by various government bodies. Whenever an organization transfers data from its internal storage to the cloud, it experiences compliance with the laws and regulations of the industry.

performance

When your business applications move to a cloud or a third party vendor, your business performance starts to depend on your provider as well. Another major problem in cloud computing is investing in the right cloud service provider.

internet connectivity

The cloud services are dependent on a high-speed internet connection. So the businesses that are relatively small and face connectivity issues should ideally first invest in a good internet connection so that no downtime happens. It is because internet downtime might incur vast business losses.

JavaScript Demystified: Hoisting

Saran Chakravarthi — Tue, 20 Jul 2021 11:09:30 +0000

Hello Devs! In this blog, I'll walk you through the concept of hoisting in JavaScript. Before we begin, go through the first blog of this blog series, if you haven't already.

What is hoisting

Hoisting is a phenomenon in JavaScript by which you can access the functions and variables even before declaring them in your program, without getting an error.

Let's see it with an example:


var x = 10;

function greet(){
  console.log("Hello world!");
}

console.log(x);

greet();

Output:


10
Hello world!

The above program is pretty simple and straightforward. Let's see what happens when we try to access the variable and the function before declaring them.


console.log(x);

greet();

var x = 10;

function greet(){
  console.log("Hello world!");
}

Output:


undefined
Hello world!

If you have read the first blog, you already know why this is happening. whenever we run a program, an execution context is created, and it is executed in two phases, the memory allocation phase and the code execution phase.

During the memory allocation phase, memory will be allocated for variable X and it will be assigned with the value "undefined", similar memory will be allocated for the function greet and it will be assigned with the original function definition.

The value of X will be undefined, until and unless we reach the variable assignment of X , during the code execution phase.

In the second example, we are trying to access the variable even before assigning it with a value, that's why it's value is printed as undefined.

Undefined Vs not defined:

Undefined and not defined, are they the same? No. As we seen in the last blog, undefined is kind of a special placeholder keyword.

Not defined is an error, which is thrown when you try to access a variable which is nowhere declared in your program.

Arrow functions and function expression:

If you try to access Arrow functions and function expression before declaring them in your program, it will throw an error saying "Typeerror".


greet();

var greet = function(){
  console.log("Hello world!");
}


greet();

var greet = () => {
  console.log("Hello world!");
}

If you try to run either of the above code snippets, it will result in the following error:


TypeError: greet is not a function

Why? Because in this case, the function is assigned to a variable, so it's value is stored as "undefined". Hence the error.

Note: let and const variables will behave differently from var, it will be covered in the upcoming blogs.

What's next:

I hope you liked this blog, In the next blog, we will dive deep into functions and variable environment. Follow me to receive the notification.

Want to connect with me? You can DM on Dev.to and twitter.

JavaScript Demystified: The execution context and the call stack

Saran Chakravarthi — Fri, 16 Jul 2021 21:02:01 +0000

Hello Devs, "JavaScript demystified" is going to be a series of blogs. And this is the first one. I will try to cover the important yet not well-known javascript concepts in this blog series. I would like to start off the series by explaining the execution context and the call stack.

Execution context:

Execution context may be defined as the environment in which the code gets executed. Everything in JavaScript happens inside the execution context

It is composed of two components, the memory component and the code component.

The memory component:

The memory component, also known as the variable environment, stores the variable, functions and their values as key-value pairs.

The code component:

It is also known as the thread of execution. Inside the code component, the code is executed one line at a time.

Execution context is created in two phases. The first one is memory creation phase, in this phase the interpreter skims through the whole program and allocates memory to the variables and functions. The second phase is called the code execution phase, the code gets executed in this phase.

Let's visualize this with an example. Consider the following program:

var n = 10;

function double(num){
    return num*2;
}

a = double(n);
b = double(7);

When the program starts to execute, a new execution context will be created, since we are dealing with global level, it is called the global execution context.

Memory allocation phase:

On line number one, memory is allocated for the variable n, and it is assigned with the value "undefined". You can think of "undefined" as a special placeholder keyword (we will learn more about it in the upcoming blogs).

Then memory is allocated for double function, the whole function is assigned to it as its value.

Similar to variable n, memory is allocated for variables a and b, and they are assigned with the value "undefined"

This is how the execution context will look like:

Code execution phase:

Code is executed line by line, firstly the value of n will be replaced with 10. The function definition of double will be skipped, as it is just a definition, there is nothing to be executed. Then we reach the function invocation where double function is called. Now something interesting happens, a new execution context will be created inside the global execution context's thread of execution.

The same process will happen to this new execution context as well.

During the memory creation phase, memory will be allocated for num and will be assigned with undefined.

During the code execution phase the value of num will be replaced by 10.

When the program reaches "return" keyword, the control is returned to the function caller, along with value specified after the return keyword. Then that particular execution context is deleted. In our case, execution context of double(n) will be deleted.

similarly double(7) will also be executed.

Once the program reaches the end of the file, the global execution context will also be deleted.

The call stack:

The example we saw was pretty simple. But what if we have multiple function invocations inside a function, how will JavaScript handle it? The answer is call stack.

It is similar to the stack data structure. It follows the LIFO(Last In First Out) principle.

Whenever we start a program, the global execution context is pushed into the stack. After that if we call a function it is pushed into the stack. Once the code reaches the return statement, the function gets popped off the stack. The global execution context will be popped off when we reach the end of the file.

As we saw, JavaScript has only one call stack, hence it is single threaded. And it executes the code line by line, so it is synchronous.

But you might say, "I have used AJAX, JavaScript is asynchronous". No, JavaScript is not asynchronous. We will see how javascript handles asynchronous code in the upcoming blogs.

What's next:

I hope you liked this blog, In the next blog, I will cover the concept of hoisting. Follow me to receive the notification.

Want to connect with me? You can DM on Dev.to and twitter.

Stateful architecture Vs stateless architecture

Saran Chakravarthi — Fri, 16 Jul 2021 09:44:18 +0000

Let's say we have developed an application. For the sake of simplicity, let's assume that we have only two pages, login page and user profile page.

We should display the profile of the user only when they are logged in. Let's see how stateful application and stateless application handles this.

Stateful:

If we choose to use stateful architecture, we will have to store the state of the user(s) somehow. Usually the state is stored in the server itself.

But what if the server goes down? Since we store the state in the memory of the server, we could possibly lose all the stored states. It's hard to restore the state.

On the upside, we don't have to query the database everytime we receive a request, to check if the user is logged in or not.

What if we decide to have more than one server?, Let's say the user logs in by sending a request to server-1 and the state is stored in server-1. Now the user is trying to access their profile page, due to high traffic the request is directed to server-2. Remember, the state is stored in the memory of server-1 only, so according to server-2, the user is not logged in. This might lead to inconsistency. Hence, stateful application might not go well with horizontal scaling.

Advantages:

No need to query the database.

It is quick, as we don't have to query the database everytime.

Disadvantages:

If the server goes down, it will be hard to recover.

We can't scale up horizontally.

Stateless:

In case of a stateless architecture, a token is sent back to the client, when the user logs in. This token is stored in client's storage. Then this token is sent along with every request the user makes.

Inorder to make sure that the request is coming from an authenticated user, we check the token sent along with the request, against the data we stored in the database.

Since the token is stored in client's storage, we can easily recover if the server goes down. And horizontal scaling is much easier in stateless architecture.

But the catch here is, we have to query the database everytime we get a request.

Advantages:

Horizontal scaling is easy.
We can easily recover if our sever goes down.

Disadvantages:

We have to query our database, for every request.
Slower than stateful architecture.

I hope this article helped you. Want to connect with me? my DM is open on dev.to, you can connect with me on twitter

Horizontal scaling Vs vertical scaling

Saran Chakravarthi — Wed, 14 Jul 2021 18:12:19 +0000

Hello Devs, in this article I'll walk you through the differences between horizontal and vertical scaling.

What is scaling?

Let's say, you have developed an application and it is gradually getting traction. The user base is growing and the users are loving your app. Great!

The user base has grownup to a point where your system can't handle that much load. Not so cool. You don't want to disappoint your users, do you? You'll probably try to upgrade your system so that it can handle heavy load. You have two options:

Buying more machines
Buying a bigger machine

There you have it. Scaling may be defined as the process upgrading your existing system to handle more load.

Horizontal scaling:

It is the process of buying more machines.

Hmm.. if we have more than one machine, how do we make sure that the load is spread equally among the machines? That's where load balancers come into play. Load balancers make sure that the traffic is distributed equally among the servers.

Advantages:

Since we can buy as many machines as we want, we can say that horizontal scale scales well as the users increase.
Even if one of the servers goes down, other working servers can handle the request. Hence it is resilient.

Disadvantages:

Load balancing is required.
Servers communicate with eachother through network calls.
As we use more than one machine, it may lead to data inconsistency.

Vertical scaling:

It is the process of buying a bigger machine.

Advantages:

Load balancer is not required.
We use only one machine, hence the data is consistent.
The communication happens through interprocess communication, no network calls needed.

Disadvantages:

Single point of failure. Since we have only one machine, if it goes down the entire system will stop working.
Eventually we will reach the hardware limit.

Thanks for reading! I hope this article helped you. Want to connect with me? my DM is open on dev.to, you can connect with me on twitter.

Bracket notation Vs dot notation in JavaScript objects

Saran Chakravarthi — Tue, 13 Jul 2021 20:38:09 +0000

Hello Devs, in this article, I will walk you through the differences between using dot notation and bracket notation in JavaScript objects.

Consider the following object.


let animalsList = {
  cow:{
    legs: 4,
    sound: "moo",
  },
  cat:{
    legs: 4,
    sound: "meow",
  },
};

We can use both dot and bracket notation to access the properties. Make sure that you enclose the key within quotes, when you use bracket notation.


console.log(animalsList.cat); //{ legs: 4, sound: 'meow' }
console.log(animalsList["cat"]); //{ legs: 4, sound: 'meow' }

As you can see, dot notation has better readability, it is an advantage of using dot notation.

"So, if we can use both dot notation and bracket notation to access object properties, and dot notation has better readability, why do we even have bracket notation?", you might ask.

Let's say we have a function, and the key which we have to access is passed to the function as an argument.


function myFun(animal){
  console.log(animalsList.animal);
}

myFun("cow");

The above code will print undefined.

When we use dot notation, JavaScript searches for the key with the exact name we used after the dot( animal, in our case). Since the animalsList doesn't have a property called "animal", undefined is printed.

Let's try bracket notation instead of dot notation.


function myFun(animal){
  console.log(animalsList[animal]);
}

myFun("cow");

The above code will work fine and print { legs: 4, sound: 'moo' }, as "animal" will be replaced with the respective argument which was passed during function call.

To summarize, use bracket notation when you want to access property using variable, otherwise stick with dot notation.

I hope this article helped you. Want to connect with me? my DM is open on dev.to, you can connect with me on twitter.

Happy coding!

How to architecture state variables in React

Saran Chakravarthi — Tue, 13 Jul 2021 11:57:49 +0000

Hello Devs, in this article, we will see how to architecture the state variables in your react app.

If a state is used by a single component it should be inside that component.
If a state is used by multiple components in a tree and they are all direct children of the same parent component, it should be in their parent component.
If a state is used by multiple components in a tree but they are not direct children of the same parent component, it should be in context/redux.
If a state is used by multiple components in different trees, it should be in context/redux.

I hope this article helped you. Want to connect with me? my DM is open on dev.to, you can connect with me on twitter

Happy coding!