DEV Community: Amit Chauhan

Streamlining React Native Build Sharing and Branching Strategy: Overcoming Common Challenges

Amit Chauhan — Sun, 23 Jan 2022 11:58:59 +0000

Introduction:
Transitioning from a React web-based project to a React Native project brought forth new challenges for our team. In this blog, we will discuss three major obstacles we encountered regarding build sharing with QA engineers and implementing an efficient branching strategy. Fortunately, we found effective solutions using React Native build-sharing and branching strategies. Let's delve into these problems one by one and explore how we overcame them.
Problem 1: Build Sharing with QA Engineers
Sharing builds (APK or IPA) with QA engineers proved to be a significant challenge in mobile app development. Frequent build sharing for minor bug fixes or changes became suboptimal as the team grew. However, we discovered a solution: Over-The-Air (OTA) updates through CodePush. CodePush allowed us to provide updates without creating new builds.
To integrate CodePush in React Native, refer to GitHub Repository - React Native CodePush
To simplify the process of delivering CodePush updates, we set up an automated pipeline that triggered CodePush whenever we merged code into the master branch. This streamlined the workflow for everyone involved.
Advantages of this approach:
No need to download updates larger than 50 MB.
Reduced build time.

Problem 2: Feature Delivery and Reverting
As our team expanded and the demand for delivering new features increased, we faced challenges when it came to removing already merged features and reverting changes through source control (Git). This process often required additional regression testing, resulting in delays in app shipment.
Once again, CodePush came to the rescue. We established ten CodePush environments and created a manual pipeline to deploy branches to any of these environments. We modified our merging process to include testing by a dedicated test engineer before merging into the master branch. The test engineer would run the pipeline for feature branches in their designated environment, thoroughly test the feature, and provide sign-off. Only after sign-off was obtained, the feature would be merged into the master branch.
Implementation steps:
Create ten CodePush environments and obtain the corresponding CodePush keys.
Implement a menu option for test builds only.
Include an environment selection option.
Store the selected environment in async storage.
Restart the app and use the stored environment key to download CodePush updates.

Sample code for environment selector:

<FlatList
    data={[
        {
            value: '',
            label: 'Default',
        },
        ...environments,
    ]}
    renderItem={({ item }) => {
        const isChecked = environment === item.value;
        return (
            <TouchableOpacity
                onPress={async () => {
                    await AsyncStorage.setItem("SELECTED_ENV", environment);
                    CodePush.restartApp();
                }}
                style={{ padding: 10, flexDirection: 'row' }}>
                <Checkbox
                    variant={antDesign}
                    checked={isChecked}
                    label={item.label}
                />
            </TouchableOpacity>
        );
    }}
/>

By adopting this approach, we achieved the following benefits:
Test engineers gained full control over when to test a feature.
No need to revert buggy features.
Timely app releases.

Problem 3: Coordinating Multiple Testers
With the team growing larger, coordinating the testing of the same feature by multiple testers became a challenge. The previous approach of deploying a new branch to the same environment would override the previous update. To address this, we introduced squad-wise builds.
What is a squad-wise build?
A squad refers to a small group of individuals working on a specific mini-project within the app. Each squad was assigned dedicated environments, and we created separate branches for each squad along with an automated pipeline for deploying CodePush updates when merging changes to these squad branches. However, we didn't want to burden developers with the task of merging their code into the squad branch and creating pull requests against the master branch. To simplify this process, we developed a simple shell script and added it to our package.json.
What does the shell script do?
Pushes the feature branch to the remote repository.
Switches to the squad branch.
Merges the feature branch into the squad branch.
Pushes the squad branch to the remote repository.
Switches back to the feature branch.

Shell script:

#!/bin/sh
branch_name=$(git symbolic-ref -q HEAD)
branch_name=${branch_name##refs/heads/}
git branch --set-upstream-to origin/$branch_name
git push origin $branch_name
git checkout squad-branch
git fetch
git reset --hard origin/squad-branch
git merge $branch_name 
git branch --set-upstream-to origin/squad-branch
git push origin squad-branch
git checkout $branch_name

Developers need to use the npm push:squad command instead of the regular git push, and the script will handle the rest.
With this approach, we addressed problem 3 and enjoyed the following advantages:
Automated pipelines eliminated the need for test engineers to manually run the pipeline.
Multiple testers could independently test all features of their assigned squad using dedicated environments.
Testing could be conducted before merging code.
Developers were relieved of the burden of merging with two branches, thanks to the simplified push script.

Conclusion: By leveraging React Native build sharing and implementing an effective branching strategy, we overcame common challenges encountered during our transition from a React web-based project to a React Native project. We successfully addressed issues related to build sharing with QA engineers, feature delivery, reverting changes, and coordinating multiple testers. These solutions not only streamlined our development process but also improved collaboration and ensured timely app releases.

Beautiful css placeholder loading animation using css

Amit Chauhan — Sat, 08 Feb 2020 00:00:00 +0000

Do you want to create animated placeholder instead of creating full page loader? This post is for you!

We will create placeholder animation with css and it's really easy.

This placeholder animation works with most of elements.

First we need to create css keyframe animation.

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 1000px 0;
  }
}

I will explain what is happening here later.

Now let's create loading class.

.loading {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(
    90deg,
    #e4e4e4 0%,
    #f1f1f1 40%,
    #ededed 60%,
    #e4e4e4 100%
  );
  background-position: 0px 0px;
  background-repeat: repeat;
  animation: animatedBackground 5s linear infinite;
}

Now let's understand what is there in loading class.

height and width are size of our placeholder.
We have gradient background to our place holder which has four shades gray colors at 0%, 40%, 60%, 100%. Important part here is first and last color should be same so that animation doesn't look broken.
we have set default position at 0px 0px and it's repeating background.

Now we will use our keyframe animation which is changing background position from 0px 0px to 1000px 0px

So our linear gradient background moves horizontally and we can see beautiful animated placeholder.

We can add this animation to circle element which are using border-radius.

Even you can play around use different background-gradient to make different kind of animations.

For example we can create rainbow animation like this.

.rainbow {
  width: 500px;
  height: 100px;
  margin: 15px;
  background-image: linear-gradient(
    90deg,
    red 0%,
    orange 7%,
    yellow 21%,
    green 35%,
    blue 49%,
    indigo 63%,
    violet 77%,
    red 91%
  );
  background-position: 0px 0px;
  background-repeat: repeat;
  animation: animatedBackground 5s linear infinite;
}

So when next time you are asked to create placeholder animation don't panic it's really simple!

Here are reference of codepen.

Codepend:

Syntax Highlighting with Prismjs and React

Amit Chauhan — Thu, 23 Jan 2020 14:27:44 +0000

In this blog post, I will explain a really easy way to add syntax highlighting in your page where you want to show code the same https://reactjs.org or any site which shows code with syntax highlighting.

We will use https://prismjs.com/ library for highlighting syntax.

Let's start by creating our react component to show code.

import React, { useEffect } from "react";

export default function Code({ code, language }) {
  return (
    <div className="Code">
      <pre>
        <code>{code}</code>
      </pre>
    </div>
  );
}

This component will display your code but without any syntax highlighting.

Now let's add prismjs using npm or yarn.

npm install --save prismjs

yarn add prismjs

Now we can use this in our component

import React, { useEffect } from "react";
import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css";
import "./styles.css";

export default function Code({ code, language }) {
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  return (
    <div className="Code">
      <pre>
        <code className={`language-${language}`}>{code}</code>
      </pre>
    </div>
  );
}

Now just pass any code and language to this component and boom we have added syntax highlighting in any react app!!

There are also different themes available in prismjs which can be used by just importing different CSS file.

In this example I have used tomorrow-night theme, you can use any theme.

Codesandbox demo: https://codesandbox.io/s/syntax-highlighting-with-prismjs-36ud2

Follow my blog: https://amitchauhan.tech

Safely access nested object with ES6 Destructuring

Amit Chauhan — Mon, 13 Jan 2020 16:34:57 +0000

How can we use ES6 Destructuring to access values from nested object or array without using safeguards with && operators?

Let's start with a basic example of destructuring. This is how we can destructure values from the object and assign them to variables.
We can also rename variables to a different name and give default value ie. if an object doesn't have that key(this is important for our topic)

  const data = {
    id: '123',
    value: 'someValue'
  };

  // access id and value from data with destructuring 
  const { id , value } = data;

Now let's try to access the nested object.

  const data = {
    user: {
      id: 1,
      name: {
        first: 'Amit',
        last: 'Chauhan'
      }
    }
  };

If we want to safely read firstName from this data this is how we would write without destructuring

  const firstName = data && data.user && data.user.name && data.user.name.first;

Let's do it with destructuring.

  const {
    user: {
      name: {
        first: firstName // rename variable to firstName
      } = {} // this part is where we give default value to empty object so code doesn't break
    } = {} 
  } = data;
  console.log(firstName); // Amit

We can use destructuring to access an array as well.

  const dataArray = [{
    name: {
      first: 'Amit'
    }
  }];

  const [{
    name: {
      first: firstName
    } = {}
  } = {}] = dataArray;
  console.log(firstName); // Amit

Bonus tip

We can use destructuring to swap variables.

let a = 10;
let b = 20;

[a, b] = [b, a];
console.log({ a, b }); // { a: 20, b: 10 }