WebVeta - Advanced, unified, consistent search for your website(s), from content of your website(s), blogs(s). First 50 customers, who sign-up prior to 15/05/2024 get unlimited access to existing features, newer features for at least 1 year. Sign up now! https://webveta.alightservices.com/
Categories
.Net C# gRPC

gRPC Performance tips in .Net

gRPC is a bery efficient form of communication between different servers.

In the past each programming language had its own technique of Remote Invocation using a very efficient binary serialization and de-serialization. But then these services are not compatible across programming languages. Then webservices standards such as SOAP based on XML, REST API’s based on XML or JSON have evolved. SOAP and REST API’s are a standard and can be implemented in different programming languages. Even now, REST based API’s are the most popular choice. Now comes gRPC alleviating the problems and offers very high performance, development tools are shared across different programming languages and takes advantage of HTTP/2, HTTP/3 where possible.

gRPC re-uses server connections and offers significant advantages in terms of performance i.e the overhead of establishing and disconnecting connections gets minified. Efficient serialization and de-serialization offers high performance in terms of payload and speed i.e fewer CPU cycles and fewer network bytes.

The following tips are for .Net platform:

  1. Increase connection concurrency limit i.e by default the concurrency limit is 100, on large servers with many connections, if you see a performance hit i.e gRPC calls getting queued, consider increasing the concurrency limit.
  2. Enable SocketsHttpHandler.EnableMultipleHttp2Connections = true;
  3. Consider client side load balancing where applicable, server side load balancing adds a little extra latency, because the request reaches the load balancer and then gets routed to a server. With client side load balancing the client knows how to communicate with the different servers and sends requests appropriately removing the overhead of extra latency.
  4. If the service’s gRPC messages are larger than 96kb consider increasing the InitialConnectionWindowSize and InitialStreamWindowSize.

Latest versions of .Net support creating REST based API’s and gRPC based services with the same code – a topic for a different blog post, but definitely a reason to start using gRPC.

I don’t have any fake aliases, nor any virtual aliases like some of the the psycho spy R&AW traitors of India. NOT associated – “ass”, eass, female “es”, “eka”, “ok”, “okay”, “is”, “erra”, yerra, karan, kamalakar, diwakar, kareem, karan, sowmya, zinnabathuni, bojja srinivas (was a friend and batchmate 1998 – 2002), mukesh golla (was a friend and classmate 1998 – 2002), thota veera, uttam’s, bandhavi’s, bhattaru’s, thota’s, bojja’s, bhattaru’s or Arumilli srinivas or Arumilli uttam (may be they are part of a different Arumilli family – not my family).

Mr. Kanti Kalyan Arumilli

Arumilli Kanti Kalyan, Founder & CEO
Arumilli Kanti Kalyan, Founder & CEO

B.Tech, M.B.A

Facebook

LinkedIn

Threads

Instagram

Youtube

Founder & CEO, Lead Full-Stack .Net developer

ALight Technology And Services Limited

ALight Technologies USA Inc

Youtube

Facebook

LinkedIn

Phone / SMS / WhatsApp on the following 3 numbers:

+91-789-362-6688, +1-480-347-6849, +44-07718-273-964

+44-33-3303-1284 (Preferred number if calling from U.K, No WhatsApp)

kantikalyan@gmail.com, kantikalyan@outlook.com, admin@alightservices.com, kantikalyan.arumilli@alightservices.com, KArumilli2020@student.hult.edu, KantiKArumilli@outlook.com and 3 more rarely used email addresses – hardly once or twice a year.

Categories
React

React state management in functional components

In React, functional components can use state by using useState(). Let’s look at a code example:

const [mode, setMode] = React.useState(0);

In the above code block we are destructuring the return value of useState. mode is a read-only constant, that can be read and used. For changing the value the setMode can be used.

The usual naming convention is the constant name for the first object and setVariableName for the function, but the function name can be anything.

The following code example demonstrates accessing the variable and updating the variable.

{{mode}}

setMode(1);

But any attempts to modify the value of the constant would result in an error.

I don’t have any fake aliases, nor any virtual aliases like some of the the psycho spy R&AW traitors of India. NOT associated – “ass”, eass, female “es”, “eka”, “ok”, “okay”, “is”, “erra”, yerra, karan, kamalakar, diwakar, kareem, karan, sowmya, zinnabathuni, bojja srinivas (was a friend and batchmate 1998 – 2002), mukesh golla (was a friend and classmate 1998 – 2002), thota veera, uttam’s, bandhavi’s, bhattaru’s, thota’s, bojja’s, bhattaru’s or Arumilli srinivas or Arumilli uttam (may be they are part of a different Arumilli family – not my family).

Mr. Kanti Kalyan Arumilli

Arumilli Kanti Kalyan, Founder & CEO
Arumilli Kanti Kalyan, Founder & CEO

B.Tech, M.B.A

Facebook

LinkedIn

Threads

Instagram

Youtube

Founder & CEO, Lead Full-Stack .Net developer

ALight Technology And Services Limited

ALight Technologies USA Inc

Youtube

Facebook

LinkedIn

Phone / SMS / WhatsApp on the following 3 numbers:

+91-789-362-6688, +1-480-347-6849, +44-07718-273-964

+44-33-3303-1284 (Preferred number if calling from U.K, No WhatsApp)

kantikalyan@gmail.com, kantikalyan@outlook.com, admin@alightservices.com, kantikalyan.arumilli@alightservices.com, KArumilli2020@student.hult.edu, KantiKArumilli@outlook.com and 3 more rarely used email addresses – hardly once or twice a year.

Categories
React

React Fetch API

React Fetch API is used for calling REST API’s.

First some sample code and then a lengthy discussion of various options.

const postRequestOptions = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: {}
};

postRequestOptions.body = JSON.stringify(jsonObject);

fetch('/path', postRequestOptions)
.then(response => {console.log(response); return response.json();})
.then(data => console.log(data);

In the above code block we have declared a postRequestOptions object, for POST HTTP method, declared the content type as application/json.

Then we set the body of the postRequestOptions object by representing a json object as a string.

Then we used the fetch API, once the response is returned, we are logging the response, creating a data object from the received response’s json and logging the object to the console.

There are several options for the RequestOptions:

referrer: The referrer can be set

referrer policy: Tells the browser to set the referrer header based on the policy. “strict-origin-when-cross-origin”, “no-referrer-when-downgrade”, “no-referrer”, “origin”, “origin-when-cross-origin”, “same-origin”, “strict-origin”, “unsafe-url”.

mode: “cors”, “same-origin”, “no-cors”

credentials: Whether to send cookies and tokens. “same-origin” – default, “include”, “omit”

cache: “default”, “no-store”, “reload”, “no-cache”, “force-cache”, “only-if-cached”

redirect: “follow” – error, “error”, “manual”. If you want error to be raised for 302, instead of sending another request use “error” or you can know the status by accessing the response.status that provides the HTTP status code.

integrity: SHA256/384/512 of expected hash.

keepalive: true or false, used when you want to do something on window.onunload()

Here is a webpage with a very detailed discussion of the options:

https://javascript.info/fetch-api

Categories
Welcome

Introduction to components in React

In React there are two ways of creating components:

  1. Functional components
  2. Class based components

Functional components seem like simple Javascript functions.

function Name(){
   return (
      <h1>Kanti</h1>
   );
}

The above component would display the name “Kanti” in h1 header tag.

class Name extends React.Component
{
   render() {
      return <h1>Kanti</h1>
   }
}

The above class based component would also have the same functionality i.e display the name “Kanti” in h1 header tag.

The components can be used in other components by using the following syntax:

<Name />

As of now these components aren’t doing anything yet. But SPA frameworks are very useful in code-resuse, specifically when we create re-usable components. Pretty much every SPA framework – AngularJS, Angular, KnockOut, React, Vue etc… supports developing components.

There are several component libraries available for the SPA frameworks.

In future blog posts, I would write on some React based things, concepts such as micro frontends, code re-usability, compare and contrast some SPA frameworks etc…

One of the primary considerations are:

Angular is a framework and provides end to end. React is a front-end library i.e you can use React along with other libraries. Angular is backed by Google.

React can be compiled into static files and hosted or can be rendered on the server (SSR – Server side rendering) using Node. React is backed by Facebook

I have not played around with Vue much, but Vue is also very nice framework and like React, Vue is a library.

In the past (about 7 – 8 years ago) I have played around with AngularJS (the older version) and KnockOut. AngularJS and KnockOut are completely browser based with no SSR.

Modern frameworks, specifically React and Vue support in-browser mode and SSR. For example, you can develop and take advantage of SSR, or you can use in-browser or even a combination of both.

I choose using Cookie based authentication over JWT and React in-browser mode due to certain reasons.

For ease and flexibility, I am using React in one of my projects – Web Veta.

I don’t have any fake aliases, nor any virtual aliases like some of the the psycho spy R&AW traitors of India. NOT associated – “ass”, eass, female “es”, “eka”, “ok”, “okay”, “is”, “erra”, yerra, karan, kamalakar, diwakar, kareem, karan, sowmya, zinnabathuni, bojja srinivas (was a friend and batchmate 1998 – 2002), mukesh golla (was a friend and classmate 1998 – 2002), thota veera, uttam’s, bandhavi’s, bhattaru’s, thota’s, bojja’s, bhattaru’s or Arumilli srinivas or Arumilli uttam (may be they are part of a different Arumilli family – not my family).

Mr. Kanti Kalyan Arumilli

Arumilli Kanti Kalyan, Founder & CEO
Arumilli Kanti Kalyan, Founder & CEO

B.Tech, M.B.A

Facebook

LinkedIn

Threads

Instagram

Youtube

Founder & CEO, Lead Full-Stack .Net developer

ALight Technology And Services Limited

ALight Technologies USA Inc

Youtube

Facebook

LinkedIn

Phone / SMS / WhatsApp on the following 3 numbers:

+91-789-362-6688, +1-480-347-6849, +44-07718-273-964

+44-33-3303-1284 (Preferred number if calling from U.K, No WhatsApp)

kantikalyan@gmail.com, kantikalyan@outlook.com, admin@alightservices.com, kantikalyan.arumilli@alightservices.com, KArumilli2020@student.hult.edu, KantiKArumilli@outlook.com and 3 more rarely used email addresses – hardly once or twice a year.

Categories
Javascript

Javascript object destructuring

Modern SPA frameworks use certain javascript syntaxes and concepts for easier development. One such syntax is Javascript destructuring.

Consider the following code snippet:

const person = {
    'FirstName': 'Kanti',
    'LastName': 'Arumilli'
}

console.log(person.FirstName);
console.log(person.LastName);

In the above code we have declared an object with two properties and named the object person. The individual properties are accessed and the values are printed to the console.

We can use destructuring to extract the properties into variables.

const { FirstName } = person;

console.log(FirstName);

In the above code we have destructured the FirstName property into a seperate variable and printed to the console.

In the following code we can destructure both the properties:

const {FirstName, LastName} = person;

Moreover, we can even assign default variables.

const {FirstName, LastName = 'Arumili'} = person;

This is an important concept and often used in React when using useState() and props. I would write some blog posts later on these concepts.

I don’t have any fake aliases, nor any virtual aliases like some of the the psycho spy R&AW traitors of India. NOT associated – “ass”, eass, female “es”, “eka”, “ok”, “okay”, “is”, “erra”, yerra, karan, kamalakar, diwakar, kareem, karan, sowmya, zinnabathuni, bojja srinivas (was a friend and batchmate 1998 – 2002), mukesh golla (was a friend and classmate 1998 – 2002), thota veera, uttam’s, bandhavi’s, bhattaru’s, thota’s, bojja’s, bhattaru’s or Arumilli srinivas or Arumilli uttam (may be they are part of a different Arumilli family – not my family).

Mr. Kanti Kalyan Arumilli

Arumilli Kanti Kalyan, Founder & CEO
Arumilli Kanti Kalyan, Founder & CEO

B.Tech, M.B.A

Facebook

LinkedIn

Threads

Instagram

Youtube

Founder & CEO, Lead Full-Stack .Net developer

ALight Technology And Services Limited

ALight Technologies USA Inc

Youtube

Facebook

LinkedIn

Phone / SMS / WhatsApp on the following 3 numbers:

+91-789-362-6688, +1-480-347-6849, +44-07718-273-964

+44-33-3303-1284 (Preferred number if calling from U.K, No WhatsApp)

kantikalyan@gmail.com, kantikalyan@outlook.com, admin@alightservices.com, kantikalyan.arumilli@alightservices.com, KArumilli2020@student.hult.edu, KantiKArumilli@outlook.com and 3 more rarely used email addresses – hardly once or twice a year.

Categories
HTML Javascript React

Basic introduction to using React in-browser

React is a SPA library built by Facebook and has very wide usage. Angular and Vue offer similar functionality. The three frameworks have their own advantages and disadvantages which is out of scope.

For quick prototyping and for other reasons, there might sometimes be a need for using React in-browser i.e include some Javascript files from CDN, write some Javascript and see these in usage.

In this blog post, I won’t go into great lengths or details, but more of a getting started blog post.

I am assuming you would like to use JSX syntax and would like babel to transpile in-browser.

Include the following 3 javascript files:

<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Note: Assuming you are developing quick prototype, I have provided the development version links for React 17.0.2. But there are minimized production versions. The development scripts are useful for easier debugging because of detailed error messages.

Now include another .js file of your choice and include the js file in your HTML page – assuming the .js file has a name of RootComponent.js

<script src="~/js/RootComponent.js" type="text/babel"></script>

Note the type is “text/babel” because we would be using JSX for our markup.

Add a div with a id of “root” in your HTML page which would become the container for our React application. I have added Please wait… because the browser would display Please wait… while React framework initializes.

<div id="root">Please wait...</div>

Now add the following code snippet to your RootComponent.js

const rootElement = document.getElementById('root');

function App() {
    return (
        <div>Hello World!</div>
    )
}

ReactDOM.render(
    <App />,
    rootElement
)

In the above few lines of code, we have used plain javascript for getting the div with an id of “root”.

We have defined a minimal functional component by the name of App.

We are using React library and calling a method called Render and asking React library to render the App component in the place of the root element i.e the div with the id of “root”.

I don’t have any fake aliases, nor any virtual aliases like some of the the psycho spy R&AW traitors of India. NOT associated – “ass”, eass, female “es”, “eka”, “ok”, “okay”, “is”, “erra”, yerra, karan, kamalakar, diwakar, kareem, karan, sowmya, zinnabathuni, bojja srinivas (was a friend and batchmate 1998 – 2002), mukesh golla (was a friend and classmate 1998 – 2002), thota veera, uttam’s, bandhavi’s, bhattaru’s, thota’s, bojja’s, bhattaru’s or Arumilli srinivas or Arumilli uttam (may be they are part of a different Arumilli family – not my family).

Mr. Kanti Kalyan Arumilli

Arumilli Kanti Kalyan, Founder & CEO
Arumilli Kanti Kalyan, Founder & CEO

B.Tech, M.B.A

Facebook

LinkedIn

Threads

Instagram

Youtube

Founder & CEO, Lead Full-Stack .Net developer

ALight Technology And Services Limited

ALight Technologies USA Inc

Youtube

Facebook

LinkedIn

Phone / SMS / WhatsApp on the following 3 numbers:

+91-789-362-6688, +1-480-347-6849, +44-07718-273-964

+44-33-3303-1284 (Preferred number if calling from U.K, No WhatsApp)

kantikalyan@gmail.com, kantikalyan@outlook.com, admin@alightservices.com, kantikalyan.arumilli@alightservices.com, KArumilli2020@student.hult.edu, KantiKArumilli@outlook.com and 3 more rarely used email addresses – hardly once or twice a year.

Categories
.Net ASP.Net C# Security

How to prevent CSRF (Cross Site Request Forgery) in ASP.Net MVC

CSRF – Cross Site Request Forgery is a certain type of cyber attack, specifically when using cookies!

A different website would post content into a different domain when the user of the other domain is logged in or in certain other scenarios. CSRF is considered one of the major vulnerabilities and has been in the OWASP top 10 – Cross Site Request Forgery (CSRF).

If you are using token based authentication and if the token is stored in browser’s local storage, CSRF isn’t an issue. This is specifically when using cookies.

Basic Usage:

In .cshtml of web pages inside forms add the following tag:

@Html.AntiForgeryToken()

The above code fragment would render a hidden input element with a long random string.

In the controller class, decorate the action method with the following attribute:

[ValidateAntiForgeryToken]

When the action method is invoked, the validation happens. If the validation succeeds, the action method get invoked. If the validation fails, the action method does not get invoked.

Recommended Usages:

If we forget decorating a post method with [ValidateAntiForgeryToken], we would be susceptible to CSRF attack. Instead we can use a MiddleWare and use the Middleware in the Startup.cs

builder.Services.AddControllersWithViews((options) =>
{
        options.Filters.Add(new  AutoValidateAntiforgeryTokenAttribute());
});

// or

builder.Services.AddMvc((options) =>
{
        options.Filters.Add(new  AutoValidateAntiforgeryTokenAttribute());
});

There are other ways of customizing the middleware, for example if there is a use-case where json data is being sent to a web api and cookies are used for authentication, we can add a customizable header i.e in the calling code we would add the hidden element’s value as header and then make the call.

builder.Services.AddAntiforgery(options =>
{
   options.HeaderName = "X-CSRF-TOKEN-HEADERNAME";
});

I don’t have any fake aliases, nor any virtual aliases like some of the the psycho spy R&AW traitors of India. NOT associated – “ass”, eass, female “es”, “eka”, “ok”, “okay”, “is”, “erra”, yerra, karan, kamalakar, diwakar, kareem, karan, sowmya, zinnabathuni, bojja srinivas (was a friend and batchmate 1998 – 2002), mukesh golla (was a friend and classmate 1998 – 2002), thota veera, uttam’s, bandhavi’s, bhattaru’s, thota’s, bojja’s, bhattaru’s or Arumilli srinivas or Arumilli uttam (may be they are part of a different Arumilli family – not my family).

Mr. Kanti Kalyan Arumilli

Arumilli Kanti Kalyan, Founder & CEO
Arumilli Kanti Kalyan, Founder & CEO

B.Tech, M.B.A

Facebook

LinkedIn

Threads

Instagram

Youtube

Founder & CEO, Lead Full-Stack .Net developer

ALight Technology And Services Limited

ALight Technologies USA Inc

Youtube

Facebook

LinkedIn

Phone / SMS / WhatsApp on the following 3 numbers:

+91-789-362-6688, +1-480-347-6849, +44-07718-273-964

+44-33-3303-1284 (Preferred number if calling from U.K, No WhatsApp)

kantikalyan@gmail.com, kantikalyan@outlook.com, admin@alightservices.com, kantikalyan.arumilli@alightservices.com, KArumilli2020@student.hult.edu, KantiKArumilli@outlook.com and 3 more rarely used email addresses – hardly once or twice a year.