DEV Community: Ali Raza

I used Netflix subscription to understand their frontend system & API design.

Ali Raza — Sun, 08 Jun 2025 18:12:20 +0000

This was originally posted at my blog.

If you browse Netflix, you will notice that it provides a seamless and faster experience.

The homepage loads swiftly; movie suggestions appear almost instantly. Clicking on a title brings up the details without delay, and playback begins in a second.

All these things work because the Netflix team carefully planned the frontend system, API schema, image compression and formats, and structure.

We will discuss these practices and system design, taking notes on implementing them in other applications.

API

GraphQL
Netflix uses GraphQL APIs to fetch data from servers. The structure for each API is well defined.

There are APIs such as

Movie listing API
Movie details API
Token APIs

The APIs’ latency is within the milliseconds range and likely loads from the cache.

It demonstrates the scale of system design, the load those servers have, and how they deliver quickly.

Netflix Frontend System Design: Strategies and learnings

This section will examine how Netflix built its frontend system to provide an excellent experience.

Pre-fetching

In pre-fetching data is downloaded/fetched before the user performs an action or reaches that portion.

The Netflix frontend mostly prefetches data. It doesn't always wait for user actions to fetch the required data. Instead, it anticipates and performs in the background.

Initial Page Load

When the user reaches the profiles section, the website fetches data for the initial section of the homepage. The data usually includes

Thumbnail URLs
Title and relevant info
categories, etc.

So, when you visit your profile section, the Netflix website has required data available to show to the user when they visit the next homepage of their profile.

Hovering over a title

As mentioned earlier, Netflix prefetches some data required for the initial view but loads additional data per the user's action.

Now, when you hover over an image, it will

Download a quick view video of the title
Download extra information for the hover box and details modal
Fetch th e suggested movies’ IDs

The first two actions provide data for the hovered view, and if the user clicks on the modal, it will show the details for that movie/series.

However, it only fetched the movie IDs of the suggested one, and fetched relevant info only when the user opened the details of the movie.

This is a better choice because the user opening the details modal is optional, and the movie detail API's bandwidth and latency are reduced.

Once the details model is opened, as shown in the image above, it will load the movie trailer or image and related info, and download data for suggested titles as per the movie IDs fetched in the previous steps.

Learning

Design UI/UX and APIs to show minimum details first if there are too many items on the listing

If the user hovers over or loads an item, load the additional data.

For further peripheral items, such as suggested listings, fetch data on demand only.

The API's latency should be double-digit milliseconds at max to load and show content quickly.

Lazy loading

The Netflix app doesn't load all sections at once.

Instead, when a user scrolls down, different titles against each category are shown as per the categories set by the system based on the user's history or preference.

As expected, the data for the next categories is fetched as the user scrolls down, and roughly the next 5-6 category sections are already preloaded with that data.

Here, Netflix provides a seamless UX and demonstrates effective API and data management.

Learning

Loading all data simultaneously might slow the rendering and impact the experience.
So, always fetch and show relevant data only on the frontend and load more as the user scrolls.
The APIs should be designed to return data in chunks faster.

Images

The images are heavily compressed as per the place.

For thumbnails, the average size is 20-30 KB.

The images shown during the sneak peek are almost 0 bits due to the blob structure being used.

The reasons are quite logical.

The thumbnail size is small, around 300 by 160, and mostly the title and a picture of the user's preference are shown.

Here, showing high-quality images comprising hundreds of KBs doesn't make sense.

It will slow down the loading because hundreds of titles are shown simultaneously.

Learning

If you have an e-commerce store or some app where images are shown,
Compress and create images as per different view sizes
Always load minimal-size photos for the first view, such as on product listing pages.
If the user hovers and the size of the viewport changes, only then will a higher quality image be loaded.
By doing this, you will

Load the website faster
Provide a better experience
Save the customer's internet data

Conclusion

I hope you have learnt how to build performant frontend systems at scale to serve millions of users and maintain consistency.

Node.js is not single-threaded

Ali Raza — Fri, 31 May 2024 22:32:49 +0000

Node.js itself is not single-threaded.

Node.js developers often confuse the main single-threaded event loop with Node.js entirely.

When a Node.js app is running, it automatically creates 4 threads under the worker pool for blocking tasks.

So at any given time, there are at least five threads.

This worker pool is managed by Libuv.

The blocking tasks are mainly I/O-bound and CPU-intensive.

I/O bound
a. DNS: dns.lookup(), dns.lookupService()
b. File system except fs.FSWatcher()
CPU-intensive tasks
a. Some crypto methods such as crypto.pbkdf2(), crypto.scrypt(), crypto.randomBytes(), crypto.randomFill(), crypto.generateKeyPair()

b. All zlib APIs other than those using libuv thread pool synchronously.

The main thread/event loop works for JavaScript execution as usual, but the worker pool takes care of blocking tasks for the main loop.

So, Node.js shouldn't be confused.

Thanks for reading.

I do a deep dive into foundational concepts & how things work under the hood. You can consider connecting with or following me, Ali Raza, here and on LinkedIn to get along with the journey.

Node.js itself is not single-threaded.

Ali Raza — Thu, 18 Apr 2024 19:09:59 +0000

Node.js itself is not single-threaded.

Node.js developers often confuse the main single-threaded event loop with Node.js entirely.

When a Node.js app is running, it automatically creates 4 threads under the worker pool for blocking tasks.

So at any given time, there are at least five threads.

This worker pool is managed by Libuv.

The blocking tasks are mainly I/O-bound and CPU-intensive.

1. I/O bound
a. DNS: dns.lookup(), dns.lookupService()
b. File system except fs.FSWatcher()

2. CPU-intensive tasks
a. Some crypto methods such as crypto.pbkdf2(), crypto.scrypt(), crypto.randomBytes(), crypto.randomFill(), crypto.generateKeyPair()

b. All zlib APIs other than those using libuv thread pool synchronously.

The main thread/event loop works for JavaScript execution as usual, but the worker pool takes care of blocking tasks for the main loop.

So, Node.js shouldn't be confused.

Thanks for reading.

I do a deep dive into foundational concepts & how things work under the hood. You can consider connecting with or following me, Ali Raza, here and on LinkedIn to get along with the journey.

Never limit your tech stack

Ali Raza — Sun, 24 Sep 2023 13:51:03 +0000

To grow by leaps and bounds, you shouldn't limit yourself to a specific tech stack.

You need to choose one skill, master it, secure your job around it, and then start learning all relevant fields gradually.

Let's say you are currently working as a JavaScript developer, mainly on frontend projects, in your daily job. In your free time, you should be learning Node.js and building backend projects, and if your project needs a backend engineer, you can fill this role.

Similarly, if you have backend engineering experience, you can learn about data stacks, ML, and DevOps.

As you gradually start mastering hard tech skills along with soft ones, it will be easier for you to reach higher positions such as CTO, VP of Engineering, etc. because you will be a person who can get things done in any stack.

The people in higher tech positions are generalists rather than specialists in just one tech stack.

On the other hand, there are benefits to being a specialist in just one field, but those can't outperform the other one. It's often a personal choice and can offer amazing opportunities such as offering consultancies.

Thanks for reading.

If you want to excel in your career and learn building scalable apps and architectures, you can subscribe to my newsletter at https://lnkd.in/d7Du5QmS

Building predictable, reliable, resilient, and retriable APIs with Idempotency

Ali Raza — Sun, 17 Sep 2023 19:05:48 +0000

This post is originally from Zero To Architect, a free newsletter available on Substack from Ali Raza, a versatilist software architect who believes that anyone can be a software architect.

Developers want their APIs to be reliable and resilient.

But there is an area that is often overlooked: are your APIs predictable and retriable?

Let’s explore some examples.

Customers getting double charged: A classic example

A customer is using your payment APIs, and as soon as the process is initiated, there is a network issue on the customer’s end, and he is unable to receive a response. As soon as the network is back, they click on the pay button again. What should happen now?

If the payment process is restarted, the customer will be double-charged. Which will dent the credibility of the payment processor.

Order and Inventory Management Systems

Similarly, let’s say you have an e-commerce OMS app. The store owners process some orders but, for some reason, again perform the same actions. The system should not reprocess but instead, return the original response.

These problems can be resolved by introducing idempotency in the APIs.

What is idempotency?

Idempotency is a mathematical and computer science concept that refers to the quality of some operations or functions in which performing them several times has the same effect as performing them once.

An idempotent operation can be repeated an infinite number of times and still provide the same outcome.

Idempotent APIs enable API users to retry calls in the event of a network outage or other problems without having to worry about producing duplicate rows in a database or charging the client several times.

HTTP Methods ensuring idempotency

HTTP methods such as PUT, DELETE, and GET are idempotent in nature.

GET: Repeating a GET request will return the same resource representation without changing the resource on the server.
HEAD: The HEAD method, like GET, obtains metadata about a resource but not the resource itself. It can be used to check for the existence of a resource, get headers, or find the last change date without modifying the resource itself.
PUT: If the resource at the specified URL already exists, a PUT request will replace it with the new representation sent in the request body. PUT will build the resource if it does not already exist. PUT is idempotent in the sense that repeating the same PUT request with the same data does not affect the resource in any way other than the initial request.
DELETE: When you issue a DELETE request, the server deletes the resource if it exists, and it simply provides a successful answer if it does not. Multiple DELETE operations on the same resource will not have different outcomes beyond the first deletion, making it an idempotent operation.

How can a developer build idempotent APIs?

A developer can add idempotency in various ways.

1. Idempotency Keys

Idempotency keys are the building blocks of idempotent keys. A key, preferably a UUID, is used to identify a request. Whenever the API is called again with the same key, it will return the original response.

The keys are either external or internal.

External Idempotency Keys: If the API is integrated into 3rd-party apps, then that system can pass the key to be identified as the idempotency key.
Internal Idempotency Keys: If the system generates a key against each request and attaches that on the basis of an ID, then that key will be called an idempotent key.

Saving Idempotency Keys

The idempotency keys are usually short-lived and can be reused with new requests after a specified time.

Redis: Redis or other caching solutions can be used to save short-lived idempotency keys.
TTL indexing: Time-to-live indexes are often used to save a value in a database to be deleted later after a given time interval.

2. Using HTTP Methods

Using HTTP methods such as GET, PUT, and DELETE will ensure that the API resources are by default idempotent.

Let’s write some code

Here’s an example of how to utilize the Express.js framework to create an idempotent API endpoint in Node.js, including the use of an idempotency key to ensure that repeated requests do not have unintended consequences.

For upgrading a user’s email address, we establish an Express.js application and configure a POST request endpoint (/users/:userId/email).
To uniquely identify each request, we develop and employ an Idempotency-Key header. If you use the same idempotency key in many requests, the server will recognize it as a duplicate and reply accordingly.
The server determines whether the idempotency key has previously been processed. If it has, the server responds with a response indicating that it has already handled the request.
To prevent duplicate processing of the same key, processed idempotency keys are placed in a Set.

Final Thoughts

It is critical to consider the probability of failure in a distributed system and how to address it while developing APIs that are both resilient and predictable. Retry logic on clients and server idempotency are two strategies that can help achieve this goal and are reasonably easy to implement in any technological stack.

Here are a few fundamental principles to remember while building clients and APIs:

Ensure that failures are dealt with consistently. Request that clients retry activities on remote services. Failure to do so may result in inconsistent data, which may cause problems in the future.
Make certain that failures are handled in a safe manner. Allow clients to pass a unique value and retry requests as needed by using idempotency and idempotency keys.

Why You Should Learn Web 2.0 Before Getting into Web 3.0

Ali Raza — Mon, 11 Jul 2022 18:07:31 +0000

Web 3.0, a new buzzword, has taken the world by storm. From developers to technical cofounders and VCs, all are glorifying it. Startups are recruiting Web 3.0 devs for higher compensation. More developers are entering into next generation of the Web and a great number of those have taken it as their first tech stack. All are over the moon.

The tech powering Web 3.0 including both Frontend and Backend is built on top of Web 2.0 stuff. Although one can learn Web 3.0 directly, it is important to mention that a solid foundation should be erected in Web 2.0 first.

What Web2.0 tech stack is used to build Web 3.0?

Frontend

HTML, CSS, JS, React, and Next.js are the main building blocks of the Frontend of NFT marketplaces, Dapps, etc. These technologies belong to the earlier versions and there exists no Web3.0 Frontend excluding them.

Consuming Blockchain and Smart Contracts

Ether.js and Web3.js connect customer-facing UI with smart contracts. Without an iota of JS knowledge, these two are out of the scope.

Building Smart Contracts

Solidity is the defacto programming language to create smart contracts. It’s a statically typed programming language following OOPs concepts. The same is true for Rust, which is also gaining momentum nowadays. Having experience with Java, TypeScript comes in handy here.

The above discussion illustrates that having a strong knowledge of Web 2.0 tech is a prerequisite for getting into the neo web. If a novice gets into using web3.js without knowing in and out of JS, the person is destined to stick to issues. Similarly, working with Solidity or other stuff to create smart contracts requires OOP and Static typing knowledge.

Now, the question arises as to how can someone aloof to programming can get into Web3.0. Below, I have shared a viable plan.

Roadmap for a novice to get into Web 3.0

1. Learning the basics of web development
Start learning with HTML, CSS, JavaScript, and OOP. Having a strong background in these will enable you to not only create beautiful Frontends but also work with smart contracts.

2. Getting hands dirty on Web 3.0 concepts
Smart contracts, blockchain, proofs-of-concept, Ethereum, tokens, and other foundational concepts should be mastered as well.

coinbase.com

Introduction to smart contracts | ethereum.org

An overview of smart contracts, focussing on their unique characteristics and limitations.

ethereum.org

Introduction to dapps | ethereum.org

Ethereum is a global, decentralized platform for money and new kinds of applications. On Ethereum, you can write code that controls money, and build applications accessible anywhere in the world.

ethereum.org

3. Build Frontends of dapps, marketplaces, and more.

React and Next.js are widely used technologies to develop modern and fast frontends. This is a lethal combination here as well. Learning this stack will also help build Web 2.0 web apps.

4. Working with web3.js and ether.js

web3.js is a collection of libraries that allow you to interact with a local or remote Ethereum node using HTTP, IPC, or WebSocket. Similarly, the ethers.js library aims to be a complete and compact library for interacting with the Ethereum Blockchain and its ecosystem.

docs.ethers.org

web3js.readthedocs.io

5. Building Smart Contracts

Solidity, a high-level and object-oriented programming language inspired by C++, Python, and JavaScript, is widely used to create smart contracts. Having experience with statically typed programming languages is beneficial here.

docs.soliditylang.org

6. Be familiar with the ecosystem

A Web3.0 developer should have first-hand experience with Remix IDE, Truffle, MetaMask, and the relevant ecosystem.

To summarise, it can be said that it is pertinent to first learn Web 2.0 and then move into Web 3.0. It will help to have first-hand experience of how web development actually works and what are the differences between these versions of the web.

Thanks for reading. Follow for more amazing content.

Let’s connect on LinkedIn and Twitter.

Learn AWS as a Frontend Developer

Ali Raza — Sat, 25 Dec 2021 13:45:34 +0000

Amazon Web Services — AWS, the leading cloud-computing platform, is historically being associated with backend technologies such as DevOps, API development, Databases, etc. This is true, given that AWS and other cloud platforms are mentioned randomly in the jobs for backend developers.

However, you can learn relevant AWS technologies for your web apps. Most of those are discussed below.

1. AWS Amplify

AWS Amplify is a set of purpose-built tools and features that enables frontend web and mobile developers to quickly and easily build full-stack applications on AWS. Amplify provides two services: Amplify Hosting and Amplify Studio.

1. Hosting
a. AWS Amplify hosting provides a git-based workflow for hosting full-stack serverless web apps with continuous deployment.
b. Amplify supports the common SPA frameworks, for example, React, Angular, Vue.js, Ionic, and Ember, as well as static site generators like Gatsby.
c. Manage production and staging environments for your frontend and backend by connecting new branches.
d. Set up rewrites and redirects to maintain SEO rankings and route traffic based on your client app requirements.

2. Amplify Studio

a. The Studio is a visual development environment that simplifies the creation of scalable, full-stack web and mobile apps.
b. Set up authentication for your app.
c. Powerful and easy-to-understand authorization.
d. Infrastructure-as-code configures all backend capabilities with AWS CloudFormation.
e. Use Studio’s visual designer to build frontend UI components. Choose from dozens of designs in the pre-built UI component library.
f. Import Figma prototypes built by designers into Studio as React code.

2. AWS AppSync

AWS AppSync is a service to create GraphQL based APIs for interaction between multiple data sources such as AWS DynamoDB, AWS Lambda, etc.

source: AWS

Some of its features are:

1. Real-time, collaborative mobile, and web apps

AWS AppSync lets you build collaborative apps with shared data that is updated in real-time.

2. Offline data sync support

For mobile and web apps, AppSync provides local data access when devices go offline, and data synchronization with
customizable conflict resolution, when they are back online.

3. Integrating data from multiple sources

AWS AppSync allows access data in Amazon DynamoDB, triggers AWS Lambda functions, or runs Amazon OpenSearch queries, etc.

4. Data collision detection and conflict resolution

AWS AppSync can automatically resolve conflicts on data that is shared between multiple users and devices.

5. Secure data access

Amazon AppSync integrates with Amazon Cognito and AWS Identity and Access Management, so you can set fine-grained permissions on GraphQL operations and keep users and app data secure.

3. Amazon Device Farm

AWS Device Farm provides an extensive range of desktop browsers and mobile devices to test web and mobile applications. It creates videos and logs to help identify issues.

a. Automated testing in parallel on multiple devices.

Source: AWS

b. Test your app on any device directly from your browser.

Source: AWS

4. Amazon Location Service

The location service provides maps, trackers, route calculators, and more services. All queries are anonymous and user data is not passed. Esri and HERE services are used for routes, tracking, and geofencing.

5. AWS CodeCommit

You might have been using GitHub, BitBucket, and GitLab for hosting your codebase, however, AWS CodeCommit is also another solution for your scalable private repos. It is highly available, secure, fully managed, and can store anything.

6. AWS X-Ray

AWS X-Ray helps developers analyze and debug production, distributed applications. With X-Ray, you can understand how your application and its underlying services are performing to identify and troubleshoot the root cause of performance issues and errors. X-Ray provides an end-to-end view of requests as they travel through your application, and shows a map of your application’s underlying components. It helps developers with:

a. Review request behavior

b. Discover application issues and improve application performance

c. Designed for a variety of applications

Source: AWS

The above-mentioned services are more suitable for frontend development and can be a good addition to your skillset.
Let’s connect on Linkedin, Twitter
Thank you.

Hydrogen by Shopify | A much-needed framework to build Shopify React e-commerce stores

Ali Raza — Thu, 09 Dec 2021 22:55:01 +0000

Shopify created turbulence in the tech world by announcing Hydrogen, a React-based framework powered by Shopify’s Storefront API, to create fast, modern, and custom e-commerce storefronts at pace. The framework integrates React Server Components, uses smart caching techniques, is styled using Tailwind CSS, and is bundled using Vite.

Hydrogen is packed with all the tools and solutions so that developer focuses more on building customized storefronts.

Hydrogen offers:

Built-in caching controls
Server-side rendering
React Server Components
Shopify-specific commerce components, hooks, and utilities
flexible page and subrequest cache policies

As soon as I got my hands dirty, it was apparent that this is not simply another framework but a complete package to not only build the eCommerce stores but address related issues like site speed caching. Its claim to provide a faster developer experience is true to a great extent.

What is Shopify and how online stores are already being developed?

Shopify is an eCommerce platform to create an online store by following a few steps. Buy membership, select store theme and domain and you are ready to sell. Liquid, a template language powered by Shopify, is used to create storefronts. Integrating Liquid with React brings limitations, best practices can’t be ensured easily and it was a painful developer experience.

Learn How to become a React developer in 2022

What Hydrogen brings?

Hydrogen provides an amazing developer experience by using the best available libraries and practices. Working with Hydrogen is similar to building another React app. No extra connections with Shopify APIs as this is handled by useShop hook. Efficient caching policies are introduced and managed by React Query. Tailwind CSS styles the storefront. React Server Components are introduced to decrease bundle size. and More. Let's explore more.

Get started: Install Hydrogen React Starter Template

Install Hydrogen template by running the following command:

yarn create hydrogen-app

Shopify Hydrogen folder structure

The folder structure is quite similar to the one used widely.
shopify.config.js file connects the storefront to Shopify Storefront API and comes with demo store credentials. The components with .server.jsx suffix are server components and the ones with .client.jsx are served by React app build.

export default {
locale: 'en-us',
storeDomain: 'hydrogen-preview.myshopify.com',
storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
graphqlApiVersion: 'unstable',
};

How does Hydrogen work? Let's explore behind the scenes.

Let's discuss Hydrogen’s architecture. Hydrogen comes with React 18 alpha version and is powered by the Vite plugin that offers server-side rendering (SSR) and hydration middleware, as well as server and client component code transformations. The SSR and hydration middleware is similar to existing Vite SSR implementations.

For dynamic routing and navigation within the app, React Router is used.

Custom but specific hooks, such as useShopQuery, are introduced for caching and integration with Shopify.
The useShopQuery hook is designed to be used only in server components. This is because only server components can make calls to the Storefront API. The useQuery hook allows you to execute an asynchronous operation like fetch in a way that supports Suspense. You can use this hook to call any third-party APIs.

GraphQL

To fetch data dynamically, GraphQL is used.

How does Hydrogen work?

source: Hydrogen

Streaming Server-side Rendering

SSR fetches the data on the server and returns it in the response at the cost of a slow time-to-first-byte (TTFB) because the server is blocked on the data. Here, Streaming SSR plays an important role. Hydrogen adopts the new React 18 alpha streaming SSR API powered by Suspense that unlocks critical performance benefits with hydration and fast TTFB.

React Server Components

Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering. RSC
Server components have no impact on the app’s bundle’s size.
RSCs can be used to fetch data from API and can’t handle state management.

Efficient Data Fetching, and Caching

Hydrogen provides two mechanisms for cache within applications:

Sub-request caching: While rendering a page in your Hydrogen app, it’s common to make one or more sub-requests to Shopify or other third-party data sources within server components. You should use sub-request caching to keep pages loading quickly for end-users. The following example shows how to implement useShopQuery for Shopify Storefront API queries:

const {data} = useShopQuery({
  query: QUERY,
  cache: {
    // Cache the data for one second.
    maxAge: 1,
    // Serve stale data for up to nine seconds while getting a fresh response in the background.
    staleWhileRevalidate: 9,
  },
});

Full-page caching: In addition to sub-request caching, it’s helpful to cache the entire page response at the network edge and in the browser. This is the most useful for pages without dynamic or personalized data, like marketing pages or blog content.

export default function MyProducts({response}) {
  response.cache({
    // Cache the page for one hour.
    maxAge: 60 * 60,
    // Serve the stale page for up to 23 hours while getting a fresh response in the background.
    staleWhileRevalidate: 23 * 60 * 60,
  });
}

Hydrogen Components and Hooks: Development apace

Hydrogen contains a set of Shopify-specific commerce components and hooks that help accelerate your development process.

1. Primitive components

Primitive components are the building blocks for different component types, including products, variants, and the cart. Some of the primitive components and hooks are useMoney, ExternalVideo, Image, RawHTML, ShopPayButton, and UnitPrice.

2. Global Components

ShopifyProvider is a global Hydrogen component that wraps your entire app. It is a shared component and renders on both the server and the client. Global hooks comprise useQuery, useShop, useServerState, and useShopQuery.

3. Product and variant components

Products are what a merchant sells. If a product has options, like size or color, then merchants can add a variant for each combination of options. Examples: ProductDescription, ProductPrice, ProductTitle, SelectedVariantBuyNowButton, etc. Only two hooks were made for this section: useProduct and useProductOptions.

4. Cart components and Localization components

Localization, with the help of LocalizationProvider, can help merchants expand their business to a global audience by creating shopping experiences in local languages and currencies. useAvailableCountries and useCountry bring localized data.

Hydrogen comes with a lot of cart components and hooks. A few of those are AddToCartButton, BuyNowButton, CartEstimatedCost, useCart, useCartCheckoutUrl, etc.

5. Utilities

Hydrogen contains a set of utilities that help accelerate your development process.

isClient: Indicates if the code is executed on the client.
isServer: Indicates if the code is executed on the server.
flattenConnection: Transforms a connection object into a flat array.
parseMetafieldValue: Parses a metafield’s value from a string to a sensible type corresponding to the metafield’s type.

Deploying Hydrogen Storefronts

Shopify has announced Oxygen, a specialized hosting solution for Hydrogen e-commerce stores.

Review

Hydrogen is promising. It is aiming to revolutionize the e-commerce experience. But, the impact promised is based upon tech currently released under alpha release or not released at all but only promised. The production-level testing can be done after Oxygen is built and some big e-commerce storefronts are actually built upon it.

Let’s hope for the best.

Thanks for reading.

Follow me at LinkedIn: https://www.linkedin.com/in/thealiraza

How to become a React developer in 2022? Here is the complete Roadmap.

Ali Raza — Tue, 07 Dec 2021 21:14:26 +0000

React is the leading technology for building outstanding, fast, scalable, and most importantly reusable frontends. As per the 2021 Developer Survey conducted by StackOverFlow, React is the most used web framework. More companies are looking for React developers in 2022 than ever.

What is React.js?
React.js is a JavaScript UI library, created by Facebook, for building scalable UI components. It can be used for building single-page applications, mobile apps, PWAs. The most important factor behind its popularity is the lower learning slope.

In this article, we will learn step by step that how can one become a React developer.

Most of the non-reactive code written in React is JavaScript.

## Pre-requisites
a. JavaScript
As React is a JavaScript library, it is important to have a background in JS and an understanding of some important concepts. React nowadays comprise React Hooks and functional components, learning ES6 is recommended.

JavaScript concepts, you should know:

Variables in JS
Arrow Functions
Data Types and their methods
Dom Manipulation and events
Higher-Order and Callback Functions
Promises
Asynchronous JS

b. HTML / CSS
The representational components in React are developed using HTML and styled via CSS or a third-party tool. Suppose you are creating a button component. That component will have a label, styling, and some attributes. More than often, the HTML button element will be used for creating that component and that will be styled using CSS or any other styling library.

Core React Concepts to master

1. Virtual Dom and Diffing algorithm

Virtual Dom and Diffing algorithm are behind the scene of React.js. Manipulating real dom is slow, so React utilized the concept of virtual dom. Virtual dom is an abstraction of real dom. Every time a component or element is rendered, the virtual dom object gets updated. It then compares the recently updated virtual dom with a copy of the pre-updated virtual dom and figures out which dom object to update. The process to compare two virtual doms is called diffing. In the next step real dom is updated with the virtual dom and the updated virtual dom becomes pre-updated virtual dom for the next dom change.

2. JSX: React Template Language

JSX can be called the syntax of React. It stands for JavaScript XML and helps to write HTML code in JavaScript and render your custom component on UI.

const blog = 'programinja'
You can add variable "blog" in "p" element by using power of JSX.
<p>Blog: {blog}</p>

3. Components: building blocks of React apps
The React app comprises React components. From a simple button to a complex dashboard chart, each and everything in React apps is a component. The below code snippet is a simple React component and will render a link on UI.

import React from 'react'
const SimpleComponent = () => {
  return (
        <a href='https://www.google.com'>Google!</a>
  )
}
export default SimpleComponent

The component is not reusable as its label and URL are fixed. To make a component re-usable props come in.

4. Props
Props are property objects, used to pass read-only data between React components. Props can be passed as a variable or object and in a uni-directional flow.

/// simpleComponent.js
import React from 'react'
const SimpleComponent = ({ label, url }) => {
  return (
        <a href={label}>{url}</a>
  )
}
export default SimpleComponent

The Link component is now reusable and can be rendered with different labels and URLs as shown in the below snippet.

/// index.js
import SimpleComponent from './simpleComponent'
const App = () => {
  return (
      <SimpleComponent label='Google!' url='https://www.google.com' />
    )
}

5. State Management

In layman’s language, a state is a Javascript object, which stores mutable data that can be used and updated by the component. Any change in state re-renders the component. Historically state is associated with class-based components, however, with the useState / useReducer hook, it can be managed in functional components.

The state can be managed at the component level by calling useState hook and at the global level through state management solutions such as Redux, Context API, Recoil, etc.

6. React Hooks

React 16.8 introduced hooks in 2018. React hooks help manage state and lifecycle methods in functional components and have made class-based components redundant. Hooks can only be used in functional components and at the top level.

Basic Hooks

useState
useEffect
useContext

Advanced Hooks

useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

import React, { useState } from 'react'
const App = () => {
const [sum, setSum] = useState(1) /// The initial value of sum is 1.
return (
  <>
    <button onClick={() => setSum(sum + 1)} >+</button
    <span>{sum}</span>
    <button disabled={sum === 1} onClick={() => setSum(sum - 1)}>-    </button>
  </>
  )
}
export default App

In the above component, the state is managed via useState Hooks at the local level.

7. Creating your own custom hooks

Custom hooks can be created to share reusable functional logic across multiple components. For example, a custom hook to detect the browser window width or fetch data from APIs can be created and used across the app. A custom hook starts with use.

In the below example, a custom hook is created, which returns the width and height of the browser window. It can be used for mobile responsiveness, etc.

import { useLayoutEffect, useState } from 'react'
const useWindowSize = () => {
const [size, setSize] = useState([0, 0])
useLayoutEffect(() => {
const updateSize = () => {
setSize([window.innerWidth, window.innerHeight])
}
window.addEventListener('resize', updateSize)
updateSize()
return () => window.removeEventListener('resize', updateSize)
}, [])
return size
}
export default useWindowSize

You can use useWindowSize hook to detect widows width and render desktop or mobile components against respective screen sizes.

const NavBar = () => {
  const [width] = useWindowSize()
  return (
    width > 786 ? <Desktop /> : <Mobile />
  )
}

If you have mastered these concepts, you can call yourself a beginner React developer. But, there are some higher-level concepts to be learned to beat the crowd.

Advanced React Topics

Higher-Order Components
Code-splitting
Refs
Context API
Server-side Rendering
React Suspense
React Server Components

After picking up these concepts you can call yourself a React developer.

So now you have learnt basic and advanced level React.

But, as React is itself a library, so we need to use other libraries and node packages, such as React Router for routing, Redux for state management, etc, to leverage more functionalities.

React Ecosystem

1. React Router / React Router Dom
React Router is a routing library for navigating between React components by modifying URLs. When a user lands on a URL, React Router will detect if a component is set to render against that router and render on UI.

2. State Management via third-party libraries
Although React provides state management at component and global level via useState hook and Context API. However, if an app is much complex and you want more control, a third-party tool like Redux, Recoil, Mobx can be used. Personally, I suggest using Context API with useReducer.

3. Forms
Creating dynamic and complex forms with validations and other stuff requires using a library. Formic and React Hooks Forms are widely used for creating forms. These libraries handle all aspects of a form seamlessly. Yup is widely used for adding validations.

4. React Testing
React testing is a concept to test your components if a component behaves as expected. For example, you have created an input field and expect it to behave in a certain way. The test will be written to cater to those use-cases. Automated testing help stabilize the components and reduce manual testing and captures bugs immediately. It is important for a developer to write test cases for your components. Jest, Cypress and React Testing Library are widely used for testing React apps.

5. Styling / UI libraries
Instead of creating UI components, such as Modals, Buttons, Menu, Dropdowns, etc, any UI library can be used. Common examples are Material-UI, Antd, Bootstrap. Besides, there are also multiple styling libraries to create your own styling such as Styled-components, Tailwind CSS.

6. Handling APIs
Multiple promises-based libraries are providing awesome solutions to work with Rest and GraphQL APIs. Axios, Superagent and are the popular ones for Rest APIs. Apollo and Relay dominate GraphQL.

Relevant tools you should learn

NPM
Git
Webpack
Heroku / Netlify
Firebase / AWS Amplify

Projects to build

E-commerce stores
To-do app
A basic SAAS app

Congratulations. After learning these concepts, you are now a ninja React developer. Start applying and continue learning.
Thanks for reading.

Follow me at LinkedIn: https://www.linkedin.com/in/thealiraza