DEV Community: skaytech

What is Technical Debt?

skaytech — Sat, 28 Nov 2020 00:06:28 +0000

What is Technical Debt?

I would like to simply define Technical debt as the actions taken by the engineering team to expedite delivery for a piece of functionality that often needs to be refactored at a later point in time. However, there's no one single definition that exists technically.

The term 'Technical debt' was originally coined by software developer, 'Ward Cunningham'. He had coined this term to explain to Non-Technical stakeholders why budgeting needs to be allocated for refactoring.

Cunningham's explanation to the stakeholders was along the following lines:

"With borrowed money, you can do something sooner than you might otherwise, but then until you pay back that money you’ll be paying interest. I thought borrowing money was a good idea, I thought that rushing software out the door to get some experience with it was a good idea, but that of course, you would eventually go back and as you learned things about that software you would repay that loan by refactoring the program to reflect your experience as you acquired it."

Why Technical Debt is necessary?

Typically an early-stage startup needs to validate their product idea first and ensure they can sign up customers rather than build out all the nuts n bolts of the feature. In order to do that, agility is of paramount importance. The engineering team deliberately incurs tech debt to reduce the time to market.

However, often companies have known to abuse this term and prescribe, “Hack it, for now, fix it later” mantra to ship the project fast and acquire more users than their competition. But, often they don't realize that having technical debt has its consequences. Before we dive into that, let us find out the various types of technical debt that exists and how to address them.

Types of Technical Debt

While you can categorize technical debt into more granular level such as code debt, design debt, infrastructure debt, testing debt, etc. I would broadly want to classify them into the following categories:

Planned Technical Debt

As explained above, it is a decision made by the engineering team to take a short-cut for shipping the feature faster.

How to address them?

The tech leads/managers must ensure to track the tech debt in the backlog and address them as the product grows. The Product & Sales team must be made aware of the consequences of not addressing them in a timely manner and everyone should be held accountable to ensure that the tech debt is addressed in a timely manner.

Unintentional Technical Debt

This occurs generally due to the lack of understanding of the product or poor communication that exists in the translation of business goals or simply poor engineering practices.

How to address them?

Retrospectives are necessary no matter how fast a project needs to build. It is imperative to reflect back to find out what went well & what needs to change. Tech leads/managers must involve themselves in understanding the true business objectives and the product team must keep validating the software being built and provide feedback incrementally.

Unavoidable Technical Debt

When there's a huge change in project scope or a complete pivot of technology choice during mid-project, it leads to unavoidable technical debt.

How to address them?

Typically, this is the hardest of them all and usually, the debt is paid back in phases. For e.g. mid-project, the engineering team decides to move from React to Vue. The way to do this would be to create new features for the project in Vue and migrate the existing features from React to Vue in phases.

Is Technical Debt bad?

It's yes and no based on which point in software development you view it. For example, at an early stage, having a technical debt is considered a good thing to ship your product faster to the hands of the end-users. However, as the product matures, it is important to pay back the debt to ensure the product is stable and can actually scale as more and more users start adopting the product.

One important thing to acknowledge is that Technical debt unlike Financial debt is much harder to detect and people generally tend to ignore it unless it really becomes a problem. It is important to have the consequences of technical debt explained to all stakeholders and ensure that the responsibility and accountability are shared between the engineering and product teams.

Conclusion

To summarize, technical debt can be described as the consequences of software development actions that intentionally or unintentionally prioritize client value and/or project constraints such as delivery deadlines, over more technical implementation, and design considerations.

Technical debt should not be confused with the mess. A mess is a just mess that is being created based on laziness and unprofessionalism and has no chance of payback in the future.

I hope you enjoyed the article. Please don't forget to subscribe to my newsletter and connect with me on Twitter @skaytech

How to provide estimates as a Junior Developer?

skaytech — Fri, 13 Nov 2020 06:14:08 +0000

Introduction

I recently interacted with a friend who had just started out as a developer and she told me that she found it really hard to provide estimates against the user stories assigned to her.

We had an interesting conversation following that and I thought this might actually be applicable not just to her, but, a much wider audience who might be going through the same thing.

In this article, I will provide my thoughts on how you can go about providing estimates when you start out as a new (junior) developer.

Please do note that the article is in NO way "the only" way to provide estimates and it may largely vary based on the project. This is merely some things to consider that can help you provide estimates and manage insecurities that arise while providing them as a new developer.

Estimation

One of the first things to understand whether you are a junior or a senior developer is that the word 'Estimation' means it's a 'ballpark', i.e., it is not supposed to be exact. Providing the amount of time to complete a task largely varies based on a number of factors such as your current skill level, your overall experience in the field to understand requirements, whether you are building something ground up vs adding functionality to an existing product, etc.

For example, let's assume you have joined a project which has a fairly large codebase. When you are asked to estimate for a feature, your first instinct would be to provide estimates for the time it takes to complete building out the feature. However, what is often 'untold' is the fact, you'll also need to include time in your estimates to perform 'impact analysis', i.e., performing analysis to ensure that the code you add does not impact any other existing functionality. Ensuring that you consider providing estimates for things that are untold requires some amount of experience and hence it is always recommended to have a senior review your estimates before providing them to the lead or manager.

Key Terminologies

I'm providing a list of key things that are commonly used with the Agile development workflow.

User Story

In an Agile process, a feature would be written in terms of a user story, i.e., what the feature means to the end-user. Generally, user stories will be worded like 'As a user, I should be able to do this, to meet a particular outcome'. A good user story should have the acceptance criteria clearly specified that should help you and others identify what are the things that need to be verified to mark the user story completed.

Every user story is sized based on the complexity level and 'T-Shirt' sizing is a common methodology followed in the industry. Every user story is marked with a sizing such as XS, S, M, L, XL based on the level of complexity. The sizing will most likely be provided by the senior members of the team, since, they understand the product and are generally more experienced with the software. As a junior developer, you will be required to break down the user story into smaller tasks and estimate them.

Scope

Scope can simply be explained as the agreed set of things that need to be developed as a part of the user story. Usually, during the development process, things might arise which have not been explicitly stated in the user story and it is important to call them out and notify your senior in the team.

Most likely that might get added to the current story or if the impact is much larger, a new story might get created to address that. However, the important thing to note is that, if you have to develop that as a part of the same user story, your initial estimates will get impacted.

This is something very hard to spot for a new developer and a good lead should explain this and guide you on how to handle scope creep.

Velocity

The term 'Velocity' is used to measure how fast a developer can complete the user story assigned to them. The same user story might take 4 hours for a senior developer to complete, but can take up to, 2 days for a junior developer to complete.

You must understand that it is completely 'normal' and you must feel free to communicate with your seniors about how you feel and ask them for any specific directions/guidelines they recommend for providing estimates.

Imposter Syndrome is a big thing to tackle at this point and your ego might also take a hit sometimes. Acknowledge that and keep telling yourself that this is a learning phase and it's just a matter of time before you will have command over the product and technology.

Capacity

This one is fairly simple. Capacity planning is done before the beginning of the sprint to find out if the developers are on any planned vacation. You may ask, how does this change the estimates? While in most cases it does not. However, if you are going a break of a week or more, you must ensure that you reach out to the team and find out if something has changed that might impact your coding before your break. Also, it takes usually takes a day to build context and get back to that 'work mindset' after a super relaxing holiday 🙂

General Guidelines for Estimation

I would recommend the following steps for providing estimates when you are starting out as a new developer:

Break down the task into the most fundamental thing. For example, building the Home page of the application can be broken up into building individual components on the homepage.
Spend some time to understand if there are any more questions to clarify the requirement or things to be called out at this stage that will impact the estimation.
Think through the corner cases (not just the happy path ones) and find out if they'll impact your estimates in any way.
Add estimates in hours against each task.
Your estimates must include time to write unit tests.
Review your estimates with a senior developer and take notes of the feedback provided by the senior developer.

Even after this, it might be possible, you might take additional time to complete the task and that is perfectly normal. But, it is important to record how much more additional time you've spent as compared to the original estimates. This is 'super important' because, it's a big learning for yourself and your team on where your current skill/understanding level is, and in due time this number will improve as you gain more expertise in the project.

Conclusion

While it can be daunting and stressful as a junior developer while providing estimates in the beginning, remember in due time you'll gain expertise and knowledge about the project and your estimation will start to get much better.

A good project manager or a lead would constantly gather statistics regarding your estimates and provide you with constant feedback on how to improve them. As your productivity improves, they'll be aware of that and keep sending more work your way.

I sincerely hope this article helped you with some knowledge of providing software estimates as a developer who is just starting out in the industry.

Don't forget to subscribe to my newsletter and connect with me on Twitter @skaytech

Why work at a Startup and What to expect?

skaytech — Fri, 06 Nov 2020 08:47:20 +0000

Introduction

This is an article based on my experience working with startups for 4+ years. I have previously worked with enterprises and product companies, but with startups, the kind of unique experience of having both creative freedom and increased responsibility was probably the most fulfilling in my career.

While startup culture is often glamorized with a whole lot of cool-looking offices, young vibrant engineers, there are a lot of challenges that are important to be prepared for.

In this article, I will share my experiences on why you should consider working at a startup and what to expect while working with startups.

Why work with Startups?

Creative Freedom

I think the best way to explain this in a single phrase would be 'If you can do it, you can lead it'. Startups are generally known for having small teams and while this may mean that your workload increases, it also offers creative freedom. You can shape your job description by simply raising your hand or offering a solution.

For example, while you might have been hired to do a developer job, you can still jump into your areas of interest such as design or documentation, and lead the way if there's an opportunity.

Career Development

With startups, there aren't layers of management to weed through, so if you started off taking up a particular role and you realized that your skills probably suit a different role in the team, you have the freedom to explore such a thing and slowly turn that into your career.

There's a significant gap even today on what a university teaches and what skills are needed on a real job and the option to explore your career within a job is very liberating.

Develop Resiliency

This one is my personal favorite. As humans, we have been in-built with a mechanism to resist failure. However, failure is essential to any growth. In startups, you are burning your hands constantly. Everyone fails, and it's considered fine. Oftentimes there are no wrong answers and some solution that’s more correct than another one may well emerge as the winning formula. However, failure will not only make you a seasoned professional with hands-on learning but a resilient individual.

If you join a healthy startup, you’ll see the commitment and conviction of founders, and the team will hold onto each other – celebrating success together and taking failure in collective stride. As a result, you’ll become a problem solver, think outside the box, and build your ability to find creative solutions to problems, solutions that have the potential to move the needle significantly.

A Unified feeling and connecting over the mission

A startup team works shoulder-to-shoulder. You’ll spend a lot of hours collaborating with the same few people. Startup culture is very very important and the people behind the startup need to connect with the idea. The team will have to be a network of like-minded people who have the same agenda. This is super important becomes the emotional connection towards a unified cause increases your resolve and you'll push each other to grow and in return create long-lasting friendships out of the understanding.

While the above are certainly some of the reasons why you should try to work for a startup, I'll also want to mention a few points on what to expect while working with startups.

What to expect while working with Startups?

Be comfortable with uncertainty

You'll need to embrace uncertainty as much as the fish would take to the water or at least 80% of it. It is not easy for everyone to embrace uncertainly. Not at least at first, but, ensuring you communicate to the team certainly relives pressure from self and also ensures that everyone understands that you are charting unknown waters.

You'll be encountered with questions that no one has the answers to, even the founders, but this is what makes a startup so special – you’re finding out together. Once you are through once such an experience, you would have learned a life skill of navigating through uncertainty.

Be Independent and a team player

While a healthy startup culture will rally the team together, understand how to structure your work. Let yourself be pushed outside of your comfort zone. At a startup, there is little traditional ‘management’. You’ll need to be a self-starter and know how to manage your time.

There will be days when it feels like a lot; stay motivated. You’re growing. Structuring how you spent your time and proactively checking in with your manager to ensure your Key Performance Indicators (KPIs) remain aligned will help you stay on course and feel connected. Know when to ask for help and communicate with your team. Use your team as support and as a pillar of strength. I promise whatever you’re feeling you’re not alone, and reaching out will only help everyone involved.

Find your Sparkle

Self-doubt can be an outcome of all-round rapid development. Focus on the larger goal and your part in it. Ask where you shine. Sometimes we can’t see our own sparkle. Again, with little traditional ‘management’ the standard review process most likely won’t exist the way it does at large, established companies.

Ask for the time you need, but be sure to ask for clear feedback. Reflect on your KPIs to make sure that your goals are well aligned with the company. Everyone is low on resources and time is the most important, so be specific where you need support and take ownership of your projects.

Enjoy the ride

There may be frequent spurts of feedback and periods with none at all. Write it down and keep it for later. Time moves FAST in a startup. Make sure that you remember to write down all the lessons you learn because they will be vast. Keep a journal to remember what you did well, what you learned, and to keep the memories.

One of the startup customers I had worked with, Carlos, who's currently an Engineer Manager at Google, is still my close friend and I remember the fights, arguments, laughter, and euphoric moments that we celebrated together while taking an idea from concept to launch. It is still one of my most fond memories of my career.

Conclusion

To summarize while working in a startup has its challenges, it also is equally rewarding in terms of experience. Not everyone likes it or is up for a challenge as steep as working for a startup. But, I would urge you to consider working with a startup at least once in your career.

I hope you enjoyed the article. Don't forget to connect with me on Twitter @skaytech

A Detailed overview of NPM, Registry, CLI & it's related Components

skaytech — Mon, 02 Nov 2020 05:51:36 +0000

Introduction

In this article, we will look at an overview of what NPM is. When we usually run 'npm install', we know that certain packages are being created inside the 'node_modules' folder. Let us look at what they mean and what role they play in order to support running your web application.

We will look at the following topics in detail:

What is npm, Registry, and CLI?
How to initialize your project with NPM?
A detailed overview of 'package.json' and it's important properties.
How to install and publish your packages?
Version management of packages.

This article is based on my learnings from Tyler Mcginnis's course on React which you find over here.

What is NPM?

For a long time, I assumed 'NPM' meant 'Node Package Manager'. But, strangely and funnily it's not. 'npm, Inc.' is a for-profit, venture-backed company founded in 2014 and was acquired by Github in March of 2020.

npm.inc is behind the creation and management of the following components:

Node Package Manager
Registry
npm CLI

But before, we jump into the details of the above components, let us take a step back and find out what problem NPM solves.

Why do we need a Package Manager?

Whenever we write any web application, it is generally composed of individual modules that are often bundled together.

If we have to use a certain package with our application, the traditional way of doing it is using the 'script' tag as shown below:

<body>

  ...

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
<script src="libs/jquery2.1.4.min.js"></script>
</body>

While the above works, there are the following disadvantages using the above approach:

If the CDN network is down, then your application cannot access the resource.
In the JQuery import example above, while you have downloaded the library to your application. Managing version related changes are left up to us in terms of manually fetching the latest version and replacing them in our code, which is far from ideal.
Finally, the biggest them of all is the order of script tags placed inside the body tag which is required in order for them to be referenced appropriately inside your application.

'npm' precisely solves the above problems and more in terms of managing the way your packages are referenced, versioning, and more.

Node Package Manager

The node package manager manages the below-mentioned points and does it well:

Provides a way to package your program for others to consume.
Provides a way to download the packages from a centralized repository.
Makes it easier for you to manage & switch versions.

Registry

The registry is a centralized repository that contains a list of all npm packages that have been published by others.

npm CLI

npm CLI provides you a way for you to install & publish the packages using the command-line interface.

How to install npm?

'npm' comes with Node. Hence, if you have installed NodeJS, then you should already have npm as it comes with it. You can install Node from here or if you are using Windows, I have a detailed article on how to install Node using a node version manager or 'nvm' over here.

If Node and npm are installed correctly, you should be able to run the following commands in your terminal to check which versions you have installed.

node -v # My installed version: v11.10.0
npm -v # My installed version: 6.9.0

Now that you should have Node and npm installed successfully, we will look at how to initialize your project with NPM and the important components associated with the node package manager.

How to initialize your Project with npm?

The first step to use npm is navigating to your project folder (e.g. myProject) and run the command 'npm init' command from the command terminal.

$ root> cd myproject

$ root/myproject> npm init

The above command will perform the initialization process and you’ll notice that you have a brand new package.json file and an empty node_modules directory.

node_modules

Whenever you install a package, the source code for that package will be put inside of the node_modules directory. Then, whenever you import a module into your project that isn’t a file path, i.e. import React from 'react', your app will look to node_modules for the source.

package.json

The 'package.json' file contains all of the meta-information for your project. It contains information like the project’s name, author, description, and most importantly, the list of packages (as well as what versions) that your project depends on and how to run your project.

Here's a sample of the 'package.json' file:

{
   "name":"Example Project",
   "version":"1.0.0",
   "description": "An Example Project demonstrating Node Package Manager",
   "author":"Skay",
   "license":"ISC",
   "homepage":"https://github.com/skaytech",
   "keywords":[
      "react",
      "react-router",
      "babel",
      "webpack"
   ],
   "repository":{
      "type":"git",
      "url":"https://github.com/skaytech/webpack-example.git"
   },
   "main":"index.js",
   "dependencies":{
      "prop-types":"^15.7.2",
      "query-string":"^6.2.0",
      "react":"^16.8.3",
      "react-dom":"^16.8.3",
      "react-icons":"^3.4.0",
      "react-router-dom":"^4.3.1"
   },
   "devDependencies":{
      "@babel/core":"^7.3.4",
      "@babel/plugin-proposal-class-properties":"^7.3.4",
      "@babel/preset-env":"^7.3.4",
      "@babel/preset-react":"^7.0.0",
      "babel-loader":"^8.0.5",
      "babel-plugin-syntax-dynamic-import":"^6.18.0",
      "copy-webpack-plugin":"^5.0.0",
      "css-loader":"^2.1.0",
      "html-webpack-plugin":"^3.2.0",
      "style-loader":"^0.23.1",
      "webpack":"^4.29.5",
      "webpack-cli":"^3.2.3",
      "webpack-dev-server":"^3.2.1"
   },
   "scripts":{
      "start":"webpack-dev-server --open",
      "build":"NODE_ENV='production' webpack"
   }
}

Let us look at a few of those properties in detail:

dependencies

The list of packages listed under the 'dependencies' property is the ones your application needs in order to run. When you install a new package, the source for the package will be placed inside the 'node_modules' directory. The name & version of that package will automatically be added to the 'dependencies' property in your 'package.json' file.

devDependencies

'devDependencies' is exactly like the 'dependencies' in the sense the source will be placed inside the 'node_modules' directory. However, these 'dependencies' will only be made available to your application while running them in your development environment.

In other words, these 'dependencies' will not be required to run in the production environment.

scripts

The 'scripts' property defines the set of commands you can provide to the node package manager to run any kind of automation tasks. In the above example, we have two scripts, namely the 'start' and 'build'.

The general syntax to run any script is:

$ root > npm run [SCRIPT NAME]

In the above example, if you run the to start the 'webpack-dev-server', you can run the script 'start' using the following command:

$ root/myproject> npm run start

NPM Registry and How to install packages from the registry?

Now, that we've looked at the basics of 'npm' and the 'package.json'. We will look at how you can install certain packages from the 'npm registry'.

As I had introduced earlier, the registry is a centralized repository where all the packages are published and are available for downloads.

For Example, if you want to install 'react', you can run the following command:

$ root/myproject> npm install react

The general syntax to install any package is:

$ root> npm install [PACKAGE NAME]

Running 'npm install', will do the following things:

It will put the 'react' package inside of your 'node_modules' directory.
It will add 'react' as a property on your 'dependencies' object inside your package.json file.

Install your dependency as a Dev Dependency

In order to tell 'npm' that your dependency needs to be added only as a 'dev dependency', i.e., the package needs to be made only for development purposes, you should run the following command:

$ root> npm install webpack --save-dev

The key differentiator is the '—save-dev' flag while running the 'npm install' command for installing the package as a dev dependency.

How to publish your package to NPM?

NPM has over a million packages as of the date and it wouldn't be possible if it wasn't easy to publish one. You need to have the following to publish a package on npm:

An account on npm
A package.json file with 'name', 'version', and 'main' (which points to the entry point of your package) properties.

Once you have the above, in your command line run the following commands:

$ root/myPackage > npm login

$ root/myPackage > npm publish

That's all there's to it! There are more advanced features that you can check out their official guide.

Versioning

If you remember, at the start of our post, we had discussed managing the different versions of our packages. Thankfully npm CLI provides a very nice way to manage it as well.

Typically each package on the npm registry follows semantic versioning. There are three parts to semantic versioning, major versions, minor versions, and patch versions.

For example, if your package version is v1.2.3, the following is the break-up:

Major Version - 1 - If you had a breaking change, you'll increment the major version.
Minor Version - 2 - If you had a non-breaking feature, you'll increment the minor version.
Patch Version - 3 - Everything else, you'll increment the patch version.

Why is this important? We want to avoid having our app break because we installed the wrong version of a package. npm gives us some tools to prevent this.

The '^' operator in your Version number

Let us look at the 'dependencies' inside your 'package.json' file again:

"dependencies":{
      "prop-types":"^15.7.2",
      "query-string":"^6.2.0",
      "react":"^16.8.3",
      "react-dom":"^16.8.3",
      "react-icons":"^3.4.0",
      "react-router-dom":"^4.3.1"
}

You’ll notice that before each version number, there’s a little ^ or a 'carrot' symbol.

The ^ instructs npm to install the newest version of the package with the same major version.

Let's take, for example, the 'react' package released v16.9.0. After the new version of the package is released and you run 'npm install' inside your project, then that version of the package will be available to your project.

If 'react' released a v17.0.0, which means it's breaking change and you run 'npm install', the breaking change won't be installed and made available to your project.

The '~' operator in your version number

If your requirement is to only update your package only for updates for the same major and minor versions, then you'll use the '~' operator.

In the above example, if you change the 'prop-types' package to have the '~' operator:

"dependencies":{
      "prop-types":"~15.7.2",      
}

If you run 'npm install', a new package will only be installed if 'v15.7.3' is released. If 'v16.0.0' or 'v15.8.0' came out, neither would be installed.

Exact version

Finally, the simplest and direct use-case of having the exact version of what’s listed in your package.json file, you'll just need to remove all 'symbols' before your version number and only list only the version number as shown below:

"dependencies":{
      "prop-types":"15.7.2",      
}

Now if you run 'npm install' anytime, only the version 'v15.7.2' will ever be installed.

conclusion

A quick summary of what we discussed in this article:

What is npm, Registry, and CLI?
How to initialize your project with NPM?
A detailed overview of 'package.json' and it's important properties.
How to install and publish your packages?
Version management of packages.

I hope you enjoyed the article. Don't forget to subscribe to my newsletter and connect with me on Twitter @skaytech

The React Ecosystem

skaytech — Fri, 30 Oct 2020 13:10:16 +0000

Introduction

When I started learning React, there was a huge debate on whether React is a library or a framework. While I assumed React to be a framework, since, it was always compared with the likes of Vue or Angular, it is actually a JavaScript library.

However, there are other components such as the Webpack, Babel, Router, etc. that make it more wholesome into a complete framework that it is. Often, this is hidden under the hood, since we typically use 'create-react-app' to generate a React boilerplate code to start our application with.

In this article, we will look at a brief overview of the following key components that comprise the 'React Ecosystem'.

Babel
Webpack
Routing
Styling
State (Redux/Context)

This is my second article, in the 'React Series' based on my learnings from Tyler Mcginnis course @ ui.dev.

You can read the first article on Why you should learn 'React'?

React

As I had mentioned in the introduction, React is just a library and you can just include the 'react' and 'react-dom' script tag inside the index.html and it's perfectly valid.

You can run the below code and it's a perfect valid React application. You can find the code in action over here.

<!DOCTYPE html>
<html>
  <head>
    <title>React</title>
  </head>
  <body>
    <div id="app"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@16.14/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16.14/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      function Hello({ name }) {
        return <h1>Hello, {name}</h1>;
      }

      ReactDOM.render(<Hello name='Skay' />, document.getElementById('app'));
    </script>
  </body>
</html>

So, then the question becomes why don't we use the above setup? Instead, when we run 'create-react-app', the setup is quiet different and other components such as 'Webpack', 'Babel', etc. are in play.

Let us look at each of those components at a high-level and what they do behind the scenes to support a production-grade React app.

Babel

If you visit, Babel's website, it'll be mentioned that Babel is a JavaScript compiler. What that means is Babel is responsible to transform JavaScript code from one format to another based on specified configuration.

Now, let us look at the below code example.

import React from 'react'

export default function User ({ name }) {

  return (
    <div>
      <h1>Hello, {name}</h1>      
    </div>
  )
}

A couple of things to note here:

User is a React component that returns a UI (view) Hello, "name" based on the name passed to the component.
The 'HTML' syntax within the JavaScript context is called JSX. It is React's way to allow you to describe UI inside of your components.

Now, if your browser needs to display the above information, it needs to know to get hold of the HTML view and the regular old JavaScript. This looks like a perfect job for 'Babel' which accepts the JSX input and transforms it into a valid JavaScript that can be understood by the browser.

But what's cool about Babel is that it's not limited to JSX → JS transformations, but, it can do almost any kind of transformations and it is most commonly used to transform ES6+ code to the backward-compatible version of JavaScript that old browsers can understand.

Webpack

Webpack is a module bundler. It examines your codebase for all imports and exports and intelligently bundles all your modules into a single file that your browser can understand.

So in our above example, the following lines of code, the 'import' and 'export' statements are what Webpack will scan and bundle it into a single bundle.js file which will be referenced inside of index.html.

import React from 'react'

export default function User

I have an article that describes Webpack in much greater detail, which you can read over here.

Routing

The idea was to keep React as a simple UI library and not include the Router as a part of the core library. It was done with the intent to provide the users the flexibility to decide what kind of router they would want to integrate with React.

The most popular router for React is of course the 'React Router'

You can describe React Router’s job is to render specific React components based on the current URL path of the user.

<Router>
  <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/contact">Contact</Link></li>
    </ul>

    <Route exact path="/" component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/contact" component={Contact}/>
  </div>
</Router>

When a user navigates to the home page (/), React Router will render the Home component. When they navigate to /about, React Router will render About. Likewise, when they navigate to /contact, React Router will render the Contact component.

React Router is again a vast topic and will warrant a separate blog post of its own. For now, you can simply understand it as the component that is responsible to render React components based on the URL path the user visits.

Styling

There are two ways to Style a React application. The traditional way and the React way. Let us look at both ways of defining styling to your react application.

Traditional Styling

The traditional approach includes adding all your styling inside index.css and you can have classes, cascading defined there typically how you would do for a non-react application. In fact, you can also have SASS or any CSS pre-processors included.

React Styling

The React approach of styling embraces the component model. Let's add styling to our above example and see how the code looks.

const styles = {
  header: {
    fontWeight: 400,
    fontSize: 55,
    color: '#a41c1c'
  }
}

export default function User ({ name }) {

  return (
    <div>
      <h1 style={styles.header}>Hello {name}</h1>      
    </div>
  )
}

As you can see from the above code, the styling is contained within each component. One of the most popular CSS in the JS library in the React ecosystem is the Styled Components. You can check them out over here.

State (Redux/Context)

Before we talk above Redux or Context, we will take a step back and define what state means to a React component.

React State

React's philosophy is that you build individual components that can each manage their own state as well as describe their UI. You then compose those components together to get your app.

But often in real-life applications, the state of components needs to be shared with other components and it becomes a challenge to pass the state through the component tree if there are multiple levels. This is generally the case as the application grows larger and becomes more complex.

Redux

To solve the above problem, Redux came into the picture. Redux is a state management library and while it's often used within the context of React library, it can in fact be used with any other view library and it's not tied to React.

The philosophy of Redux is pretty different. Instead of having state spread out in different places, with Redux, you stick all of your 'State' in a single location called a 'Store'. You then establish strict rules for how the state of your 'Store' can change through something called 'Actions'.

Context

Context API was introduced by the React team for providing a centralized way to manage a Component's state without relying on external libraries such as 'Redux'.

As per the official React docs, Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Each of the topics such as Redux, Context API requires a dedicated blog article to explain the details. The important takeaway as a part of this article is that 'State' management is a core part of React's ecosystem and you can manage it simply within a component's state management mechanism or use Context API or Redux library based on your use-case or the complexity of the application.

Conclusion

I think that's pretty much an overview of the core components. I hope after this article, you'll idea of what is under the hood when you run CRA (create-react-app) in your CLI, and when someone says it's a React application, it's an ecosystem and not just the React library.

Don't forget to subscribe to my newsletter and follow me on Twitter @skaytech.

Why you should choose to learn 'React'?

skaytech — Tue, 27 Oct 2020 11:39:39 +0000

Introduction

I have been working with the React framework for a while now and the more I understand it, the more I'm in awe of the framework.

In this article, I wanted to share my thoughts on why I think React is one of the most popular JavaScript frameworks ever and why you should consider learning it if you are planning to learn a JavaScript framework.

This is the first article, under the series 'React' and is based on my learnings from Tyler Mcginnis course @ ui.dev. Do check out Tyler, he's one heck of a teacher.

A Powerful Composition Model

Composition is a language-agnostic programming principle that relies on building programs or functions by composing them together.

React extends the same concept and it is possible to build React components by composing them together.

Let us see a very simple example, to begin with, a page containing a header, main, and a footer component.

function Header (props) {
        <>
            <h3>{props.headerInfo}</h3>
    </>
}

function Footer (props) {
        <>
            <h5>{props.footerInfo}</h5>
    </>
}

function Main (props) {
    return (
        <>
            <h1>{props.mainInfo}</h1>
    </>
    )
}

function Home (props) {
  return (
    <div>
      <Header headerContent={props.headerInfo} />
      <Main mainContent={props.mainInfo} />
      <Footer footerContent={props.footerInfo} />
    </div>
  )
}

As you can see from the above example, every function such as Header, Main, and Footer returns a view. Each of those views is further composed within the 'Home' component. This idea of having the power to create a UI by combining any one or more components makes it incredibly powerful.

And this idea has been exploited by the community to develop a multitude of third-party React components that is available on NPM.

A simple analogy that can make all of the above 'click', is, React to composition is equivalent to Pizzeria to 'Build your own Pizza' or 'Legos for developers'.

Reference - https://reactjs.org/docs/composition-vs-inheritance.html

Unidirectional Data Flow

In a traditional application, you have event handlers that update the DOM which generally holds the state of the application as shown below.

As the application grows, the event handlers start updating other parts of the state and the above diagram starts to look like the Spaghetti below.

With React, it follows a Unidirectional Data Flow concept which means that data has one, and only one, way to be transferred to other parts of the application.

Every component has its own state and they need to only bother about updating them. Based on the change in state, React does the hard work of updating the UI based on the change in state.

Advantages of a system with a Unidirectional data flow:

Since the state is maintained at a single location, it can be easily traced to what actions are updating the data as the flow is one way only.
You can control which components to re-render on a common state change. You put all those components under one common state containing the parent component.
Easy to trace and fix bugs and errors caused by any poorly written code.

Declarative UI

In React everything is a component and each component has primarily two things (three actually which includes the lifecycle methods) that you need to be bothered about while defining a component.

a. The Components state.

b. How the UI looks based on the state.

Let us take a look at the following code example in JQuery & React:

Using JQuery:

$('btn').click(() => {
  $(this).toggleClass('highlight')
  $(this).text() === 'Add Highlight'
    ? $(this).text('Remove Highlight')
    : $(this).text('Add Highlight')
})

Using React:

<Btn
  highlight={this.state.highlight}
  onToggle={this.toggleBtn}
/>

Key things to note based on the above code example:

In the JQuery example, you have to access the DOM and ensure that is updated based on events.
In the React example, you have to only worry about the following two things:
- The state or how to update the state based on an event. React will do the hard lifting of updating the DOM.
- How the Button component's UI should respond when the state changes? This is described in the 'this.toggleBtn' function.

React provides the abstraction, so that, the Component does not need to worry about updating the DOM.

Utilizes "Core JavaScript" features - Minimal Custom API

React does not try to re-create functionality that you can already do using JavaScript.

Let us look at the following example of creating unordered lists from a 'products' array using the three different JavaScript Frameworks: Angular, Vue & React.

Angular uses 'ngFor' to loop through the 'products' array.

<ul id="products">
        <li *ngFor="let product in products">
                {{product.name}}
        </li>
</ul>

Vue uses 'v-for' to loop through the 'products' array.

<ul id="products">
        <li v-for="product in products">
                {{product.name}}
        </li>
</ul>

React uses

<ul id="products">
        {products.map((product, index) => (
            <li key="index">
                {{product.name}}
          </li>
</ul>

As you can see from the above example, React uses JavaScript's map method as compared to any special APIs provided by Vue or Angular. Before Angular or Vue folks jump on me, by no means, I'm trying to belittle other frameworks. It is just one significant point that I wanted to highlight over here.

The important point to note here is that React's API layer is kept to the minimum and it utilizes the features provided by JavaScript.

The Right Abstraction

I think that 'React' provides the right abstraction due to the following reasons:

As a framework, React is highly opinionated as any abstraction should be.
The abstraction provided by React empowers users to adopt it without making it very complicated.
The behavior provided by the abstraction is simple enough to extend and supports almost infinite use-cases as possible without giving away the implementation details.

As the saying goes, the 'proof is in the pudding' and you just need to look at the tools built using or on top of React to realize how powerful the abstraction provided by React is.

Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps.
Next.js is a JavaScript framework that lets you build server-side rendered, static web applications using React.

Conclusion

I hope the reasons mentioned in the post make it compelling enough for you to start learning ReactJS as the JavaScript framework of choice.

Don't forget to subscribe and follow me on Twitter @skaytech

A Gentle Introduction to the Big O Notation, Time & Space Complexity

skaytech — Tue, 13 Oct 2020 17:18:00 +0000

Introduction

I have been in Software Engineering for a decade and a half and I am not a Computer Science graduate. Hence, I've never truly been taught Data Structures or Algorithms as a part of the course curriculum. Having said that, it did not stop me from being a good software engineer.

However, I was always curious to find out what it was all about and finally got some time to understand the absolute fundamentals. I'm hoping I can share my learnings in a way most of the non-computer science graduates can relate to.

In this article, we will look at the following three concepts:

Big O Notation
Time Complexity
Space Complexity

Big O Notation

Big O notation is used in computer science to describe the performance or complexity of an algorithm. In simple words, it is used to denote how long an algorithm takes to run and how much memory it takes as the input to the algorithm grows over time.

With Big O Notation we express the runtime in terms of how quickly it grows relative to the input, as the input gets larger.

Let's expand on the words highlighted in 'italics' above:

How quickly the runtime grows - It is generally hard to pin down the exact runtime used by your program, since, it is dependent on the processor speed and the other programs running on the computer at the moment. So, instead of talking about the 'runtime' directly, we use Big O Notation to talk about how quickly the runtime grows.
Relative to the input - If we were measuring our runtime directly, we could express our speed in seconds and minutes. Since we are measuring how quickly our runtime grows, we need to express our speed in terms of something else. With Big O, the size of the input is denoted as 'n'. So, we can say that as the runtime grows “on the order of the size of the input” (O(n)) or “on the order of the square of the size of the input” (O(n²)).
As the input gets larger - Our algorithm may have steps that seem expensive when the input size 'n' is small but is eclipsed eventually by other steps as 'n' gets larger. For Big O Notation analysis, we care more about the stuff that grows fastest as the input grows, because everything else is quickly eclipsed as 'n' gets very large.

Time Complexity

We have sort of defined time complexity in the above section while introducing Big O Notation.

Time complexity is a function describing the amount of time an algorithm takes in terms of the amount of input to the algorithm. In layman’s terms, We can say time complexity is the sum of the number of times each statement gets executed.

There are three different types of time complexity:

Constant Time ⇒ O(1) - The runtime does not change irrespective of the input size.
Linear Time ⇒ O(n) - The runtime grows linearly as the input 'n' grows.
Quadratic Time ⇒ O(n²) - The time it takes to complete a function increases like a quadratic function.

Let us look at a few code examples to understand time complexity in a better way.

Constant Time - O(1)

function displayFirstItem(inpArray) {
    console.log(inpArray[0]);
}

The above function runs in O(1) time (or “constant time”) relative to its input. This means that the input array could be 1 item or 1,000 items, but this function would still run once and display the first item in the array.

Linear Time ⇒ O(n)

function displayAllItems(inpArray) {
    inpArray.forEach(function(item) {
            console.log(item);
  });
}

The above function runs in O(n) time (or “linear time”), where 'n' is the number of items in the array. This means that if the array has 10 items, the function will run 10 times. If it has 1,000 items, the function will run 1,000 times.

Quadratic Time ⇒ O(n²)

function displayAllPossibleOrderedPairs(inpArray) {
  inpArray.forEach(firstItem => {
    inpArray.forEach(secondItem => {
      console.log(firstItem, secondItem);
    });
  });
}

In the above example, there are two loops nested. If the array has 'n' items, the outer loop runs 'n' times, and the inner loop runs 'n' times for each iteration of the outer loop, giving us n² total prints.

Thus, the function runs in O(n²) time (or “quadratic time”). If the array has 10 items, the function will run 100 times. If it has 1,000 items, it will run 1,000,000 times.

The Worst-Case Scenario

The worst-case scenario is generally discussed with Big O Notation, since, there are often cases when the worst-case runtime is significantly worse than the best case runtime.

function contains(haystack, needle) {

  // Does the haystack contain the needle?
  for (let i = 0; i < haystack.length; i++) {
    if (haystack[i] === needle) {
      return true;
    }
  }

  return false;
}

In the above example, there might be 100 items in the haystack, but the first item might be the needle, in which case I would return in just 1 iteration of the loop. In such a case, it would appear O(1) to the runtime.

However, if the needle was to be found in the last iteration, then the runtime would be O(n). Hence, to be more specific, we could always say that the best-case scenario would have an O(1) runtime, and the worst-case scenario would be O(n) runtime.

Space Complexity

Space complexity is a function describing the amount of memory (space) an algorithm takes in terms of the amount of input to the algorithm. When we say “this algorithm takes constant extra space,” because the amount of extra memory needed doesn’t vary with the number of items processed.

So, the question is when would we compromise the speed of execution? A simple answer to that is the availability of resources that you can allocate to the running program.

Let us look at a few code examples:

O(1) - Fixed Space (For a fixed input size)

function greet(inpArray) { 
 for (let i = 0; i < inpArray.length; i++) {
    console.log('Hello');
  }                                          
}

In the above example, the function takes O(1) i.e. fixed space, since the size of the input array does not change and we are only printing a String on the console.

O(n) - Space takes grows linearly

function greetNTimes(n) {
  const greetArray = [];
  for (let i = 0; i < n; i++) {
    greetArray[i] = 'Hello';
  }
  return greetArray;
}

In the above function, as the size of input 'n' grows, the size of greetArray also grows. This requires additional memory resources to be allocated to accommodate the larger array.

O(1) - Fixed Space (For a variable input size)

function getLargestItem(items) {
  let largest = -Number.MAX_VALUE;
  items.forEach(item => {
    if (item > largest) {
      largest = item;
    }
  });
  return largest;
}

In the above example, while it the size of 'items' might change, it does not result in any allocation of memory resources. Hence, the function takes a fixed space or O(1) and does not depend on the input.

Conclusion

So how to optimize our code?

Before optimizing the code, we should first understand the goal behind the optimization. Are we optimizing the code that is running a part of a batch job or are we optimizing a code that is being used in real-time while being accessed by thousands of users?

The goal is very important, since, then we can work towards finding out alternate solutions for the problem, and we can compare their runtimes to satisfy our goal.

While it might appear that constant time O(1) is probably better than linear time O(n), you must consider other factors such as is the code readable enough and is the code easy to maintain, how much memory is it consuming overall, etc.

I hope you enjoyed the article. I sincerely hope this article can act as a useful guide especially for the non-computer science graduates who want to venture into the world of Software development.

You can follow me on twitter @skaytech

What is Currying in JavaScript?

skaytech — Fri, 09 Oct 2020 12:58:09 +0000

Introduction

In this article, we will first look at what first-class citizens and higher-order functions are to lay the foundation to explain 'Currying' in JavaScript. The code samples provided along with the explanation should make it easy to follow and understand the concepts.

First-Class Citizens

In JavaScript, the functions are treated as 'First Class' citizens. What this means is that any function can be returned to another function, since a function is fundamentally an object.

Let us take a quick example to explain this better. The below code is an example of a simple function.

//A Simple Arrow Function returning a value '50'
const sum = () => {
  return 50;
};

//Invoke the function and display the value on the console.
console.log(sum()); //Output -> 50

In the above example, the number 50 is returned when the function sum() is invoked.

As per the definition of a First-Class citizen, we can return the function sum() instead of the value 50 as shown in the code example below.

//Return the Function sum() instead of returning the value by adding the additional ()
const sum = () => () => {
  return 50;
};

//Invoke the function and display the value on the console.
console.log(sum());

/*
Output
-------
() => {
  return 50;
}
*/

Higher-Order Functions

Higher-order functions are functions that take other functions as arguments or functions that return a function as their result.

The below code example will make the above explanation more clear.

//Callback Function - Returns the sum of a & b
const sum = function(a, b) {
    return a + b;
}

//Higher order function - takes 'func' as an argument & returns a 'func' for execution
const higherOrderFunction = function(func, a, b) {
    return func(a, b);
}

//Invoke the higherOrderFunction and pass 'sum' function as an argument with the digits 2 & 3
console.log(higherOrderFunction(sum, 2, 3)); //Output -> 5

Things to note:

The function 'higherOrderFunction' accepts a function 'func' as a parameter.
The function 'func' that is passed in as a parameter is referred to as a callback.

Array.forEach, Array.map, Array.filter are some examples of high-order functions.

Currying

Currying a function is the process of taking a single function of multiple arguments and decomposing it into a sequence of functions that each take a single argument.

Let us take the following simple example:

//An Arrow function taking in arguments x & y and returning the sum
const sum = (x, y) => {
  return x + y;
};

//Output -> 5
console.log(sum(3, 2));

//By applying Currying the same can be broken into a function returning another function
const sum = (x) => {
  return (y) => {
    return x + y;
  };
}; 

//Output -> 5
console.log(sum(3)(2));

Using ES6 Arrow Functions, the above code can further be written in a simple manner as shown below.

//Simplified way to write the function using ES6 - Arrow Functions
const sum = (x) => (y) => x + y;

//Output -> 5
console.log(sum(3)(2));

That's all there is to currying. Let us look at a practical use-case of where it can be applied.

A Practical Use-Case

Let us assume we have to read entries from a database of an e-commerce application that has the entities, user, product, and ratings.

To query a single product from the database, we can write a function 'getProductById' as shown below.

//Simplified way to write the function using ES6 - Arrow Functions
const getProductById = (connection, id) => {
    connection.select('products').where({ id })    
}

//Invoke the function getProductById by passing the connection object & the product Id
getProductById(connection, 1);

By applying the 'currying' concept, we can simplify the above code as shown below.

//By applying Currying -> The function productById will return a function that'll query the products table by 'id'.
const getProductById = (connection) => (id) => {
    connection.select('products').where({ id })
}

//Invoke the function getProductById by passing the connection object & the product Id
const getProductByIdQuery = getProductById(connection);

/**
 * The Output of the above function 'getProductById' will be
 * 
 * (id) => {
 *    connection.select('products').where({ id })
 * }
 * 
 * and it will be assigned to getProductByIdQuery function
 */

//getProductByIdQuery can be simply invoked to fetch the product by it's Id
const product = getProductByIdQuery(1); //Ouput -> Return product matching the 'id' 1

The advantages of the above approach:

The above approach obviously simplifies the code by avoiding the calling method to pass the 'connection' object repeatedly.
Further, the biggest advantage is that we can encapsulate the 'connection' object by modifying the access level to the getProductById() function as private. In simple words, nobody should know about the 'connection' object who is querying for products.

We can further apply the 'currying' concept to the above example and take it to the next level and make it even more generic, so that, you can query for products, users, and reviews table.

//By applying Currying -> The function productById will return a function that'll query the products table by 'id'.
const getConnection = (connection) => (table) => (id) => {
    connection.select(table).where({ id })
}

//While we initialize the application - Get the Database connection
const getTableQuery = getConnection(connection);

/**
 * The Output of the above function 'getConnection' will be
 * (table) => {
 *    (id) => {
 *        connection.select('products').where({ id })
 *     }
 * }
 * and it will be assigned to getTableQuery function
 */

//Pass the table name 'products' to get the 'getProductById' query
const getProductByIdQuery = getTableQuery('products');

/**
 * The Output of the above function 'getTableQuery' will be
 * 
 * (id) => {
 *    connection.select('products').where({ id })
 * }
 * 
 * and it will be assigned to getProductByIdQuery function
 */

//getProductByIdQuery can be simply invoked to fetch the product by it's Id
const product = getProductByIdQuery(1); //Ouput -> Return product matching the 'id' 1

Now that we have found a way to generalize querying any table, querying users and reviews are as simple as the code shown below.

/**
* Pass the table name to get the 'getUserById' and 'getReviewById' query
*/
const getUserByIdQuery = getTableQuery('users');
const getReviewByIdQuery = getTableQuery('reviews');

//Fetch the user with the 'id' 5 using getUserByIdQuery
const user = getUserByIdQuery(5);

//Fetch the review with the 'id' 10 using getReviewByIdQuery
const review = getReviewByIdQuery(10);

As you can see, using the above code simplifies things, promotes reuse, and overall encourages the use of encapsulation.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

5 Must-Read Tips to write a Killer Blog Article!

skaytech — Wed, 30 Sep 2020 10:45:16 +0000

KISS - Keep it Simple, Stupid

KISS is an acronym coined by the U.S Navy in 1960 (source wikipedia) and it is also a very famous design principle in the technology world. I cannot stress how much it also applies while writing your blog.

It is recommended to have a simple introduction, telling the audience what they can expect from your blog article and what how the reader will benefit if they read the article. This sets up a good premise to capture the engagement of the reader.

Likewise, a good conclusion summarizing the points that you've covered in your article, along with any reference links for further reading will be a good way to conclude the article.

A bonus tip is to have your subscription and the twitter handle at the end of the post to ensure your reader has the ability to connect with you to increase your overall engagement.

KIC - Keep it Concise

It is highly recommended to keep it to the point and concise. The simple reason being that your readers are generally very busy. Ask yourself if your reader could ready your entire article during a 5-10 coffee/tea break.

As a rule of thumb, the ideal length for an article is the length occupied when you press the 'Page Down' key 4 times. If you feel you want to explain more, then evaluate if you can make it into a series of articles vs one blog post.

Regarding the content, break it down into points and turn them into sub-headings. Each sub-heading should have a logical start and end. As a bonus, it'll be good to conclude your sub-heading by introducing the next topic in your article. This improves your overall continuity and increases reader engagement.

Count the number of "You"s in the Article.

While this might sound silly, this is very important. Why? The simple reason is that I'm writing to you, the reader, and not for myself. So I'll comb through the article and change as many self-references as possible from "me" or "I" to "you"s in the article.

If I'm not able to change it, it's a good indication that the article will never work in terms of engagement, since the readers will not be able to relate to the article nor the topic.

Use Illustrations, Images & Code Examples

To the age-old saying of 'A picture is worth a 1000 words', it's cannot be more true especially when it comes to your blog article. If you are explaining an article, completing it with illustrations ensures that the concepts are reinforced in your brain.

Images with the text help the readers consume content easily, as compared to just text, which can tend to get monotonous. Placing the images strategically within your article is important and care should be taken to not break the reader's flow while placing the images.

A good rule of thumb is to either read out your article yourself or give it to a friend and ask them where it kind of gets monotonous or the attention slip away and place the image around those portions.

The above can be extended while embedding code snippets while writing your technical article. It is easier with code snippets, since, your article would naturally go about explaining the code.

Show and Tell

Finally, you'll need to tell your reader how they've benefited from your article in a way they can identify. A good way to do this is by providing them with a bunch of actionable items, for example, you can provide them with the required resources to take the knowledge they have gained from your article and move forward.

For a technical article, providing a demo to your work and possibly the Github repository greatly increases engagement and is very satisfying to the reader.

Conclusion

In simple words, write from your heart. Write about the things you are most passionate about and the rest will follow. Start writing consistently and you'll improve leaps and bounds.

I hope you've enjoyed this article and I would like to recommend two more excellent articles on blogging tips:

How to write a blog without motivation? by @iamshadmirza

A Guide for writing consistently for technical writers! by @atapas

If you enjoy my articles, don't forget to Subscribe. You can also find me on Twitter @skaytech

How to Evaluate your Product Idea for Market Fitment?

skaytech — Mon, 28 Sep 2020 08:08:15 +0000

Introduction

This article is on Product Management and is based on my experience working with start-ups over the last few years. But, I would recommend all engineers to give it a read to understand the amount of effort that goes behind researching whether a product is really needed in the market or not, even, before it comes to the engineering team for productizing.

Evaluating your product idea against the market is essential as it'll help you determine whether to go ahead with the decision of productizing your idea.

This is a long article, but one that I have cherished writing, since it is such as an important step in the entire product management journey.

Product Opportunity Assessment

The product opportunity assessment involves the following steps and the product manager must ensure that every step is given the due importance and enough time is allocated to do a thorough analysis.

The steps involved in product idea assessment are as follows:

Validate your product idea.
Identify the target market.
Determine the market size.
Perform competitor analysis.
Make a decision on productizing your idea.

Let us look at each of the steps in detail.

Validate your Product Idea

To validate your product idea, your main focus area should be on the problem you are trying to solve. Understand whether there’s a need for your solution in the market.

Use the following framework to validate your product idea:

Who are your customers?
What are their use cases? Why should they use your product?
How well is your product doing for their use cases? Are there obvious weak spots?
What other features would improve those weak spots?
How could your product get more users?

It is important to talk to several core target users and gather feedback on their pain points. Most often they would be talking about managing their existing problems through some sort of a workaround and usually, those are the ones your product should focus on.

Many of you might ask yourself, How do I know that I've talked to enough sets of users? A simple answer to that is after a certain point, the issues/problems/concerns, etc. start getting repetitive and there’s nothing new added to the list of pain points. That’s usually a very good indication that you’ve covered your core user group.

The following graph (inspired by Dean Olsen) gives an accurate illustration of how to segment the opportunities into the four quadrants as shown below:

Identify the Target Market

The target market can be identified by segmenting your core users using various segmentation techniques as described here:

Demographic Segmentation

This segmentation technique is usually done based on various attributes such as age, gender, marital status, family size, income, etc.

For example, If you are building an App for lending books for nursery kids, then your core user group would be women between the age of 25 - 45.

Behavioral Segmentation

This segmentation technique uses Pareto analysis to drill down and segment users based on the usage of an existing solution.

For example, users who use the App only during promotional offers vs. users who are regular users can provide insights into how to roll out incentives to convert the ‘promotional’ users to ‘regular’ users.

Psychographic Segmentation

This segmentation technique has gained huge popularity over recent years and it focuses on segmenting users based on their lifestyle choices, opinions, values, and interests.

For example, while two kinds of users might have a common interest in reading books, one user might be a Harry Potter fan whereas the other might be a Lord of the Rings fan. This helps in applying marketing techniques based on the user’s interests.

Need-based Segmentation

This segmentation technique uses conjoint analysis to segment the market by the unique needs of a customer. In other words, the segmentation is done purely on the unique needs of the customer and that is a great input for need-based marketing.

Determine the Market Size

Once you identify the target market, the next step is to determine the market size. This is required so that it helps you understand the competition in the market and helps you determine the likely ROI for your investment.

To determine market size:

Refer to published data. The only challenge though is that the data is often unavailable for the unorganized sector.
Analyze competitor sales data from financial filings or sources like Dun & Bradstreet.
Perform customer surveys to estimate the spending patterns and numbers.

The standard practices prescribed above are often time-consuming or are very expensive. In such cases, one can use either the ‘top-down’ approach or the ‘bottom-up’ approach to round up the market size in volume or units.

Before we deep dive into these approaches, we should first understand what the terminologies ‘base data’ and ‘relational data’ mean.

Base Data - The Quantitative data from a published source or a previously conducted survey.
Relational Data - The Quantitative data links between the base data and the target market size.

Now, let’s look at each approach with an example.

The top-down approach

The top-down approach considers using data from a broader spectrum (i.e. the total population in a region, number of production facilities, etc.) as our base data and then postulate relational data based on a fraction of the market of our interest.

The sample illustration shows the top-down approach to determining the market size for cigarettes.

The Bottom-up approach

The bottom-up approach considers data from one data point as our base data and postulating the relational data based on the overall data of the market of our interest.

The sample illustration shows how to estimate the revenue of Domino’s Pizza using the bottom-up approach.

While it might appear that using the above-mentioned estimation techniques might not give exact results, in reality, the results will largely be accurate enough to base some decisions on.

Perform Competitor analysis

With the advent of the internet, knowing your competition has only gotten that much simpler. However, the trick lies in the ability to gather useful data from various sources on the web.

I’ve listed a few methodologies and sources through which you can perform competitor analysis.

Google Search

By using effective keyword search techniques, you can find out a lot of information from a simple google search.

However, you might need to collate this information for further analysis.

Product Hunt

Product Hunt is probably one of the most sought out websites amongst Product Managers and technologists alike. A simple search for keywords lists all the possible similar solutions or products that exist in the market.

AlternativeTo

This website is probably the only one of it’s kind. It’s very unique and provides a list of alternative software to the ones which we already know. You’ll be amazed at the number of other possibilities that exist to the ones we use constantly.

Crunchbase

Crunchbase provides detailed information about various companies such as the year it was founded, funding type, last funding amount, stage of start-up (seed/series-A/series-B), investors, etc.

Capterra

Capterra provides comprehensive information on products focused on business and has over 700+ categories. You can use this site to get a detailed review of the company profile, reviews, product features, and pricing.

Similarweb

This site helps you provide information about traffic and traffic-acquisition strategies. Using Similarweb, you can determine how the competing companies are acquiring an audience and what are the typical touch-points of your audience to help you discover ways of tapping into your target market.

Now that you have data from the various sources, you’ll need to collate them in a spreadsheet to understand them. You must specifically give attention to the areas where users have pointed out issues with the competitor’s products. Those areas become your product’s focus areas to be the differentiator.

While it is OK to have a product similar to the competition, your product essentially should have a variance of a minimum of 25% in terms of features and must ensure that it should distinctly be better than the existing solutions.

Decide Go/No-Go

Once we are through with all the steps mentioned above and collect the required data from various sources listed above, we should put them together in an RWW matrix (Source) that'll help us decide on whether to pursue the opportunity or not.

Conclusion

To summarize, by using the above framework, it provides a way to validate your product idea with the market before pursuing it.

Often, people do not invest enough time researching each of the steps and end up making products that are not needed in the market or face difficulties marketing the product.

I hope you have enjoyed this article. Do let me know your feedback and you can connect with me on Twitter @skaytech.

What is Event Loop in JavaScript?

skaytech — Thu, 17 Sep 2020 06:45:43 +0000

Introduction

JavaScript Event Loop is one of the most fundamental concepts that every developer must aspire to understand. It is also one of the most frequently asked interview questions.

JavaScript essentially is Single-threaded, i.e., it can only execute one task at a time. So, what happens if one request takes more than 2 minutes to execute? Will the user be kept waiting for ever? It certainly not an ideal situation. Thankfully, JavaScript's Event loop architecture comes to the rescue, as it provides the ability to process multiple requests asynchronously.

We will first look at the following components that constitute Event Loop Architecture.

The Call Stack
Web API
Event Queue

Once we try and understand how they work together, then explaining Event Loop becomes very simple.

Call Stack

The Call Stack is a part of the JavaScript Engine and it is simply a stack in which you can add an item and the item added first is processed last. In other words, it follows the FILO - 'First In Last Out' principle.

A Call Stack acts as a placeholder or a holding area for all the JavaScript functions that have been fired for execution.

Let us look at the below code sample and understand how the function 'sayHello' gets added to the Call Stack.

const sayHello = () => {
  console.log('Hello from Skay');
} 

sayHello();

Step 1 - sayHello Function gets added to the Call Stack

From the illustration below, you can see once the function sayHello() is invoked, it is added to the call stack.

Step 2 & 3 - Function returns a value & gets popped from the Call Stack

Once the function returns a value, the output 'Hello from Skay' gets displayed on the console. As soon as the function returns, almost immediately, the function is also popped off from the call stack.

Now, let's look at the below code example, with two functions and understand how JavaScript Engine executes it.

const sayHello = () => {
  console.log('Hello from Skay');
}

const timeoutFunction = () => {
  return setTimeout(() => {
    console.log('Hello from Timeout Function');
  }, 1000)
}

sayHello();
timeoutFunction();

As discussed previously, the two functions are added to the Call Stack as shown below. And the function sayHello() is popped off the stack once the function execution completes.

However, as for the second function 'timeoutFunction', it returns a setTimeout function which is a part of the Web API. Let us look at what Web API is first.

Web API

Web APIs are built into your web browser and they are able to process data from the browser to do complex useful things. The main thing to understand is that, they are not a part of the JavaScript language, but, they are built on top of the core JS language and provide additional capabilities such as Geolocation, LocalStorage, etc.

So, coming back to our code example, when the function 'timeoutFunction' is executed, it returns the 'setTimeout' function and is popped off the stack.

Since the 'setTimeout' function is part of the Web API, it gets moved to the Web API as shown below. Along with that, the timer function in Web API is set to 1 second (1000 ms) based on the argument we had passed to the 'setTimeout' function as shown in the illustration below.

So, what happens after one second? Ideally, you would have anticipated that the function is returned back to the Call Stack for execution. However, instead, it adds it to the Event Queue.

Event Queue

Event Queue is a data structure similar to Stack, which holds the data temporarily and the important thing to note is that the data added first is processed first. In other words, it follows the FIFO -> 'First in First out' principle.

So after one second, the 'setTimeout' function from Web API is added to the Queue as shown below.

Event Loop

Finally, the 'Event Loop' we've been waiting for. The function of Event Loop can simply be explained as connecting the Event Queue to the Call Stack.

Event Loop does the following:

Checks if the Call Stack is empty, i.e., if all the functions have completed their execution and they have been popped off the Call Stack.
Once the Call Stack is empty, it moves the first item from the Event Queue to the Call Stack.

When the setTimeout function gets added to the Call Stack, the function simply returns the output 'Hello from Timeout Function' on the console and is popped out of the Stack.

That's all there is to know about Event Loop. Hope the explanation with illustrations provided a way to understand Event Loop in a simple manner.

In fact, there's a tool to visualize the Even Loop in real time built by Philip Roberts, which you can access from this link.

Conclusion

To summarize, in this article, we learnt about how JavaScript is Single-Threaded in nature and using Event Loop, it supports processing multiple-requests with the help of a Call Stack, Web API and Event Queue.

Event Loop is basically the way where JavaScript engine looks at the queue to find out if there are any immediate functions to run and picks the one added first and moves it to the Call Stack.

We demonstrated the above concept using the asynchronous setTimeout function which is a part of the Web API.

I hope you enjoyed the article. If you did, please do subscribe to my newsletter and don't forget to follow me on Twitter @skaytech

What is Value Proposition?

skaytech — Thu, 10 Sep 2020 08:44:02 +0000

Introduction

Over the past 4+ years, I've been working closely with Start-ups as an engineering manager and often would wear the hat of a product manager. One thing that was a common theme across every Start-up is the emphasis on the value they add to their customers.

There have been many instances when I ask founders of a start-up to describe their value proposition and they end up describing their business model. But, the interesting thing is that the end customers do not care about the business model. They simply want to know “What’s in it for me?” if I buy your product. If the product already exists in the market, they also ask the question “Why should I buy it from you”? Those questions essentially become the Value Proposition.

In this article, let us look at what value proposition is, and how to build a compelling value proposition statement. We will also take a look at a few examples of good value proposition statements.

What is Value Proposition?

A value proposition is a statement that answers ‘why’ someone should do business with you. It should be able to convince a potential customer why your service or product will be of more value to them than similar offerings from your competition.

A value proposition must be able to convey these values in a short, clear, and concise manner to potential customers without the need for further explanation. Each proposition must be unique, as it is a method to communicate the differentiation points of a company to the target customers.

Why is Value Proposition Important?

A value proposition is an important part of your company’s business strategy. It is also a powerful tool to drive sales and customer base.

Since it provides a way to influence the decision-making of customers, it is often displayed on a company’s marketing material such as the company website. A compelling value proposition significantly impacts the effectiveness of your company’s marketing strategies.

How to create a Value Proposition?

There are many ways to create a really compelling value proposition. Let us look at three popular ones varying from complex mapping to simple formula.

Value Proposition Canvas

Value proposition canvas is one of the most popular methodologies available to create a value proposition statement. It is highly recommended to use the canvas, especially if you are creating a value proposition for the first time. The reason primarily is that it represents a visual medium to capture our thoughts and it can help you focus on one section at once.

Source: Peter Thompson

On the customer’s side, you’ll explore the wants (emotional drivers), needs (rational motivators), and fears (undesired outcomes). In general, the objective here is to try and understand the buyer’s perceived likelihood of failure, anxiety, or reputation at work.

An example of a value proposition canvas for Evernote is shown below:

Source: Peter Thompson

Harvard Business School’s Essential Questions

Harvard Business School’s Institute for Strategy & Competitiveness simplifies the process of defining the value proposition by establishing a connection between the company and its customers.

While the value chain focuses internally on operations, the value proposition is the element of strategy that looks outward at customers, at the demand side of the business. The strategy is fundamentally integrative, bringing the demand and supply sides together.

Source: Harvard Institute for Strategy & Competitiveness

You start the process by brainstorming as a small group (no more than 3) around the following questions:

Which customers are you going to serve?
What needs are you going to meet?
What relative price will provide acceptable value to your customers and acceptable profitability for the company?

Depending on your offering (product/service), it may make sense for you to start with the first or second question in the list. Together, all three questions create a triangle as shown in the illustration above, to create a succinct value proposition.

You will come to realize which one is the “primary” leg of the triangle as you move through the exercise. For example, is the greatest value that you offer is cost savings? Or, is it that you’re offering a better product or experience at a premium cost?

Harvard’s experts use the iPad as a great example. Apple created a new demand that did not exist in the market. Customers did not realize they wanted a tablet until the iPad came along.

Steve Blank Formula

Steve Blank, a former Google employee, realized that many startup founders struggle when coming up with a concise value proposition and often emphasize the product features rather than the benefits they offer to the customers.

Steve came up with a simple formula to transform the brainstorming process into a simple sentence.

"We help (X) do (Y) by doing (Z)"

The formula is based on the principle that the first thing that comes to the mind may be the best. Your gut instinct could be spot on and that’s what makes this simple solution valuable.

For example, your local ice cream shop may have a value proposition similar to this one:

“We help our local customers satisfy their sweet tooth by providing them premium natural ice-cream in a community-focused space.”

Although you may have brainstormed as a group, you should ask participants to come up with the value proposition individually. It is often the case that each participant perceives the value they offer to their potential customers differently and this can yield helpful insights in coming up with a compelling value proposition.

Lastly, as you draft your value proposition, remember to use the voice of the customer. When you use the customer’s voice, you will address the gap between what you say and what you hear.

Examples of Compelling Value Proposition

Novo Watch

To summarize, the value proposition is all about understanding what needs of the customer you are able to meet, and how your product or service offering stands out amongst the competition that compels the customer to always favor your product or service in the market. It is important to continue to listen to your customer, evaluate how to adjust your value proposition to the ever-changing needs of the customer and markets.

The Value Proposition

“Timepieces handmade in Alberta from repurposed pieces of history”

What is so compelling?

It cannot get any more transparent than the message it conveys on the landing page of their website. It tells us why their product is valuable.

It is handmade, which means it’s quality.
Repurposed pieces of history. Even if the layman doesn’t understand those terminologies, the word history certainly signifies that there’s a unique story behind their creation.

Once you scroll down their website, you’ll see words such as “handcrafted” and “reflect history” are repeated. Not only did they do a fantastic job of presenting value upfront, but they also reinforced their core values of craftsmanship and recycled materials throughout their website.

Less Accounting

The Value Proposition

“Simple accounting software for entrepreneurs who dislike accounting.”

What is so compelling?

Less accounting’s value proposition addresses the following:

It immediately addresses the target audience: entrepreneurs.
The word ‘dislike’ is highlighted and underlined to convey the strong message that customers need not know accounting concepts to operate the software.

On their website, as you scroll down, they highlight the simplicity of the software through words such as accessible, convenient, and manageable. There’s a specific use-case highlighted in the sentence ‘Be ready for tax time’.

Unbounce

The Value Proposition

“Build, Publish, and A/B Test Landing pages without I.T.”

What is so compelling?

Their landing page is very interesting. They have made a dynamic landing page which animates, showcasing their value proposition in three simple phrases:

Convert More Leads
Convert More Sales
Convert More Customers

The brand lays out its offerings without coming off as too sales-y. It clearly talks to the target audience i.e., the marketers, and talks to their core pain point of deferring the work of creating landing pages to I.T.

Value Proposition Evolves Over Time

It is important to note that value proposition evolves over time especially with changing customers, markets, or even other factors such as the global pandemic that we are currently caught up in.

Photo by CDC on Unsplash

A very relevant example of the same would be how food delivery companies such as Swiggy, Zomato or e-commerce companies such as Amazon, Flipkart now had to go back to their value proposition and ensure that the topmost concern for their customer today is safety and not just timely delivery or ensuring there’s adequate tracking for your delivery.

They will have to emphasize and ensure how their service or product offering has adapted to the COVID-19 situation and how they continue to offer their promise ensuring ‘safety’ is of paramount importance. There’s a dedicated COVID-19 web page added to their site and sections highlighting how customers can contact their specialized team to know more about what they do to ensure they have the highest safety standards implemented. All of these steps, directly work towards ensuring that they address what the customer considers to be the utmost value, i.e., safety against COVID-19.

Conclusion

It is important to continue to listen to your customer, evaluate how to adjust your value proposition to the ever-changing needs of the customer and markets.

This is my first article on Product Management. Do let me know your thoughts, comment on whether you would like to see me publish articles on Product or just stick to technology related ones. Thank you for reading so far and you can connect me on Twitter ->

DEV Community: skaytech

What is Technical Debt?

What is Technical Debt?

Why Technical Debt is necessary?

Types of Technical Debt

Planned Technical Debt

How to address them?

Unintentional Technical Debt

How to address them?

Unavoidable Technical Debt

How to address them?

Is Technical Debt bad?

Conclusion

You may also enjoy the following articles:

You will also enjoy the following articles:

How to provide estimates as a Junior Developer?

Introduction

Estimation

Key Terminologies

User Story

Scope

Velocity

Capacity

General Guidelines for Estimation

Conclusion

You may also like the following articles:

Why work at a Startup and What to expect?

Introduction

Why work with Startups?

Creative Freedom

Career Development

Develop Resiliency

A Unified feeling and connecting over the mission

What to expect while working with Startups?

Be comfortable with uncertainty

Be Independent and a team player

Find your Sparkle

Enjoy the ride

Conclusion

You may also like the following articles:

A Detailed overview of NPM, Registry, CLI & it's related Components

Introduction

What is NPM?

Why do we need a Package Manager?

Node Package Manager

Registry

npm CLI

How to install npm?

How to initialize your Project with npm?

node_modules

package.json

dependencies

devDependencies

scripts

NPM Registry and How to install packages from the registry?

Install your dependency as a Dev Dependency

How to publish your package to NPM?

Versioning

The '^' operator in your Version number

The '~' operator in your version number

Exact version

conclusion

You will also enjoy the following articles:

The React Ecosystem

Introduction

React

Babel

Webpack

Routing

Styling

Traditional Styling

React Styling

State (Redux/Context)

React State

Redux

Context

Conclusion

You will also enjoy the following articles:

Why you should choose to learn 'React'?

Introduction