Photo by Markus Spiske on Unsplash

This is an update from another one of my posts, and as it turns out, it was slightly misleading.

For people landing on this post directly, here is what I intend on doing: present the concepts of inheritance with JavaScript in words I used to understand them myself.

To begin with, let us present one of the most asked questions in a frontend interview,

What is the difference between classical & prototypal inheritance in JS?

or it’s alter ego,

How do you do classical inheritance and how do you do prototypal inheritance in JS?

or at times more generic,

Tell…


Photo by José Alejandro Cuffia on Unsplash

It all begins with the planning.

If one has planned good enough, gone through every scenario in their heads and considered the near infinite possible states their UI can be in, a resilient, future proof and highly modular component can be designed and it’s powers can be enjoyed for years to come.

Regimes change. New faces emerge. Our component only adapts as required. No refactor needed. Ever.

While this is all good in theory, reality paints a slightly different picture.

There we have a business guy who wants a feature out yesterday; the designer created an impossible mockup with…


Photo by Marvin Meyer on Unsplash

Requirement was simple.

Create a form with a series of fields. Few of them should have a max length validation and we had to show the user a current count v/s allowed length. Something like this:


“Colorful lines of code on a MacBook screen” by Caspar Rubin on Unsplash

EDIT: as of 3rd September, I have published another post (https://medium.com/@rohanbagchi/understanding-inheritance-in-javascript-9ff48cd2bd9d), attempting to fix some inconsistencies in this one.

Disclaimer: this is a slightly opinionated post. Feel free to disagree in comments :)

Overtime, this has become a standard question in interviews for a frontend/full stack role:

What is the difference between classical & prototypal inheritance in JS?

or it’s alter ego:

How do you do classical inheritance and how do you do prototypal inheritance in JS?

To answer the first, there is no difference. Conversely, classical & prototypal inheritance is the same thing. …


Photo by Ash Edmonds on Unsplash

React is only the ‘V’ part of MVC and as such is not opinionated in how you architect your UI.

If proper attention is not given, a reasonably large react app can quickly succumb to a mess of stateful components, each with a mind of it’s own, quickly violating the react way of doing things.

There are several key points one must keep in mind while building with React:

  1. Stateless components
  2. Composition
  3. Centralised state management with Redux

Stateless components

Your components must be as stateless as possible; as in, your components should not run it’s own state, instead depend on passed in…


Official redux logo from https://github.com/reactjs/redux/tree/master/logo

Pre requisites: the reader is already knows JavaScript & React. If not, please read this first. It is a refresher into frontend engineering with React.

According to the official documentation, Redux is a predictable state container for JavaScript apps.

So to start with, let us begin with a why. It is mainly three-fold:

  1. Pure function
  2. Depth agnostic state subscription
  3. Ease of testing

Pure function

Definition: A function that operates solely on the passed in arguments and has no side effects is a Pure Function.


“Books about HTML and JavaScript on a shelf next to a potted cactus” by Greg Rakozy on Unsplash

Disclaimer: These are my personal opinions grown out of experience in handling complex frontend challenges.

Frontend engineering over the years have evolved into what we have today. With ES6, React and webpack, it is definitely not the platform we had before, where JavaScript was never taken seriously by backend folks and not without reason.

You see, JavaScript’s only use case was to perform some basic client side validations and the occasional ajax requests. The UI, business logic and rendering were all backend’s responsibility.

We would receive large chunks of ready to render HTML from the server for every request we…


Photo by Goran Ivos on Unsplash

Web is a quirky platform, while very inviting, can cause serious heartburn when under stress.

One important thing to note in here is that the browser cannot refresh the screen when it’s main thread is busy performing some activity. What this means is the page looks stuck. And if it goes on long enough, we get this:


While it is a rave, webpack can be daunting to the uninitiated. And the fact that developers everywhere simply assume everyone has internalized the concepts put forth by webpack doesn’t help it at all.

Paranoia, confusion and fear of being left out prevails.

While “whosoever holds this hammer, if he be worthy, shall possess the power of Thor” adage might serve to massage our egos by a bit in case of cutting edge tech and the ecosystem around it, it doesn’t really help the average developer daunted by the bombardment of arcane terms and concepts.

While he does write React…


While it is ability that makes one hit 100 mph in less than 5 seconds, it is but control that ensures one doesn’t become a statistic while doing it.

To the uninitiated, it seems ability is the only way of life and anything else is boring, mundane or simply below them; the converse is also true.

In the first two years of my career, I was convinced that only mastery over some piece of tech will fetch me laurels unimaginable to the common folk.

While mastery in itself is an ever evolving process, it also comes with a curse; as…

Rohan Bagchi

writes code

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store