Use the Force and automate React app checks

$ whoami

Senior Software Engineer

The most important:

I like JavaScript, React, movies, music and I'm a big fan of LOTR and Star Wars 🤓

May the Force be with you!

6 years at GlobalLogic

about 8 years in Web Development

Speaker and mentor at GL JS community

Speaker and part of the program committee at Fwdays conference

GitHub page

Inna Ivashchuk

Motivation

Development process

devs

changes

existing features are broken

changes

broken styles

changes

Worst scenario

devs

changes

lovely feature doesn't work

users

changes

But what, if we can catch them earlier?

Code style and quality (linter, prettier)

Code style

vs.

double quotes

spaces

tabs

single quotes

...

npm

yarn

Code style guide and code formatter

Define code style guide doc

and the next step is to install, set up and use

What is Prettier? ?

And why?

An opinionated code formatter

Supports many languages

You press save and code is formatted

Integrates with most editors

No need to discuss style in code review

Saves you time and energy

To format and check

npx prettier --write .

To format all files with Prettier:

npx prettier --check .

If CI configured, next command can be in use:

Code analysis tools

deprecated

Would be good to add a new lint command to the scripts in package.json

const nums = [10, 20, 100];

for (let i=0; i < nums.length; i++) {
  console.log(nums[i]);
}

eslint configuration example

{
  "settings":{
    "react":{
      "version":"17.0.2"
    }
  },
  "env":{
    "browser":true,
    "es2021":true,
    "jest":true
  },
  "extends":[
    "plugin:react/recommended",
    "standard"
  ],
  "parserOptions":{
    "ecmaFeatures":{
      "jsx":true
    },
    "ecmaVersion":"latest",
    "sourceType":"module"
  },
  "plugins":[
    "react"
  ],
  "rules":{
    "arrow-parens":[
      "error",
      "as-needed"
    ],
    "comma-dangle":"off",
    "import/no-extraneous-dependencies":[
      "error",
      {
        "devDependencies":[
          "**/*.test.js",
          "**/*.spec.js"
        ]
      }
    ],
    "indent":[
      "error",
      "tab",
      {
        "SwitchCase":1
      }
    ],
    "linebreak-style":0,
    "no-console":[
      "error",
      {
        "allow":[
          "info",
          "warn",
          "error"
        ]
      }
    ],
    "no-tabs":"off",
    "react/prefer-es6-class":0,
    "react/jsx-indent":[
      "error",
      "tab"
    ],
    "react/jsx-indent-props":[
      "error",
      "tab"
    ],
    "react/jsx-filename-extension":[
      1,
      {
        "extensions":[
          ".js"
        ]
      }
    ],
    "react/no-unused-prop-types":[
      2,
      {
        "skipShapeProps":true
      }
    ],
    "react/react-in-jsx-scope":"off",
    "react/forbid-prop-types":[
      0
    ],
    "react/require-extension":"off",
    "semi":[
      2,
      "always"
    ],
    "space-before-function-paren":"off"
  }
}

“Sir, it’s quite possible this app is not entirely stable.”

Be good and write tests

End to End (e2e)

Integration

Unit

A helper robot that behaves like a user to click around the app and verify that it functions correctly

Verify that several units work together in garmony

Verify that individual isolated parts work as expected

Testing Library

Playwright

Recommended Tools by React team

Jest is a JavaScript test runner that lets you access the DOM via jsdom. If you use Create React App, Jest is already included out of the box with useful defaults.
React Testing Library is a set of helpers that let you test React components without relying on their implementation details.

What is left? Just to start writing tests ;)

Time to use the Force and to automate all checks

CI/CD practices - our Force

What is CI/CD?

Continuous Integration

build

checks

dev

artifact

VCS

(static files)

Continuous Delivery/Deployment

artifact

QA/dev stage

production

(static files)

Continuous Integration vs Continuous Delivery vs Continuous Deployment

What about incomplete features?

Use feature flags so that incomplete features do not affect customers in production (Launch Darkly service)

Note: environment variables can be used, but it's a bit more tricky to maintain

Let's proceed with

GitHub Actions as our

CI/CD platform

GitHub Actions makes it easy to automate

GitHub Actions advantages

Built into GitHub

Multiple templates for all kind of CI

Ability to create your own template and publish them as an Action

Completely free for open-source repos

2000 free build minutes per month for private repos

GitHub Actions workflow, as a core concept

A workflow is a configurable automated process that will run one or more jobs. Workflows are defined by a YAML file checked in to your repository and will run when triggered by an event in your repository, or they can be triggered manually, or at a defined schedule.

How to configure a workflow template?

Step 1

On the main page of your repository navigate to Actions.

Step 2

Pick a template you would like to use and click Set up this workflow

Step 3

We can make changes in the editor and commit the action to your repository using the Start commit button

Adding an Action template to the workflow:

We can use an existing Action or even publish our own

A Workflow example to run React app checks

name: run-checks
on:
  push:
    branches: [main]

jobs:
  checks:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16.x]

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm ci

      - name: Run linter
        run: npm run lint

      - name: Run all tests
        run: npm test

And one more useful tool -Husky

Git hooks: Husky

Husky improves your commits and more

You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all Git hooks.

Why I like Husky

Runs checks on every commit locally

Zero dependencies and lightweight

Easy to install

Follows npm and Yarn best practices regarding autoinstall

User-friendly messages

The Workflow and all checks are ready.

It's time for the Demo

The demo is in progress...

Questions time

In the world of web development,
Where React reigns supreme,
CI/CD tools are the key,
To ensure our app is a dream.
*

With checks and builds and tests,
We automate our release,
Deploying with ease and confidence,
Knowing our app won't cease.

React components are checked,
For errors and for flaws,
With every commit and pull request,
Ensuring our code complies with laws.

ChatGPT

Links:

https://slides.com/innai/react-checks

https://github.com/inna-i/r-mosaic

Thank you!

Use the Force and automate React app checks ready

By Inna Ivashchuk

Use the Force and automate React app checks ready

Long story short

Inna Ivashchuk

github.com/inna-i

Use the Force and automate React app checks

$ whoami

Motivation

Development process

Worst scenario

But what, if we can catch them earlier?

Code style and quality (linter, prettier)

Code style

Code style guide and code formatter

What is Prettier? ?

To format and check

Code analysis tools

“Sir, it’s quite possible this app is not entirely stable.”

Be good and write tests

Recommended Tools by React team

What is left? Just to start writing tests ;)

Time to use the Force and to automate all checks

CI/CD practices - our Force

What is CI/CD?

Continuous Integration

Continuous Delivery/Deployment

Continuous Integration vs Continuous Delivery vs Continuous Deployment

What about incomplete features?

Let's proceed with

GitHub Actions as our

CI/CD platform

GitHub Actions makes it easy to automate

GitHub Actions advantages

GitHub Actions workflow, as a core concept

How to configure a workflow template?

Step 1

Step 2

Step 3

Adding an Action template to the workflow:

A Workflow example to run React app checks

And one more useful tool -Husky

Git hooks: Husky

Husky improves your commits and more

Why I like Husky

The Workflow and all checks are ready.

It's time for the Demo

Questions time

ChatGPT

Links:

Thank you!

Use the Force and automate React app checks ready

More from Inna Ivashchuk