DEV Community: Saksham

What is HTTP?

Saksham — Sat, 30 Jul 2022 20:49:00 +0000

We all use HTTP when we surf on the web.
And without HTTP it's generally not possible to search the web.

Even if we try not to write "http" before our links, browser sets it to http by default.

Let's see what is HTTP?

What is HTTP?

We all know it is a transfer protocol used to send data over the web.

According to web - HTTP is an application level protocol used for fetching resources such as HTML document.

Application level means that it works on the top layer of the OSI model.

We won't go deep in the OSI model but for an overview:

An OSI model is a conceptual model which provides a standard of communication between computers.

And the application layer is where applications can access network services and can interacts with the users.

HTTP is the foundation of data exchange on web and is also known as a client-server protocol as it allows the browser to communicate with the server.

(here the client is the browser and hence the name client-server protocol).

Apart from being a simple data transfer protocol, it can be used as a generic protocol for user agents (such as browsers), proxies/gateways including those supported by protocols like SMTP and FTP and hence it can access resources from different apps.

History of HTTP

The first version of HTTP formed was HTTP/0.9 that was used to transfer raw data.
HTTP/1.0 was introduced later that allowed us to transfer MIME-like messages such as media files.
HTTP/1.0 was doing great but there was a problem, it was not reliable, so to overcome that HTTP/1.1 was introduced that works on a TCP connection to ensure reliable implementations.

BUT HTTP doesn't just depends on TCP. It can even send data over a TLS/SSL protocol or any other reliable transport protocol.

Just to understand - A Transport Layer Security (TLS) also known as Secure Socket Layer (SSL) is a protocol to communicate securely ensuring privacy through cryptographic protocols.

HTTP versioning

HTTP uses structure as <major>.<minor> to indicate versions.

<minor> is incremented when a version change do not affect the communication behavior and is an addition of message components.

<major> is incremented when format of a message within the protocol is changed.

Working of HTTP

So now we know what is http? And it's history. Let's see how it works.

As we know it is a client-server protocol, it's follows a request-response method.

Request

A client sends a message to server (request) in the form of a request method, URI, and protocol version followed by a MIME-like message containing request modifiers, client information, and content body.

Request method: GET, POST, PUT, DELETE
Protocol version: such as HTTP/1.0 HTTP/1.1
Client information: your browser identity
Content body: what you want from server

The request sender can be a proxy or browser know as a user agent or a robot crawling the web to populate and maintain the search engine index.

Proxy

A Proxy is a computer or program used when navigating through the network. It lies between the client and the server (these can be modems and routers as well).

It can access the web and can intercepts the request and respond back and can manipulate the request received before sending it further.

Most of the proxy machines lies in the last four layers of the OSI model.

Response

When the request is received by the server, it responds back with a status code, status message, MIME-like message containing server information, metainformation, and entity body content

Status codes: A code to if its a success or fail
Status message: human readable form of the success/fail message
Body content: expected result

Although most communications are initiated by the clients to the origin server but nowadays servers can initiate a communication too.

Components of HTTP-based Systems

Client (The User Agent)

A user agent is anything that works on behalf of the user, generally this role is performed by the browsers. Browsers sends the request to the server and receives an HTML page and then requests for other files as specified in the HTML page.

Proxies

As we have covered proxies above, it's the same old same old.

Proxies can manipulate a request coming from the client and can translate it to different HTTP versions and to the server understandable form.

Servers

A server is a computer that serves the documents to the client.
It is called as a computer but actually it is collection of computers sharing the load or communicating with other computers.

HTTP Flow:

Open a TCP connection: A connection is established between client and server. Client sends a message to the server and server responds back with acknowledgement, this is how it is made sure that the connection is reliable and the packets are not being sent to nothing.
Send HTTP message: A request is formed and sent to the server.
Example: GET / HTTP/1.1
Server responds back: Server sends a response back to the cliend
Example: HTTP/1.1 200 OK
Connection is closed or reused.

Connection and HTTP

A connection can be established between two devices in any form.
It's not necessary whether the connection is secured or not.

A connection is formed at the transport layer with or without reliability.

But for an HTTP connection, it must be reliable, protocols like TCP are used here.

For a simple connection between a client and a server it's not much of a story.

But when proxies, gateways, and tunnels come in, it gets complicated and request is rewritten a few time.

A proxy is a forwarding agent rewriting all or part of message and send it to the server identified by the URI.

A gateway is a receiving agent, lies above server layer and can translate request to server protocol.

A Tunnel acts as a relay point between two connections without changing the message, used to pass messages through firewall generally

Request ------> UA --------> P --------> V ------> G --------> V --------> S

UA - user-agent
P - proxy
V - single connection
G - gateway
S - server

Proxy and gateways must be careful while forwarding the messages in different version of protocol, as they must not send a request with higher version of protocol than the actual version.
If that happens then they must downgrade it or respond with error or use a tunnel.

That's all about HTTP. Thank you for reading.
Feedbacks are appreciated.

The story behind JS: how async works

Saksham — Fri, 14 Jan 2022 19:18:16 +0000

We all know that JS is a single-threaded non-blocking asynchronous concurrent language.

But what does this actually mean?

Let’s find out:

Suppose we have a function that calls another function that calls one more function, such as:

function add(a,b) {
    return a+b;
}
function callAdd(a,b) {
    return add(a,b);
}
function finalFunc(a,b) {
    const addDigits = callAdd(a,b)
    console.log(addDigits);
}
finalFunc(3,4); // Output: 7

We all know that finalFunc will call callAdd, callAdd will call add, and add will return the sum of these two numbers and we will get 7.

But what’s happening behind the scenes?

So, there is a thing called call stack in JavaScript which is a type of data structure that records basically where we are currently in our program.

It looks something like this:

And in here, this is how our program runs:

lets take a look at our code:

function add(a,b) {
    return a+b;
}
function callAdd(a,b) {
    return add(a,b);
}
function finalFunc(a,b) {
    const addDigits = callAdd(a,b)
    console.log(addDigits);
}
finalFunc(3,4); // Output: 7

Here when we called the finalFunc function, it was recorded in the call stack, and inside that we called another function which was then called and got recorded in the call stack again, which called the add function and it gets recorded as we can see in our diagram.

The return statement then gets executed and the function is removed from the call stack.
then the return statement of callAdd function gets executed and it gets removed from the stack and then the finalFunc then calls the console.log function and it gets executed and then the finalFunc is removed from the call stack and the program ends.

So this is how our program actually runs inside JavaScript.

Correction: The code in this video is a bit incorrect, the actual code is the one written above.

Waiting for Callbacks and SetTimeout

Let us assume that callbacks and setTimeout are synchronous and we call them in our program. Then what do you think will happen?
The call stack waits until the processing of the current is done. So, yes, the call stack will have to wait till the timeout ends. Till then we won't be able to do any task.

And suppose there is one callback that never returns. Then what?
Your code will be stuck forever. That’s why being asynchronous is important.

We did the normal function call in JS. But now let's try setTimeout in our program. FYI setTimeout and callbacks are not part of the JS engine. They are part of browser API.

And now setTimeouts are something that waits to perform a particular action. But as we said JavaScript is a non-blocking language. Then where does this waiting go?

So what happens behind the scenes, in the case of timeouts, is that when a timeout is called it is shifted to a special place called callback queue or task queue.

The role of the callback queue is to hold the timeouts when they are complete and send it to the call stack when it's empty.

But who checks if the call stack is empty or not?

This is where the event loop comes into play. The event loop keeps on checking if the queue and call stack are empty or not, if the task queue is not empty it checks if the call stack is empty or not, if the call stack is empty then it sends the timeouts to call stack one by one.

Something like this:

function add(a,b) {
    return a+b;
}
let a = add(2,3);
console.log(a);

setTimeout(() => {
    console.log("hello world");
}, 1000)

function callAdd() {
    console.log("callAdd");
}
callAdd();
// Output: 
//5
// callAdd
//hello world

This is how a browser looks and as we can see that JS engine is not the only thing that is present in the browser.

If we look at the above code, initially the call stack is empty, when the code starts running, first the console.log() function will come in the call stack and it will call the add function. The add function will execute and is removed from the stack, then console.log is executed and removed from the stack.

Next comes the settimeout, function that comes to the call stack but then it is moved to the browserAPI section and waits till the timer is up, and is moved to the task queue, till then callAdd function is called to the call stack, and is executed, then console.log function is called inside the call stack and is executed and removed and then callAdd function is removed.

And in between that the event loop keeps on checking if the call stack is empty or not, now as our call stack is empty, the event loop sends the setTimeout function from the task queue to the call stack which then calls the console.log() function which executes and removed from the call stack and finally setTimeout is removed from the stack and the program ends.

Now you must be wondering what this microtask queue is?
Well, it's exactly the same as a callback queue except that all the callbacks functions are stored here and the Microtask queue has a higher priority over the callback queue. which means that if there is anything inside the microtask queue it doesn't matter if the callback queue is full.

Until the microtask queue is not empty callback queue will not run.

If we made a callback function, then that is stored in the browser api till it gets resolved, it is then sent to the microtask queue and the event loop waits till the call stack is empty and then sends the callback function to the call stack and it executes.

So this was all about how async JS works. And yes, JS doesn’t like to wait so thanks to the event loop and the queues for the hard work.

Nullish Coalescing??

Saksham — Thu, 13 Jan 2022 11:40:21 +0000

Nullish coalescing?

what is that word. Hmm... koala...sing?
bad joke alert!!!

Hello everyone, I’m Saksham and I am back again with a new blog about an es6 feature which I personally found really cool and is pronounced as Null-ish koh-uh-les-ing.

Yeah, it took me some time too, to get the spelling right haha.

What is it?

Nullish coalescing is a short circuiting operator denoted by '??'

Purpose of this operator is very simple. Do you know about short circuiting OR operator? Its the same but with some precision, we can say.

lets first discuss about short circuiting OR operator in short.

OR operator, other that using it in getting boolean values, can be used directly if we want to evaluate something from left to right and get the result

Lets take an exampe to understand it much better

const name = "Saksham";
const myName = name || "New User";

console.log("My name is: ", myName) //My name is Saksham

const anotherName = "";
const newName = anotherName || "New User";

console.log("Welcome ", newName) //Welcome New User

As we can see in the above example, When there was a value in the right hand side it returned that but when the string was empty it returned the left hand side value.

That’s because OR operator check for the right hand side value and if its a falsy value (0, “”, [], null, undefined, NaN) then it returns the left side (no matter what value is there).

This is how OR operator works.

Similar is the case of nullish coalescing operator, the difference is that it will return the right hand side only when the left side give null or undefined.

How it works

Lets take another example

const setHeight = 0;
const getHeight = setHeight || 100;

console.log("Height is set to ", getHeight); // Height is set to 100

Here setHeight was 0 but as it is a falsy value 100 was printed. But as we know heights can be 0, This is where nullish coalescing operator is used.

In case of nullish coalescing operator, when the left hand side is null or undefined, only then it will return the right hand side.

const setHeight = 0;
const getHeight = setHeight ?? 100;

console.log("Height is set to ", getHeight); // Height is set to 0

Chaining operators

We can add multiple statements while using nullish coalescing operator

const firstname = null
const lastname = undefined

console.log("My name is ", firstname ?? lastname ?? "Anonymous") 
//My name is Anonymous

Here we chained 2 operators, the first one returned null due to which it moves to the second one, but as I said that it will return it without checking and hence returns lastname (which is undefined) but we can see that there is another operator right next to it and hence it becomes a left hand side for the second operator and it is again checked and as its undefined the answer comes out to be Anonymous.

This is how chaining works. But you know we cannot use chaining with OR and AND operators like above, if we try, it will give an error as it is not able to decide whom to give more precedence.

So to remove that error we put one of the condition in parenthesis.

const firstname = null
const lastname = undefined

console.log("My name is ", firstname || lastname ?? "Anonymous") 
//Uncaught SyntaxError

console.log("My name is ", (firstname || lastname) ?? "Anonymous") 
//My name is Anonymous

And this is how ‘??’ works. That’s all about this operator.
Thank you for reading this blog ❤️

Some CSS theories and declarations I didn't knew before

Saksham — Wed, 05 Jan 2022 11:35:22 +0000

Hello folks!
A very happy new year to all of you! 🎉🎉
I hope you’re all doing great!

I am Saksham and today I am writing a blog about some CSS declarations, theories and keywords that I was unaware of.
(These are some minor concepts which are independent of each other)

I hope you might learn something new after reading this blog too.

Lets begin with our part ONE

Most of us have faced a common problem of our content getting overflowed inside a box and we start to adjust the width/height of that content to adjust it and if the webapp is responsive, sometimes we tend to adjust the height and width of the box at every point which seems a bit weird.... and actually it is.

Now here CSS comes with a concept of intrinsic and extrinsic sizing.

When we define height and width of a container, it is called extrinsic sizing and this is the one that makes the content go out of the box

But intrinsic sizing allows you to wrap the box around the text.

This can be done in two ways:

Unsetting the height and width of the container
Using min-content and max-content as values of height and width

Hmmm… What are those??

When value of width is set to min-content, the content and box is set to the minimum width it can acquire which is the width of the largest word in the content.

And for max-content, the width is set to the max width it can go or till the sentence ends.

HTML:

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna luctus,euismod diam eu, pulvinar neque.
  </p>
</div>

CSS:

div {
  padding: 15px;
  width: max-content;
  height: max-content;
  border: 2px solid black;
  text-align: justify;
}

p {
  font-size: 18px;
}

when height and width are constants

CSS:

div {
  padding: 15px;
  width: 100px;
  height: 100px;
  border: 2px solid black;
}

p {
  font-size: 18px;
}

Okay! I hope this was something new for you.

So, I guess we all are familiar with the CSS box model, But do you know what each of them actually includes inside them?

Lets see!

Content box: it includes the main visible content.

Padding box: It surrounds the content box and includes the padding of the box, when overflow is set to scroll, the scroll bars are also included here.

border box: Surrounding the padding box, border box includes the borders and properties like border radius.

Margin box: It surrounds the border box and includes the outlines and box-shadows.

The default behaviour of a box is content box, that can be changed using box-sizing property.

Including here means that these properties wont take extra space instead the will take the space from their respective boxes

When it comes to CSS, without selectors we cannot do anything. Yes, we all use classes, ids, complex selectors like combinators, pseudo-classes, pseudo-elements.

But have you ever tried going a bit specific in selecting a tag?

Let's try that.
if you want to select an element that contains a specific class and that class is acquired by some other elements too, we can select that element by doing this:

CSS:

tag-name.class-name{
  /* Your code */
}

Let's look at an example:

HTML:

<div class="class1">this is div1</div>
<div class="class2">this is div2</div>
<div class="class1">this is div3</div>
<p class="class2">This is a paragraph1</p>
<p class="class1">This is paragraph2</p>

CSS:

.class2 {
  display: inline-block;
  padding: 10px;
}

p.class1{
  display: block;
}

div.class2 {
  height:50px;
  background: #f0f8;
}

p.class2{
  background: #f00a;
}

Output

Here as we can see that class2 was taken by two of our elements and class1 by three and to style a specific element we used the above selector type.

Let's be a little specific. Because you know, balancing is an art. More the selector is specific, more the job is hard. Less the score, more vulnerable it becomes. How?

Well let's say I want to select <span> which is right after <p> with class para1 under <div> of class div1 so I will write it like this:
div.div1 p.para1+span
This will be so specific that if you want any other span to have the same property, it wont work.

Similar is the case for being less specific, if we do this, then all the elements that we don't want to get targeted will get updated.

Now, we all use pseudo-classes and elements, (yes, both are different)

A pseudo-class is represented by : single colon and a pseudo-element is represented by :: double colon.

And I found two of the pseudo-classes really interesting that were new to me.
:not and :empty

We all know the ! NOT operator in JavaScript right?
this :not works the same in CSS. This pseudo-class selects all the other tag which doesn't include the mentioned selector.

Let's take a look at the example code:

HTML:

<div class="class1">this is div1</div>
<div class="class2">this is div2</div>
<div class="class1">this is div3</div>
<p class="class2">This is a paragraph1</p>
<p class="class1">This is paragraph2</a>

CSS:

:not(html, body, .class1) {
  background: steelblue;
  color: white;
  width: 200px;
  font: 20px "calibri";
  padding: 10px;
}

You must be wondering why I added html and body tag in :not(), as I explained that :not selects everything other than the mentioned, so if I had just added class1 then everything would have become red and it would be difficult to understand its working.
Let's take another example:

CSS:

:not(.class1) {
  background: steelblue;
  color: white;
  width: 200px;
  font: 20px "calibri";
  padding: 10px;
}

This is the result for the above code:

Now let's talk about :empty.
:empty is the pseudo-class used for elements with empty children. These children can be elements or text nodes.

HTML:

<div>
  <p>This is a paragraph inside div1</p>
</div>
<div>
  Div with some text.
</div>
<div></div>

CSS:

div:empty {
  height: 10px;
  background: orangered;
  color: white;
}

Output:

As we can see that the div with nothing inside was triggered.

Similar to that there is a property for tables which hides the table cells which are empty.
empty-cells

HTML:

<table>
  <tr>
    <th>Head1</th>
    <th>Head2</th>
    <th>Head3</th>
    <tr>
      <td>desc1</td>
      <td></td>
      <td>desc3</td>
     </tr>
     <tr>
        <td>desc4</td>
        <td>desc5</td>
        <td></td>
      </tr>
        <tr>
          <td></td>
          <td>desc8</td>
          <td>desc9</td>
    </tr>
  </tr>
</table>

CSS:

th,td,tr {
  border: 2px solid black;
  padding: 10px 15px;
}

table {
  empty-cells:hide;
}

Isn't this so cool!!

So, moving on, Have you ever seen something like this?

CSS:

div{
background: steelblue;
background: lightblue;
}

We all know the result will be the later one, CSS respects the order of declarations.
But do you know there is a reason for doing this too.

Sometimes different browsers are unable to process a particular property and CSS is a language that never breaks if something is not acceptable, instead, it ignores that to keep things working.

So, when a browser doesn't understand one value it will switch to the other property value.

Now, we all know the order of declarations but do we know about the importance of origins in CSS?

It really matters if there exists any other style sheet other than our own.

Following are the styles in the order of least important to the most important.

User agent base styles: This is what browser applies by default
Local user styles: An operating system level style such as base font or preferred custom CSS by extensions.
Authored CSS: The CSS that we create.
Authored !important: Same as authored CSS but with !important keyword
Local user styles !important: Same as local user styles but with !important keyword
User agent !important: Same as user agent but with !important keyword

Also this order applies on the properties:
This is the order from least important to the most important:

Basic rule types: font size background color
Animation
!important
Transition

Animation and transitions may have low importance but when the go active they run the highest importance.

Okay guys so the final topic of this blog (Thankyou so much for your time, if you made it this far)

Finally comes the concept of inheritance , which I always thought is not needed much but actually is really important to know.

Inheritance, as the word defines itself, is a concept were the child elements inherits the properties of their parent element.

List of elements which allows inheritance.

Not all elements allows inheritance by default. Some of them needs to be done explicitly which is also known as explicit inheritance.

The keyword used for inheriting explicitly is inherit which is best for some exceptions like <strong>

HTML:

<div>
  Hello world in div.
  <p><strong>Hello world in paragraph.</strong></p>
</div>

CSS:

div {
  font-weight: 100;
  font-family: calibri;
  font-size: 30px;
}

As we can see that the font-family and font-size is inherited by default but the font-weight was not applied here. So here we will use inherit as value to the font-weight in strong.

CSS:

div p strong {
  font-weight: inherit;
}

This was all about inherit, but what if we want an inheritable property not to inherit the parent's value?

Such as color, if we set color of parent box to red then all of it's children will have color red.
But what if we don't want that?

In that case we call initial to help us.
initial is used to set the value to the default one.

So, if we look at this example code:

<div>
  Hello world in div.
  <p>Hello world in paragraph.</p>
</div>

div {
  color: red;
  font-family: calibri;
  font-size: 30px;
}

div p {
  color: initial;
}

The color was supposed to be red but as we set that to initial value which is black, we were able to set the color of text to its initial value.

But what if we don't know if in a browser a particular property is inheritable or not?

Well, no worries, we have a solution or that too.

We can use unset keyword in that case. If the property is inheritable unset keyword is set to inherit and if its not, then unset is set to initial.

Isn't this amazinggg!!!

Managing Protocols with NodeJS

Saksham — Tue, 15 Jun 2021 13:52:06 +0000

So, I was reading about decentralized apps with a peer-to-peer protocol and while searching deep inside Dapps and P2PP, it struck in my mind, "How can we manage to control the type of protocol we use in our web apps?", so I searched about it and decided to write about it.

There are different protocols on which different things run such as TCP, IP, UDP, P2P, FTP, ICMP, etc. And each one of them has a different purpose. But when we create our backend using MERN how do we control these protocols?

For this purpose, we use NodeJS. We can install different packages using NPM to set our protocols and here I will be showing how to set TCP and UDP protocols.

What are TCP and UDP protocols?

Transmission Control Protocol (TCP) is used to make reliable network communications. Let's say you are transferring money to another place, when you click on send button there comes a message saying the transaction is successful. Hence, in TCP a message is received everytime a request is sent making sure it reached the destination

Whereas a User Datagram Protocol (UDP) is used to make unreliable network communications. This protocol is used in real-time communications like video/voice calls, real-time gaming, etc. Here we don't need to make sure if the message reached the destination or not.

Let's take an example here if you are talking on a video call and you said "I am going to the market" and the message reached was "I going to the market" and the word "am" is dropped then we don't want our app to send us a message that the word "am" is not delivered. So in these cases, UDP is used.

Setting up TCP connection

Following is the code to set up a TCP connection.

Press F5 and select nodeJS as debugger and this will be shown in the console.

Now we have to enable telnet first, go to control panel and search for "Turn on and off windows features" and enable telnet and write the following command in command prompt and press enter.

This should appear on your command prompt screen :

Now as this is a TCP connection when you make a request you receive the message back, as we can see in the following image when I typed "hi" the same message was printed on my console.

Setting up UDP connection

Following is the code to set up a UDP connection and add a stopper to line 5.

Run the debugger as before but this time you must install Netcat in your machine.

You can download Netcat from here but you need to turn off your windows defender first, but don't worry it's safe and I downloaded it from the same site.

After downloading, add its path to the command prompt and write this command in the command prompt, and press Enter.

Hover on the word "msg" and you will see something like this:

Here as you can see we didn't receive any message and the command closed itself after sending the message unlike TCP and as we hover on "msg" we can see those numbers, those are the ASCII characters of h, i, space, carriage return, and line feed.

And this is my friends, how we set up our protocols using NodeJS. I hope you found it useful. Thank you very much for giving me your precious time, I hope you learned something new today 😀

Model View Controller: What is it?

Saksham — Fri, 14 May 2021 15:00:11 +0000

Hey there, I am using dev.to.

And this time it is about MVC architectural design pattern. I saw a lot of videos and pages to understand what is model view controller or MVC as I was not satisfied with just a single source so I will try my best that this won't happen to you guys.

What is MVC?

MVC is actually an architectural pattern and if you don't know what is an architectural pattern you can go through my blog. But for the sake of this article, an architectural pattern is a type of structure on which an application/software is built, and MVC also a structure and it is not language-specific (as you must have or will see in different sites that show it's working in ASP.NET). There are a lot of frameworks that use the MVC concept such as Ruby on Rails, ExpressJS, BackboneJS, AngularJS, Django, and Flask.

You can compare an MVC model with a real-life example of weddings. Suppose you are at a wedding and you want to eat a particular dish that is available there, so you ask a waiter to get you that dish and the waiter go to the chef and asks for that particular dish and the chef creates the dish from raw materials and give it back to the waiter and the waiter serves the dish to you.

Now there are three main characters in this story: you, the waiter, and the chef which is also the three main components of the MVC pattern.

MVC Components

MVC consists of MODEL, VIEW, and CONTROLLER (as the name suggests). Now I will not go in a sequence as mentioned above but rather would like to follow the story. So, the role played by you is View here, the waiter is the Controller, and the chef is the Model with all the raw ingredients is the Data.

View

The view is everything that is displayed on the screen, the UI part is the view. The controller takes the responses from the user through the view. View also displays the output when the requested data is brought to it by the controller. It is the part of MVC that interacts with the user.

Controller

The controller is the waiter which means that it takes the order (requests) from the user through view and takes it to the chef (Model) and then takes the prepared food (data) back to the view and view presents it to the user. The controller also processes the requests like DELETE, PUT, GET, POST and takes appropriate decisions.

Model

Finally, at last, the chef is at work. The model is simply the brain of the application. It is responsible for getting and manipulating the data. It takes the data from the database or a simple JSON file. It can perform operations like SELECT, INSERT, UPDATE, DELETE.

Model doesn't really care about how to present the data it just takes the data and gives it to the controller and the view beautifies it (not exactly what a chef does though haha). In some cases, the model directly creates contacts with the view without connecting to the controller which also says that MVC can be represented in a triangular pattern.

So, ending this blog with a summary, the View interacts with the user, the user clicks on a button, the button makes a request, the controller takes the request to the model, model fetches the data from the database or a JSON file, gives the raw data back to the controller, the controller takes the data to the view, and the view represents the data in a beautiful manner to the user.

Software Architecture: Architectural patterns

Saksham — Thu, 29 Apr 2021 16:16:59 +0000

Okay so as being a react developer that has always focused on coding while not giving much preference to the theory part, I decided to learn some stuff which led me here to Architectural Patterns, so I decided to write something on it.

What is a Software Architecture?

Creating software doesn't always mean just code code and code and your software is ready (well that may work for small apps but doesn't applies to large-scale software). You have to think about various stages to create software which are:

*Software architecture is how the components that define the software are organized and assembled, how they communicate with each other, and also the constraints or rules with which the whole system will run.
*

Let's have a closer look at the definition.

The organizing and assembling of the components is what architectural patterns do.
The communication part is done through the API's.
The rules or constraints are scalability, resilience, adaptability, resolve, etc.

And all these points together form the architecture of the software.

What is architecture?

Architecture is a set of software structures, and a structure is simply a set of elements held together by a relation. There are three types of architectural structures, which play an important role in designing, documentation, and analysis of architectures.

First plays a role in dividing the units to work on the database, business rules, and user interface.
Second is dynamic and carries out the system functions and runtime elements.
Third kind connects the software structure to organization, development, and installation.

Architecture specifically omits certain information about elements that are not useful for reasoning about the system. Architecture is an abstraction that focuses on certain information. Modern softwares are divided into two parts, public and private and architecture focuses on the public part as the private section deals with the internal implementations and hence not architectural.

Architectural Patterns

In some cases, architectural elements are composed in such a way that it solves a particular problem and those compositions have been found useful in future and have been used over time to time in different situations, these compositions are known as architectural patterns.

Architectural patterns are just like templates (not exactly a template) or wireframes which makes it easy to build an application. There are different types of patterns present and I will be discussing a few of them here.

Layered Pattern

Layered pattern also known as n-tier pattern, as the name suggests, consists of different layers. Generally, we take four layers in this pattern which are presentation, business, persistence, and database. The most common example of this pattern is the OSI model and the web architecture model.

And this is how a layered pattern looks like with arrows showing the default behavior of this pattern:

A layer is an independent piece of the module in which several components are interconnected with each other. If there is any problem in one layer then we can fix it within the layer without affecting the other layers.

Each layer of the pattern has a specific responsibility in the application. The presentation layer does all the User Interface related stuff and defines how the application will look. The business layer takes the business decisions such as an email is sent to the user if this action is done. The persistence layer contains all the code definitions, main programs, and basic functions of the applications. The database layer contains the databases.

One of the great features of this pattern is the separation of concern within the layers i.e. each layer focuses on doing its task and nothing else like if a layer is managing the databases then it is none of its business what other layers are doing or what to do other than handling databases, it only focuses on managing the databases.

Now, as I told earlier that the default behavior of this pattern is moving down the layers step-wise. This is only followed when the layers are closed. A layer being in a state of *close * means that as the request moves from layer to layer, the request must pass through the layer right next to the previous one and not skipping any layer.

Another state of layers is open (yes you have guessed right). It is not always necessary that this pattern should always go for 4 layer architecture, we can have multiple layers in this system (as the name n-tier suggests). So let's suppose we take a new layer in between the business layer and persistence layer and name it Service Layer and this layer is open. Then when a request will pass through the business layer AND ** if it's of any use to the service layer **ONLY THEN it will be sent into that layer otherwise the request will jump directly to the persistence layer.

Using a combination of both open and closed layers sometimes becomes very messy for the programmer so it should be used wisely.

Client-Server Pattern

Before going to this pattern first I'm going to discuss what is a client and a server.

Client

A client can be a machine or program. Machines can be a mobile, computer, laptop, etc and a client program is a program that allows users to make a request for example web browsers, editing software, etc.

Servers

As we all must have heard that a server is a high-performing machine but actually it is a program known as a server program that RUNS on a high-performing machine as it has to handle a lot of requests at once and also they provide the functionality to the clients.

And as I said a server can serve multiple clients at once and a single machine can have multiple servers.

Conclusion

Now as we have discussed client and servers we can now move on to the client-server pattern which can now be explained in just a few lines.

A client-server pattern is a centralized way to get the clients to communicate with servers on the web where the client makes the request and the server responds to it.

This is just one way to surf the web in a centralized manner and similarly, there is a decentralized manner too which is known as peer-to-peer Model where a machine can work both as a client and a server and no one has a specific role both can send requests and respond to it.

The most common example of this model is bit torrent and skype.

And now as this blog is getting really long and must be boring (haha I really appreciate it if you are still reading) I should end it here now. Thank you for giving me your valuable time.

Understanding Compiler Design

Saksham — Sun, 25 Apr 2021 16:52:03 +0000

Every one of us has used a compiler once in our programming journey or must have read about it. Ever thought about how a compiler works?

Today I will be discussing the design structure of a compiler.

A code basically has to pass through a different number of levels to get itself converted from high-level language to assembly language, and these are all hidden in a compiler.

Here is a basic diagram of a compiler :

As we can see a compiler consists of a total of 6 different levels, where the first four are grouped together and are called frontend, and the bottom two are grouped and called backend.

The frontend part checks for any kind of errors in the code like syntax, grammar, or lexical errors whereas the backend part simplifies and generates the program by grouping the code snippets.

The Internal Processes in brief.

When we write a code in any language and compiles it, the first thing a compiler does is to check for any kind of errors in the code for which it passes through the frontend or analytic part.

Lexical Analysis

When a high-level language code is passed through lexical analysis it generates a stream of tokens, but before that, we should talk about preprocessors, the task of a preprocessor is to filter out a stream of characters by removing the header files and then passing it to the lexical analysis. (A stream of characters is nothing but just the keyboard characters we type in the code: int a = 23; or printf(" Hello World! ");)

but what is a token?

let's take a small code

a = 10;

Here a, =, 10, ; are all tokens. So total number of tokens here is 5.

So basically a token is the important part of a code. Why I said important? Because comments and characters such as white space or newline or tabs are not considered as tokens. And then these tokens are passed in the symbol table. The role of the symbol table is to get the record of the properties of tokens or variables such as type, size, scope, etc. The symbol table is connected to all the stages in the compiler as we can see in the diagram for future use.

After converting all the code to tokens, it is sent to the syntax analysis department.

Syntax Analysis

When the code comes here, it is checked that if a code is syntactically correct or not. A parser is used here and the output that comes is called a parse tree as it comes in the form of a tree as shown:

If there is a syntax error then an error is produced at this stage.

Semantic Analysis

Here the analyzer checks the parse tree and finds semantic errors. Note that this part doesn't care about the syntax but checks whether the value of the variable is as per the type declared or the limit of a particular data type is not exceeded or whether variables are declared properly or not

Intermediate Code Generator

This part is the middle man between frontend and backend, it generates a code that can be understood by the backend i.e. a machine-independent code (independent of OS). It creates a 3-address code which means that the code is divided into 3 variable statement which means that maximum of 3 addresses can be there in one statement if there is 4 or 5 then it is divided into 2 3 lines of code.

a = b + c * d;
// this is converted as
x = c * d;
a = b + x;

This 3-addressed code is sent to the next level i.e. optimization of code

Code Optimisation

From here the backend part begins and code optimization is the first stage of the backend. As the name suggests, this part optimizes the code. There is not much to say about it as you all know what is optimisation. + sign is much easier to process than * hence a code like:

x = 4 * y 
// can be converted to 
x = y + y + y + y 
// or 
z = y + y; 
x = z + z;

Code generation

Here the code generator takes an optimized version of the intermediate code and links it with the target machine language. It translates the intermediate code into a sequence of re-locatable machine code. The machine code generated works the same way the intermediate code would do.

Like the Symbol Table, there is an error handler that is linked to all the phases which is responsible for handling the errors detected by the frontend

And at last, the code is converted to the assembly code or machine code.