Forem: Jeevan Kishore

Enhancing Graphics Performance with OffscreenCanvas and D3.js

Jeevan Kishore — Fri, 28 Mar 2025 06:02:02 +0000

Rendering complex graphics efficiently in web applications has always been a challenge due to JavaScript's single-threaded nature. The introduction of OffscreenCanvas provides a solution by enabling rendering operations in Web Workers, significantly improving performance for graphics-intensive applications. In this article, we'll explore how OffscreenCanvas works, how to use it effectively with D3.js, and its real-world application in an analytics website with multiple dashboards.

Understanding OffscreenCanvas

What is OffscreenCanvas?

OffscreenCanvas is a browser feature that allows canvas rendering to happen outside the main thread, typically inside a Web Worker. This prevents UI thread blocking and ensures smoother animations, faster rendering, and a better user experience.

Why Use OffscreenCanvas?

Improved Performance: By offloading rendering tasks from the main thread, it reduces UI lag.
Parallel Processing: Works efficiently with Web Workers, allowing multiple rendering tasks to run simultaneously.
Responsive Applications: Ensures smooth UI interactions, even during intensive graphic operations.
Better Frame Rates: Reduces dropped frames in animations and visualizations.

Developing a Multi-Dashboard Analytics Website with OffscreenCanvas and D3.js

Use Case: High-Performance Analytics Dashboard

Consider a web-based analytics application that displays multiple dashboards, each containing charts such as bar graphs, line charts, and pie charts. The challenge is ensuring smooth performance when rendering real-time data updates without affecting the overall responsiveness of the website.

Step 1: Setting Up the Main Thread

In the main thread, we initialize multiple canvases and send them to a Web Worker for rendering:

const worker = new Worker("dashboardWorker.js");
const canvasElements = document.querySelectorAll("canvas");

canvasElements.forEach((canvas, index) => {
    const offscreen = canvas.transferControlToOffscreen();
    worker.postMessage({ canvas: offscreen, type: index % 2 === 0 ? "bar" : "line" }, [offscreen]);
});

Step 2: Rendering Charts in a Web Worker with D3.js

Create dashboardWorker.js to handle multiple chart types dynamically using D3.js:

importScripts("https://d3js.org/d3.v7.min.js");

self.onmessage = function(event) {
    const { canvas, type } = event.data;
    const ctx = canvas.getContext("2d");

    function drawBarChart() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        const data = [10, 20, 30, 40, 50];
        data.forEach((d, i) => {
            ctx.fillStyle = "blue";
            ctx.fillRect(i * 50, canvas.height - d * 5, 40, d * 5);
        });
    }

    function drawLineChart() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        const data = [10, 20, 30, 40, 50];
        ctx.strokeStyle = "red";
        ctx.beginPath();
        ctx.moveTo(0, canvas.height - data[0] * 5);
        data.forEach((d, i) => {
            ctx.lineTo(i * 50, canvas.height - d * 5);
        });
        ctx.stroke();
    }

    if (type === "bar") {
        drawBarChart();
    } else {
        drawLineChart();
    }
};

Why This Works Well for an Analytics Website

Multiple dashboards rendered in parallel without blocking UI interactions.
Scalability – New charts can be added seamlessly without degrading performance.
Smooth user experience by running visualizations in Web Workers.

Practical Applications of OffscreenCanvas in Analytics Websites

1. Real-Time Data Visualization

For dashboards that update frequently with real-time data, OffscreenCanvas ensures that UI interactions remain smooth while charts update dynamically.

2. Financial Market Analysis

Stock trading and cryptocurrency platforms require rapid chart updates. OffscreenCanvas enables live updates without performance degradation.

3. Website Traffic Monitoring

Analytics dashboards tracking website visitors, session durations, and heatmaps can benefit from OffscreenCanvas to render multiple visualizations efficiently.

4. AI-Powered Predictive Analytics

Machine learning models predicting trends can use OffscreenCanvas to display forecasts, helping users make data-driven decisions.

Performance Comparison

A simple benchmark comparing rendering with and without OffscreenCanvas demonstrates its advantages:

Method	Frame Rate (FPS)	Main Thread Load
Traditional Canvas	~30 FPS	High
OffscreenCanvas + Web Worker	~60 FPS	Low

This improvement is due to reduced workload on the main thread, leading to smoother and more responsive applications.

Browser Support

As of now, OffscreenCanvas is supported in major browsers like Chrome, Edge, and Firefox. However, it has limited support in Safari. To check browser compatibility, use:

if ('OffscreenCanvas' in window) {
    console.log("OffscreenCanvas is supported!");
} else {
    console.log("Your browser does not support OffscreenCanvas.");
}

Conclusion

OffscreenCanvas, combined with D3.js, is a powerful tool for building high-performance analytics dashboards. By moving rendering operations to Web Workers, it significantly enhances performance, improves responsiveness, and ensures seamless user experiences.

Are you using OffscreenCanvas in your analytics projects? Share your experience in the comments!

About the Author

I am a Lead software engineer specializing in JavaScript, Web Performance Optimization, and Data Visualization. Connect with me on LinkedIn or check out my portfolio here.

Real world use cases of object proxies

Jeevan Kishore — Sat, 10 Sep 2022 16:47:07 +0000

Standard definition

The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.

Let's simplify that a little.

"Customise the behaviour of an object, using handlers" -- in a broad sense.

Target and Handlers

Target is the object of concern on which Proxy is applied

Handlers or traps are functions passed as second parameter to Proxy which are responsible to handle actions (such as get, set etc) on the target

new Proxy(target, handler);

Let's look at some examples which will add weight around what the statement intends to convey.

Handle defaults

Consider a script which is to be used to match the winners with prizes they have won and everyone who participated gets a consolation prize.

A cleaner approach to coding it as opposed to a long list of if-else statements or switch is to use Proxy:

const prizeRegistry = {
  karen: "First Prize - BMW X5",
  mark: "Second Prize - Scooty",
  athira: "Third Prize - Bicycle"
};

const prizeHandler = {
  get(obj, prop) {
    return prop in obj ?
      obj[prop] :
      "Consolation prize - Chocolate Bar";
  }
};

const prizeList = new Proxy(prizeRegistry, prizeHandler);

console.log(prizeList.karen);
// expected output: "First Prize - BMW X5"

console.log(prizeList.reena);
// expected output: "Consolation prize - Chocolate Bar"

Input validations

With user inputs being a cog in the wheel to most of the applications today. Validations are to be placed to keep the data clean, ironically often as a result the code responsible gets messed up with time.

const validator = {
  set(obj, prop, value) {
    if (prop === 'weight') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The weight is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The weight seems invalid');
      }
    }

    // The default behavior to store the value
    obj[prop] = value;

    // Indicate success
    return true;
  }
};

const fish = new Proxy({}, validator);

fish.weight = 100;
console.log(fish.weight); 
// expected output: 100
fish.weight = 'small';    // Throws an exception
fish.weight = 300;        // Throws an exception

Finding an array item object by its property

const products = new Proxy([
  { name: 'Firefox', type: 'browser' },
  { name: 'SeaMonkey', type: 'browser' },
  { name: 'Thunderbird', type: 'mailer' }
],
{
  get(obj, prop) {
    // The default behavior to return the value; prop is usually an integer
    if (prop in obj) {
      return obj[prop];
    }

    // Get the number of products; an alias of products.length
    if (prop === 'number') {
      return obj.length;
    }

    let result;
    const types = {};

    for (const product of obj) {
      if (product.name === prop) {
        result = product;
      }
      if (types[product.type]) {
        types[product.type].push(product);
      } else {
        types[product.type] = [product];
      }
    }

    // Get a product by name
    if (result) {
      return result;
    }

    // Get products by type
    if (prop in types) {
      return types[prop];
    }

    // Get product types
    if (prop === 'types') {
      return Object.keys(types);
    }

    return undefined;
  }
});

console.log(products[0]);          // { name: 'Firefox', type: 'browser' }
console.log(products['Firefox']);  // { name: 'Firefox', type: 'browser' }
console.log(products['Chrome']);   // undefined
console.log(products.browser);     // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }]
console.log(products.types);       // ['browser', 'mailer']
console.log(products.number);      // 3

The above snippet is from mozilla documentation, showing how an object in an array of objects can be optimally found using proxy

There are a number of other real-world usecase(s) that could leverage the awesomeness of Proxy to better maintain and help keep the code cleaner.

P.S These are the few i use day in and out, there are few more such as DOM manupulations, Property forwarding. You can check em out here.

Hope this helps. Cheers 🍻

Customized payment UPI QR code generation

Jeevan Kishore — Sat, 30 Jul 2022 07:16:45 +0000

Use case

Recently i had been to a party, paid the bill amount and had to split the cheque with several people.

Communicating on how much.. where to transfer, which app to use and what not.. was a pain!

-- Instead --

Show a QR which works on all apps, scan -> get paid -> done

Generator

Live demo: https://upi-qr.vercel.app/
Source code: https://github.com/Jeevan-Kishore/upi-qr-generator

Architecture

Call the API on click of generateQR with the above mentioned format
Serverless function creates a QR using the details set via a GET call /api/getqr/[name]/[upi]/[amount]
A deelinking URL is constructed, out of which a QR is generated
API responds back with a .png - dataURI
Canvas of 300x300 is constructed to which received dataURI is set as src

QR generation has a variety of usecase(s), this is just one of them we thought to share.

Cheers 🍺

Run android emulator on CircleCI

Jeevan Kishore — Fri, 25 Sep 2020 09:44:03 +0000

Running an android emulator on a CI such as CircleCI has been a challenge for a lot of people who want to automate their test cases due to the fact that android emulator require hardware acceleration which is unavailable on debian terminals

We managed to get a headless emulator running on CircleCI with their iOS terminals.

iOS terminals need to be set up to accommodate the emulators, they have dependencies such as SDK's, NDK's, platform tools,

We would have to do the following:

Configure ANDROID_SDK_ROOT
Download SDK Tools and unzip
Create license directory and agree to all licenses
Set SDKManager path
Install the following
- "platform-tools"
- "platforms;android-29"
- "build-tools;29.0.2"
- "ndk-bundle"
- "system-images;android-29;google_apis;x86_64"
- "emulator"

Let's create a sh to do that

scripts/install-android-tools.sh


if [ -d $ANDROID_SDK_ROOT ]
then
    echo "Directory $ANDROID_SDK_ROOT already exists so we're skipping the install. If you'd like to install fresh tools, edit this script to invalidate the CI cache."
    exit 0
fi

mkdir -p $ANDROID_SDK_ROOT
cd $ANDROID_SDK_ROOT
curl https://dl.google.com/android/repository/sdk-tools-darwin-4333796.zip -o sdk-tools.zip

unzip sdk-tools.zip

mkdir -p "$ANDROID_SDK_ROOT/licenses"

echo "24333f8a63b6825ea9c5514f83c2829b004d1fee" > "$ANDROID_SDK_ROOT/licenses/android-sdk-license"
echo "84831b9409646a918e30573bab4c9c91346d8abd" > "$ANDROID_SDK_ROOT/licenses/android-sdk-preview-license"
echo "d975f751698a77b662f1254ddbeed3901e976f5a" > "$ANDROID_SDK_ROOT/licenses/intel-android-extra-license"

SDKMANAGER=$ANDROID_SDK_ROOT/tools/bin/sdkmanager

$SDKMANAGER "platform-tools"
$SDKMANAGER "platforms;android-29"
$SDKMANAGER "build-tools;29.0.2"
$SDKMANAGER "ndk-bundle"
$SDKMANAGER "system-images;android-29;google_apis;x86_64"
$SDKMANAGER "emulator"

echo "y" | sudo $SDKMANAGER --install "ndk;20.0.5594570" --sdk_root=${ANDROID_SDK_ROOT}

Let's write a command block on circle ci to set path, run scripts and cache

  android-sdk-dependencies:
    description: "Install and set android SDK"
    steps:
      - run:
          name: set ANDROID_SDK_ROOT
          command: |
            echo 'export ANDROID_SDK_ROOT=$HOME/android-tools'  >> $BASH_ENV
      - restore_cache:
          key: android=tools-v1-{{ checksum "scripts/install-android-tools.sh" }}-{{ arch }}

      - run:
          name: install android tools
          command: |
            sh scripts/install-android-tools.sh
            echo 'export PATH=$ANDROID_SDK_ROOT/tools/bin:$PATH'  >> $BASH_ENV
            echo 'export PATH=$ANDROID_SDK_ROOT/tools:$PATH'  >> $BASH_ENV
            echo 'export PATH=$ANDROID_SDK_ROOT/platform-tools:$PATH'  >> $BASH_ENV
            echo 'export PATH=$ANDROID_SDK_ROOT/emulator:$PATH'  >> $BASH_ENV
            source $BASH_ENV
            sdkmanager --list
      - save_cache:
          key: android=tools-v1-{{ checksum "scripts/install-android-tools.sh" }}-{{ arch }}
          paths:
            - /Users/distiller/android-tools

All that's left to do now, is to create the emulator and boot it up as a background job


  create-launch-android-emulator:
    description: "create and launch android emulators"
    steps:
      - run:
          name: create AVD
          command: echo "no" | avdmanager --verbose create avd --force --name "Pixel_3a_API_29" --package "system-images;android-29;google_apis;x86_64"

      - run:
          name: start AVD
          command: emulator @Pixel_3a_API_29 -no-window -no-audio
          background: true

      - run:
          name: wait for emulator
          command: adb wait-for-device shell 'while [[ -z $(getprop dev.bootcomplete) ]]; do sleep 1; done;'

Your emulator is now up and running on CCI, here is the link for the complete configuration of CircleCI

If you have questions, let us know in the comments and we are looking forward for your feedback 🍻

React native end to end testing on CircleCI

Jeevan Kishore — Thu, 24 Sep 2020 14:30:10 +0000

Setup Detox

There is an ⚡ article dedicated to how to setup detox and it's know how's.

With Detox now being set, we would like it to run when ever there is a push to a branch. Let's say master.

For that, all we have to do is hook up our repo to CircleCI and 📝 write some bit of configuration to get it started.

CircleCI configuration

version: 2.1

commands:

  node-version:
    description: "Install node version 12"
    steps:
      - run:
          name: 'Install Project Node'
          command: |
            set +x
            source ~/.bashrc

            curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
            export NVM_DIR="$HOME/.nvm"
            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"


            nvm install 12.13.0
            NODE_DIR=$(dirname $(which node))
            echo "export PATH=$NODE_DIR:\$PATH" >> $BASH_ENV

  npm-dependencies:
    description: "Get JavaScript dependencies"
    steps:
      - run:
          name: Executing node version check
          command: node -v
      - restore_cache:
          name: Restore npm cache
          key: v1-npm-{{ checksum "./package-lock.json" }}-{{ arch }}
      - run:
          working_directory: .
          name: Installing JavaScript dependencies
          command: npm install
      - save_cache:
          name: Save npm cache
          key: v1-npm-{{ checksum "./package-lock.json" }}-{{ arch }}
          paths:
            - ././node_modules

  bundle-dependencies:
    description: "Get bundle dependencies"
    steps:
      - restore_cache:
          name: Restore Fastlane cache
          key: v1-gems-{{ checksum "Gemfile.lock" }}-{{ arch }}
      - run:
          working_directory: .
          name: Download Fastlane dependencies
          command: bundle install --path ./vendor/bundle
      - save_cache:
          name: Save Fastlane cache
          key: v1-gems-{{ checksum "Gemfile.lock" }}-{{ arch }}
          paths:
            - ./vendor/bundle

  pods-dependencies:
    description: "Get cocoapods dependencies"
    steps:
      - restore_cache:
          name: Restore cocoapods specs and pods
          key: v1-cocoapods-{{ checksum "./ios/Podfile.lock" }}-{{ arch }}
      - run:
          name: Getting cocoapods dependencies
          working_directory: ./ios
          command: bundle exec pod install --deployment
      - save_cache:
          name: Save cocoapods specs and pods cache
          key: v1-cocoapods-{{ checksum "./ios/Podfile.lock" }}-{{ arch }}
          paths:
            - ./ios/Pods
            - ~/.cocoapods

  gradle-dependencies:
    description: "Get Gradle dependencies"
    steps:
      - run:
          working_directory: ./android
          name: Chmod permissions
          command: sudo chmod +x ./gradlew
      - restore_cache:
          name: Restore Gradle cache
          key: v1-gradle-{{ checksum "./android/build.gradle" }}-{{ checksum  "./android/app/build.gradle" }}-{{ arch }}
      - run:
          working_directory: ./android
          name: Download Gradle dependencies
          command: ./gradlew dependencies
      - save_cache:
          name: Save Gradle cache
          paths:
            - ~/.gradle
          key: v1-gradle-{{ checksum "./android/build.gradle" }}-{{ checksum  "./android/app/build.gradle" }}-{{ arch }}

  android-sdk-dependencies:
    description: "Install and set android SDK"
    steps:
      - run:
          name: set ANDROID_SDK_ROOT
          command: |
            echo 'export ANDROID_SDK_ROOT=$HOME/android-tools'  >> $BASH_ENV

      - restore_cache:
          key: android=tools-v1-{{ checksum "scripts/install-android-tools.sh" }}-{{ arch }}

      - run:
          name: install android tools
          command: |
            sh scripts/install-android-tools.sh
            echo 'export PATH=$ANDROID_SDK_ROOT/tools/bin:$PATH'  >> $BASH_ENV
            echo 'export PATH=$ANDROID_SDK_ROOT/tools:$PATH'  >> $BASH_ENV
            echo 'export PATH=$ANDROID_SDK_ROOT/platform-tools:$PATH'  >> $BASH_ENV
            echo 'export PATH=$ANDROID_SDK_ROOT/emulator:$PATH'  >> $BASH_ENV
            source $BASH_ENV
            sdkmanager --list

      - save_cache:
          key: android=tools-v1-{{ checksum "scripts/install-android-tools.sh" }}-{{ arch }}
          paths:
            - /Users/distiller/android-tools


  react-native-dependencies:
    description: "Install RN dependencies"
    steps:
      - run:
          name: "Install watchman"
          command: |
            HOMEBREW_NO_AUTO_UPDATE=1 brew install watchman


  simulator-dependencies:
    description: "Install iOS simulator dependencies"
    steps:
      - run:
          name: "Install applesimutils"
          command: |
            HOMEBREW_NO_AUTO_UPDATE=1 brew tap wix/brew
            HOMEBREW_NO_AUTO_UPDATE=1 brew install applesimutils

  create-launch-android-emulator:
    description: "create and launch android emulators"
    steps:
      - run:
          name: create AVD
          command: echo "no" | avdmanager --verbose create avd --force --name "Pixel_3a_API_29" --package "system-images;android-29;google_apis;x86_64"

      - run:
          name: start AVD
          command: emulator @Pixel_3a_API_29 -no-window -no-audio
          background: true

      - run:
          name: wait for emulator
          command: adb wait-for-device shell 'while [[ -z $(getprop dev.bootcomplete) ]]; do sleep 1; done;'

  clear-detox-cache:
    description: "Clears detox framework cache"
    steps:
      - run:
          working_directory: .
          name: Clear detox cache
          command: |
            npx detox clean-framework-cache
            npx detox build-framework-cache


jobs:

  android-test:
    macos:
      xcode: 11.3.1
    steps:
      - attach_workspace:
          at: .
      - checkout
      - node-version
      - bundle-dependencies
      - npm-dependencies
      - react-native-dependencies
      - gradle-dependencies
      - android-sdk-dependencies
      - create-launch-android-emulator
      - clear-detox-cache

      - run:
          working_directory: .
          name: Run android detox build
          command: npx detox build -c android.emu.release

      - run:
          working_directory: .
          name: Run android detox test
          command: npx detox test -c android.emu.release --headless --record-logs all

      - store_artifacts:
          path: ././artifacts
          destination: ./jest-logs

      - store_artifacts:
          path: ././reports
          destination: ./reports


  ios-test:
    macos:
      xcode: 11.3.1
    steps:
      - attach_workspace:
          at: .
      - checkout
      - node-version
      - bundle-dependencies
      - npm-dependencies
      - pods-dependencies
      - react-native-dependencies
      - simulator-dependencies
      - clear-detox-cache

      - run:
          working_directory: .
          name: Run iOS detox build
          command: npx detox build -c ios.sim.release

      - run:
          working_directory: .
          name: Run iOS detox test
          command: npx detox test -c ios.sim.release --record-logs all > test-summary.txt

      - store_artifacts:
          path: ././artifacts
          destination: ./jest-logs

      - store_artifacts:
          path: ././reports
          destination: ./reports


workflows:
  version: 2

  run_detox_tests:
    jobs:
      - android-test
      - ios-test

Let's walk through some commands to get better context on what's happening:

      - attach_workspace:
          at: .

Attach the workspace to the current directory

   - checkout

Pull the repo and checkout to the current branch

      - node-version

Install node package and check for adequate versions

      - bundle-dependencies

Install and cache gem bundle dependencies such as cocoapods

      - npm-dependencies

Install and cache npm depdendencies

      - pods-dependencies

Install and cache cocoapods dependencies

      - react-native-dependencies

Install and cache RN dependencies

      - simulator-dependencies

Install simulator dependencies (android)

      - clear-detox-cache

Clear existing cache of detox for every boot

Please visit the repo for a working demo

If you have questions, let us know in the comments and we are looking forward for your feedback 🍻

Memory leak by anonymous functions

Jeevan Kishore — Sat, 30 May 2020 21:40:21 +0000

With introduction of fat arrow functions ➕ the implicit bind magic, JS developers found an everlasting 💛 towards them.

Although they were eye pleasing and a delight, they bought with a variety of concerns if not implemented wisely.

One such case i found myself having numerous conversations with my peers about; is having anonymous functions to handle the events which developers find easy to use and miss the subtle ugly memory leak they cause.

P.S This article won't be dwelling to the 🐘 depths of memory leak identification and resolutions but to emphasis on the fact that taking the easy route in this case will end up hitting the hardest.

✨ Theory

An anonymous function might not be cleared by GC (garbage collection) efficiently during a mark and sweep phase as the references to it cannot be determined hence GC fails to recover back the allocated memory

✨ Lab setup

Production react build running on chrome
Run about 10k state changes on each scenario of with and without anonymous implementation to trigger re-renders

Preview

✨ Analysis

That being said, let's jump on to the crux and look at some stats;

Recording a snapshot of each implementation clearly depicts a memory leak with the anonymous function implementation

Snapshot without anonymous functions

🔸 fig (i)

Snapshot with anonymous functions

🔸 fig (ii)

As we compare fig (i) with fig (ii) it's clear that the memory allocation has been freed up by GC in fig (i) as opposed to that of fig(ii)

The exaggerated example intends to portrays the memory leak with the approach; which holds true for apps of multiple complexities in the real world

✨ Conclusion =>

Anonymous fat arrow functions within render methods pave way for a memory leak and ipso facto an anti-pattern

✨ Show me the code

Jeevan-Kishore / space-complexity

A project to demonstrate space complexity over time

If you have questions, let us know in the comments and we are looking forward for your feedback 🍻

Build pagination with ES6 async generators and iterables

Jeevan Kishore — Thu, 07 May 2020 04:20:17 +0000

What the 🐠 is a generator?

Well, according to the definition :

Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.

Fancy, what does this bring to the table? 💭

argh, definition again.. 💤

Generators in JavaScript -- especially when combined with Promises -- are a very powerful tool for asynchronous programming

A real world scenario?

After all that definition reading, let's jump into the core of it. :octocat:

We had an interesting problem on our hands to tackle. It was to enable pagination to one of our mobile app's on swipe right.

So we use generators for it?

There are other possible solutions, generators are just a cleaner solution.

How to do it?

Create a generator

const asyncGetContent = async function* (){
  const limit = 10; /* content per page */
  let offset = 0; /* index of item to start from */
  let totalCount = -1; /* -1 signifies failure */
  while (offset === 0 || offset < totalCount) {
    try {
      const response = await (await fetch(<<url>>)).json();
      offset = offset + limit;
      totalCount = response["total-count"];
      console.log(`offset + totalCount`, offset, totalCount);
      yield response;
    } catch (e) {
      console.warn(`exception during fetch`, e);
      yield {
        done: true,
        value: "error"
      };
    }
  }

}

That's a lot to understand, let's go through each line.

⛄ we've limit which defines a variable to set the limit on the results of your choice [need not be a constant]

⛄ prepare a fetch/ axios/ some API call, shoot it with an await such that we will resolve the resulting promise.

⛄ yield the response. The return will be a promise to be consumed by the async caller using .next()(we'll get to that in the next section)

⛄ let's just handle fetch

How do i use this?

All that's left to do is to initiate and call it within an async function as such:

const contentGen = await asyncGetContent(); /* initate the generator */

after initiation, we can call wherever required (ex: right swipe / click of a button) to yield the result

const content = await contentGen.next();

use content [the response from the api in this case] as necessary

If you have questions, let us know in the comments and we are looking forward for your feedback 🍻

End to End Testing with Detox on React-Native

Jeevan Kishore — Sun, 03 May 2020 19:33:16 +0000

Assumptions

Before we begin, this article assumes RN (expo or otherwise) is set up on your terminal and your app is up and running.

If not please see how to do that.

We will be proceeding with a setup built using React Native CLI.

Please ensure the builds are working before integration to make it easier later on to debug if need be.

There might be requirements such as specific ndk versions to be installed

P.S Either will do.

Our app is called rndetox (it's weird. I know.)

There have been breaking changes implemented with detox v18,

Migration

The demo source code is updated for the same in this repo

Why Detox?

What does detox offer over others? I'll let their own page talk about it

🔰 Phase 1 - Setting up detox

By this time, your RN app should be up and running on a mac machine. Let's proceed setting up Detox.

Installing packages:

Install the following packages using your terminal,

   xcode-select --install
   brew update && brew install node
   brew tap wix/brew
   brew install applesimutils
   npm install -g detox-cli
   npm install detox --save-dev

If jest is not already installed in your project,

       npm install jest --save-dev

Use this command for detox to generate a jest scaffolding,

      detox init -r jest

It will create a bunch of files under e2e directory with preset configurations.

Add detox configuration:

The following configuration needs to be added in package.json of the project,

📃 package.json

  "detox": {
    "configurations": {
      "android.emu.debug": {
        "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
        "build": "cd android && ./gradlew app:assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
        "type": "android.emulator",
        "device": {
          "avdName": "detoxTestEmulator"
        }
      },
      "android.emu.release": {
        "binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
        "build": "cd android && ./gradlew app:assembleRelease assembleAndroidTest -DtestBuildType=release && cd ..",
        "type": "android.emulator",
        "device": {
          "avdName": "detoxTestEmulator"
        }
      },
      "ios.sim.release": {
        "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/rndetox",
        "build": "export RCT_NO_LAUNCH_PACKAGER=true && xcodebuild -workspace ios/a.xcworkspace -scheme a -configuration Release -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "device": {
          "type": "iPhone 11 Pro"
        }
      },
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/rndetox",
        "build": "xcodebuild -workspace ios/a.xcworkspace  -scheme a -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "device": {
          "type": "iPhone 11 Pro"
        }
      }
    },
    "test-runner": "jest"
  }

What's happening through the configuration? 😅

Let's walk through.

android

      "android.emu.release": {
        "binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
        "build": "cd android && ./gradlew app:assembleRelease assembleAndroidTest -DtestBuildType=release && cd ..",
        "type": "android.emulator",
        "device": {
          "avdName": "detoxTestEmulator"
        }
      }

The android release configuration consists of :

holds path to the built apk to test
build commands with build type
type and name of the emulator (this name should be the same as the emulator which should be created using android studio)

Note: On how to create emulators, here is a doc which details it.

ios

       "ios.sim.release": {
        "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/rndetox",
        "build": "export RCT_NO_LAUNCH_PACKAGER=true && xcodebuild -workspace ios/a.xcworkspace -scheme a -configuration Release -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "device": {
          "type": "iPhone 11 Pro"
        }
      }

The android release configuration consists of :

path to built binary (rndetox is the name of our app hence it's rndetox, it would be [app_name].app)
build commands with scheme and path to workspace as per the name of the app (ios/[app_name].xcworkspace)
type and device the tests are to run on

With the detox configuration in place, iOS is all set to be worked with. 🎉

Android on the other hand, well.. " Needs a lot more work. " ⛄

Setup detox with android:

📃 android/app/build.gradle

Add the following lines to default section

       testBuildType System.getProperty('testBuildType', 'debug')  // This will later be used to control the test apk build type for detox
       testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'

Add the following lines to dependencies section

       androidTestImplementation('com.wix:detox:+') { transitive = true }
       androidTestImplementation 'junit:junit:4.12'

📃 android/app/src/androidTest/java/com/rndetox/DetoxTest.java

   package com.rndetox; /* change to app package name */

   import com.wix.detox.Detox;

   import org.junit.Rule;
   import org.junit.Test;
   import org.junit.runner.RunWith;

   import androidx.test.ext.junit.runners.AndroidJUnit4;
   import androidx.test.filters.LargeTest;
   import androidx.test.rule.ActivityTestRule;

   @RunWith(AndroidJUnit4.class)
   @LargeTest
   public class DetoxTest {

       @Rule
       public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);

       @Test
       public void runDetoxTests() {
           Detox.runTests(mActivityRule);
       }
   }

The above file should be created as per the hierarchical order android/app/src/androidTest/java/com/[app_name]/DetoxTest.java

📃 android/app/src/main/AndroidManifest.xml

The snippet should be added to the <application tag, this is required for detox to perform as expected (what is this?)

    android:usesCleartextTraffic="true"

📃 android/build.gradle

Change minSdkVersion to 18 or higher, add kotlinVersion if it's not already present under ext.

It should look similar to this,

    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 18
        compileSdkVersion = 28
        targetSdkVersion = 28
        kotlinVersion = "1.3.61"
    }

Add classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion" under dependencies

    dependencies {
           // ...
           classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
       }

Add the following maven snippet under repositories

   allprojects {
       repositories {
                // ... statements
           maven {
               // All of Detox' artifacts are provided via the npm module
               url "$rootDir/../node_modules/detox/Detox-android"
           }
       }
   }

With the above steps done, android is all set to go. 🎉

⚠️ To verify if this are going good, cross check with this commit which shows the required file changes. ⚠️

🔰 Phase 2 - Write a test

To see if things fall in place, let's add a test id and assert it.

📃 App.js

     <Text  testID="desc-text" style={styles.sectionDescription}>

📃 e2e/firstTest.spec.js

   describe('Example', () => {
     beforeEach(async () => {
       await device.reloadReactNative();
     });

     it('should have description text on welcome screen', async () => {
       await expect(element(by.id('desc-text'))).toBeVisible();
     });

   });

🔰 Phase 3 - Build

Build a release

iOS:

    npx detox build -c ios.sim.release -l verbose

If there are build errors, build on xcode to get details on the same

Android:

    npx detox build -c android.emu.release -l verbose

If there are build errors, build on android studio to get details on the same

🔰 Phase 4 - Test

Test a release

iOS:

    npx detox test -c ios.sim.release -l verbose

Android:

    npx detox test -c android.emu.release -l verbose

Your tests should be passing with flying colors 🌈

🔰 Phase 5 - Setting up automation

Where is the fun without automating the entire workflow;

It's an 🐘 on it's own, will try to address them individually.

Integration with CircleCI
Integration with TravisCI

Check out the github repo for the entire codebase 🔥

If you have questions, let us know in the comments and we are looking forward for your feedback 🍻

React navigation v5

Jeevan Kishore — Sun, 26 Apr 2020 20:26:57 +0000

With the launch of react native v5 about 3 months ago backed by neat documentation making life easier with hooks usage and native transitions, we decided to revamp our current navigation.

Problem:

Build a navigation system for a an app serving to showcase news content such as collections and stories with configurable paywall to facilitate pay per article / premium content across devices

Design

Main screen consists of bottom tab navigation of about 4 tabs
Listing screens to showcase categories / sections
Content screens to display content

Architecture:

App.js

The root of your application needs to be enclosed within a navigation controller, the children of which would be the stack of screens. This will helps us separate concerns b/w auth flows such as login stack and other flows in our case

import { NavigationContainer, useLinking } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { enableScreens } from "react-native-screens";

enableScreens();
const [initialState, setInitialState] = useState();

     <NavigationContainer initialState={initialState} ref={ref}>
         <Stack.Navigator
           screenOptions={{
             headerShown: false
           }}
           initialRouteName="modalStack"
         >
           <Stack.Screen name="modalStack" component={ModalStack} />
           <Stack.Screen name="loginStack" component={LoginStack} />
         </Stack.Navigator>
       </NavigationContainer>

modal-stack.js

The stack is composed of multiple screens which relate in terms of genre in our case.

The noticeable aspect is that the stacks are nested, BottomTabStack is nested within the modal stack and that will be the initial route where our app should land post launch

import React from "react";
import { BottomTabStack } from "../bottom-tab-navigators/bottom-tab-stack";

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { SCREEN_LIST, STACK_LIST } from "../../constants/screen-mapping";

/* Import screen components such as AuthorsScreen, StoryScreen ... */

const Stack = createNativeStackNavigator();

export const ModalStack = () => (
  <Stack.Navigator
    screenOptions={{
      headerShown: false
    }}
    initialRouteName={STACK_LIST.bottomTabStack}
  >
    <Stack.Screen name={SCREEN_LIST.authorScreen} component={AuthorsScreen} />
    <Stack.Screen name={SCREEN_LIST.storyScreen} component={StoryScreen} />
    <Stack.Screen name={SCREEN_LIST.bookMarkScreen} component={BookMarkScreen} />
    <Stack.Screen name={STACK_LIST.bottomTabStack} component={BottomTabStack} />
  </Stack.Navigator>
);

bottom-tab-stack.js


import React from "react";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

/* Import necessary constants and components.. */

const Tab = createBottomTabNavigator();

const tabBarStyle = {
  activeTintColor: "blue",
  style: {
    paddingTop: 5
  }
};

const TabIcons = (focused, icon) => {
  const iconColor = focused ? "blue" : "black"; /* highlight with a diff color if focused */

  switch (icon) {
    case "home":
      return <HomeIcon color={iconColor} />;
    case "sections":
      return <SectionIcon color={iconColor} />;
    case "search":
      return <SearchIcon color={iconColor} />;
    case "my-app":
      return <MyAppIcon color={iconColor} />;
    default:
      break;
  }
};

export const BottomTabStack = () => (
  <Tab.Navigator tabBarOptions={tabBarStyle}>
    <Tab.Screen
      name={BOTTOM_TAB.bottomHomeTab}
      component={HomeScreen}
      options={{
        tabBarIcon: ({ focused }) => TabIcons(focused, "home"),
        title: "Home",
        tabBarTestID: "test-id-home" /* test id's for use by automation test tools */
      }}
    />
    <Tab.Screen
      name={BOTTOM_TAB.bottomCategoryTab}
      component={CategoryScreen}
      options={{
        tabBarIcon: ({ focused }) => TabIcons(focused, "sections"),
        title: "Sections",
        /* Unique identifier to target category tab */
        tabBarTestID: "test-id-categ"
      }}
    />
    <Tab.Screen
      name={BOTTOM_TAB.bottomSearchTab}
      component={SearchScreen}
      options={{
        tabBarIcon: ({ focused }) => TabIcons(focused, "search"),
        title: "Search",
        tabBarTestID: "test-id-search"
      }}
    />
    <Tab.Screen
      name={BOTTOM_TAB.bottomProfileTab}
      component={ProfileScreen}
      options={{
        tabBarIcon: ({ focused }) => TabIcons(focused, "my-app"),
        title: "My App",
        tabBarTestID: "test-id-profile"
      }}
    />
  </Tab.Navigator>
);

login-stack.js

This stack abstracts the auth-flow.


import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

/* Import screen components such as Login, SignUp ... */

const Stack = createNativeStackNavigator();

export const LoginStack = () => (
  <Stack.Navigator
    screenOptions={{
      headerShown: false
    }}
  >
    <Stack.Screen name={SCREEN_LIST.loginScreen} component={Login} />
    <Stack.Screen name={SCREEN_LIST.registrationScreen} component={SignUp} />
    <Stack.Screen name={SCREEN_LIST.forgotPasswordScreen} component={ForgotPassword} />
  </Stack.Navigator>
);

With that being set, we can begin surfing 🏄 through the screens

If we are navigating within a stack:

navigation.navigate("<<screen_name>>", {<<key>>: <<val>>});

If we do need to navigate across stacks:

navigation.navigate("<<stack_name>>", {  
                     screen: <<screen_name>>,
                     params: {<<param_key>> : <<param_val>>}
                   });

There are a lot of ground to cover with react-navigation such as events, lifecycles and much more ..

Will be dropping in a github repo link for an example soon 🔥

If you have questions, let us know in the comments and we are looking forward for your feedback 🍻