DEV Community: Daniil Sitdikov

Frontend Performance Glossary: The 11 Most Common Metrics

Daniil Sitdikov — Tue, 24 Oct 2023 10:02:22 +0000

This glossary contains a list of the most common metrics which may appear in articles, DevTools, Lighthouse, and other various tools for working with web performance. Everything is sorted in the alphabetical order.

The factual data is primarily sourced from MDN, web.dev and w3c, however the short description has been rewritten and enhanced.

CLS

Cumulative Layout Shift

Measurement Unit: Score (lower is better)

Shows how often users experience unexpected changes in the layout. It measures the instability of elements and their overall impact. For example, the banner element changes its height during the loading process, which causes a shift in the elements below.

more details

DCL

DOMContentLoaded

Measurement Unit: Milliseconds (ms)

Refers to the moment in a webpage's loading process when the DOM is completely parsed. And all deferred scripts have downloaded and executed. It doesn't wait for resources.

more details

FCP

First Contentful Paint

Measurement Unit: Milliseconds (ms)

Measures the time it takes for first bit of any actual content on a page to become visible on the screen. This includes text, images, background images, SVG elements, and non-white canvas elements.

more details

FID

First Input Delay

Measurement Unit: Milliseconds (ms)

Measures the time it takes for the browser to respond to a user's first interaction. This interaction can include clicks, hovers, touches, and other user events.

more details

FP

First Paint

Measurement Unit: Milliseconds (ms)

Marks the first time the browser renders anything visually different from the default background color of the body.

INP

Interaction to Next Paint

Measurement Unit: Milliseconds (ms)

Measures the time it takes for the browser to paint the next frame after a user interaction.

more details

L

On Load

Measurement Unit: Milliseconds (ms)

Measures the time when the entire page and its resources are fully loaded. It includes all dependent resources: stylesheets, scripts, iframes, and images.

more details

LCP

Largest Contentful Paint

Measurement Unit: Milliseconds (ms)

Measures the time when the largest content block is rendered in the user viewport. The content may include images, background images, SVG, video, and text.

more details

SI

Speed Index

Measurement Unit: Score (lower is better)

Measures how swiftly the contents of a page are visually populated. Technically, in a graph, it is represented by the area above the curve, which will approach 0 as the page loads faster.

more details

TBT

Total Blocking Time

Measurement Unit: Milliseconds (ms)

Measures the time between FCP and TTI when the main thread was blocked for long enough to prevent input responsiveness. More specifically, it's the sum of the blocking time for each long task (>50 ms). For web frameworks, this time is usually consumed by virtual DOM renders and hydration.

more details

TTFB

Time To First Byte

Measurement Unit: Milliseconds (ms)

Measures when the first byte of data from the web server reaches the browser.

more details

TTI

Time to Interactive

Measurement Unit: Milliseconds (ms)

Measures the time when than at least for 5 seconds where weren't long tasks (>50ms) and no more than two in-flight network GET requests.

more details

Frontend Optimization: My Journey to Accelerate Load Times in Heavy Frontend

Daniil Sitdikov — Sun, 08 Oct 2023 16:44:29 +0000

Recently, the business approached us with a complaint that our product loads slowly in regions where old mobile devices and slow internet prevail. As a result, users are opting to switch to our competitors. In this article, I will share how I was able to improve the app's load time by implementing techniques such as import and render on visibility, image proxy, proficient work with SVG images, and other methods. I hope you'll find something useful for your app as well.

Brief Introduction

On our page, we have a lot of components, including a banner, interactive dynamic content in the center, several sliders, and extensive navigation in the header and sidebar. However, this leads to a large number of DOM elements (6500) and a lengthy total blocking time (12 seconds) on mobile devices. Additionally, the fully rendered main page has a total height of 11000 pixels. Even React Profiler in DevTools can’t handle it and crashes.

We use React with Next.js. The majority of the content on the main page is dynamic and interactive, updating in real-time.

Some obvious performance enhancements have already been made:

Caching on the CDN side
Gzip compression
http/2 server
Correctly set loading priorities for resources: defer and async
Images are set to lazy
All internal pages are lazy-loaded by default
The bundle is split into chunks.

Shortcut

First, what I started with and what could quickly solve many problems:
🥁 1..2..3…

just reduce the amount of content on the main page.

create a special main page in pure HTML and vanilla JS for such regions.

However, in my case, I was unable to convince the business, and I had to solve the problem using an engineering approach.

Render on Visibility

The question I asked myself was: why spend so much time and resources rendering something the user doesn't even see? The entire page height is 11000px, but a mobile user typically only sees about 700px upon starting. Therefore, 10300px of content can simply be skipped from rendering. The situation is the same on desktop.

I created a basic component that only renders content when it is about to be visible in the user's viewport. It starts loading the content in advance, with an additional 100px on top, to accommodate slower CPUs. This optimization also applies horizontally. For example, if a slide's content is not within the user's view, it won't be rendered. This approach has proven to be beneficial, especially considering that each slide contains logic and multiple components.

// The component receives two props:
//
// 1. Children - the content which will be hidden
// 2. Classname - a special class with height and skeleton loader to avoid layout 
//                shifts after content appear
function LazyLoadedComponentUI({ children, className }) {
  const intersectionRef = useRef(null);
  // useIntersection is used from the react-use library
  // However, it can be easily implemented manually.
  const intersection = useIntersection(intersectionRef, {
    root: null,
    rootMargin: '100px 0px',
    threshold: [0, 1.0],
  });

  const [isShown, setIsShown] = useState(false);

  useEffect(() => {
    // Content won't be removed after it has been rendered. 
    // However, this behavior can be easily changed.
    if (intersection && intersection.intersectionRatio > 0 && !isShown) {
      setIsShown(true);
    }
  }, [intersection, isShown]);

  return isShown ? children : <div ref={intersectionRef} className={classNames('lazy-rendered-component', className)} />;
}

How it looks:

const FooterNav = () => 'complicated component';

...

// It's important not to forget to include loader styles to avoid layout shifts.
<LazyRenderedComponent className="footer-nav-loader loader">
  <FooterNav />
</LazyRenderedComponent>

My goal was to include only the necessary content for the earliest visuals in the main bundle. This includes what the user sees. Modal windows and collapsing sidebars are downloaded and displayed only when needed.

Sometimes, it wasn’t obvious as it seemed to be. We have a list of 20-30 dynamic items with nested components and logic inside. To prevent layout shifts and maintain smoothness, I implemented lazy rendering specifically for the content of each item on this list. This means that the application reserves empty spaces for a specific item and renders it only when it is near.

Eventually, after applying the lazy load component to many items, we ended up with approximately 700 DOM elements.

Import on Visibility

This allows us to go even further. If we don’t render it outside the viewport, maybe we can even don’t download it? It is possible that the user never scrolls to this content at all. All that remains is to pass the content to our LazyRenderComponent Suspense.

const FooterNav = dynamic(
  () => import('./footer-nav'), 
  { loading: () => <div className="footer-nav-loader loader" /> }
);

...

<LazyRenderedComponent>
  <FooterNav />
</LazyRenderedComponent>

The alternative usage with the plain React:

const FooterNav = lazy(() => import('./footer-nav'));

...

<LazyRenderedComponent>
  <Suspence fallback={<div className="footer-nav-loader loader" />}>
    <FooterNav />
  <Suspence>
</LazyRenderedComponent>

Now, when the viewport is near this component, it will start loading it.

⚠️ As in the previous item, it is very important not to forget about the loading state in order to avoid layout shifts. Here, we pass the fallback property to the Suspense component.

Selective Hydration

During React hydration, React recreates the state it had on the server, essentially re-recreating the virtual DOM. This process can be time-consuming as React needs to parse the current DOM tree. Initially, there may be content in the viewport that should be visible, but it doesn't necessarily need to be interactive right away. To improve performance, I tried deferring hydration by wrapping these components in Suspense, which temporarily delays hydration and keeps them inactive. I initially believed that it completely transformed the game and reduced everything to zero seconds. However, it actually only removed two seconds from TBT.

Image Proxy

In our application, the LCP (Largest Contentful Paint) refers to a banner. Typically, these banners are high-resolution PNG files, with an average size of around 3 MB each. However, the challenge lies in the fact that we have no control over the sizes or file formats uploaded by the operator. Furthermore, imposing restrictions on the operators would not be a favorable design approach.

We agreed to convert, compress and resize images on the fly, during the request. This means that we only need to specify the desired URL.

https://IMG_PROXY_URL/resize:fit::300/quality:75/plain/image.jpg@avif

Our solution was to use image-proxy. It perfectly fit our needs in terms on performance, functionality and scalability.

We use three formats: avif, webp, and jpg/png. The browser automatically loads the best format based on its capabilities. For example, if a browser does not support avif format, it will use webp. If no supported formats are available, the default img tag will be used.

<picture>
  <source srcSet="URL_TO_AVIF" type="image/avif" />
  <source srcSet="URL_TO_WEBP" type="image/webp" />
  <img src="URL_TO_DEFAULT_FALLBACK" />
</picture>

The resize and compression operation is performed only once. Immediately after that, the result of each image request is cached on CDN. This makes sure we don't sacrifice speed.

Now, each image is 120-200 kb instead of 1-2 Mb. They are in the optimal format and have an optimal size based on the device.

Alternative Solutions

If you are using Next.js, perhaps next/images will be sufficient. However, you won’t be flexible enough and you lose an opportunity to reuse this solution in different place other than Next.
There is also a library that Next.js itself uses: sharp. It can be setup as Node.js service. I even played around a little: image-proxy-service
Cloudflare and other services offers its own service for resizing and converting images.

Loading Priority

Since only one image is visible in the main LCP banner, we explicitly set it to loading=eager, and for the other slides, we used loading=lazy. They will load as soon as the user sees them.

Also, for the first slide, I added the attribute fetchPriority="high", which allows the image to be loaded as a priority. As we have up to 100 different request at the first seconds, prioritizing LCP-image was crucial.

SVG Images

We had around 150 SVG icons and several images that we stored directly in React components. This significantly increased the bundle's weight by 60 KB, and their rendering clogged up our thread during the initial paint.

We consolidated all icons into one large SVG sprite and placed it on a CDN. The icons are loaded just once to avoid clogging network connections and to save time on connection establishment. We use the use element to display the required sprite from the entire list.

<svg
  height={size}
  viewBox="0 0 512 512"
  width={size}
>
  <use href={`#${id}`} />
</svg>

<symbol id="icon-1" width="10" height="10" viewBox="0 0 2 2">
  <circle cx="1" cy="1" r="1" />
</symbol>
<symbol id="icon-2" width="10" height="10" viewBox="0 0 2 2">
  <circle cx="1" cy="1" r="1" />
</symbol>
...

Another solution could be to move them to the icons font, although it may not offer the same level of flexibility.

Regarding images, we just relocated them to a CDN as separate files.

DNS Prefetch

Before starting to load a resource from an external URL, the browser spends 20 - 120 ms just on DNS resolving. I marked two <link> tags with the attribute rel="preconnect" so the browser could start the handshake processes in advance: DNS, TCP, and TLS.

<link 
  crossOrigin="anonymous" href="https://fonts.gstatic.com" 
  rel="preconnect" 
/>

Conclusion

Undoubtedly, this was a significant step in performance improvement. Some of the core web vitals on low-end mobile devices:

LCP decreased from 12s to 2.5s.
Number of DOM elements decreased from 6500 to 700.
The lighthouse score was increased from 3 to 52
TBT was decreased from 12s to 5.6s.

These numbers have not yet reached the green zone. It means that there is a lot of work to be done. See you in the second part, where I'll share new results!

Future Plans

Consider replacing the default virtual DOM with an alternative solution. For instance, Million.js
Experiment with service workers.
Remove SSR from components where it causes rehydration and negatively affects performance.

Let's Learn Together

Each of us has our own unique experiences, challenges faced, and solutions discovered. I'd love to hear about your own adventures in frontend optimization. What worked for you? What would you recommend doing? Please share your experiences in the comments below!

How to Transform Vim to a Complete IDE?

Daniil Sitdikov — Tue, 19 Sep 2023 13:32:07 +0000

Introduction

Recently, fate forced me to work on my old personal MacBook from 2015. Over the years of development, I've got used to powerful IDEs, such as IntelliJ IDEA, but my laptop couldn't handle it anymore. Having three projects open simultaneously made their development practically impossible. Everything was very laggy. I also noticed the same problems in VSCode. In frustration, I decided to take a radical approach and try out the classic Vim.

After working in classic Vim for 30 minutes, I realized that this method might be too harsh for me. A lot has to be done through the terminal: finding the necessary files, making edits, running the linter separately. Additionally, to work comfortably, you need to know a lot of commands. But at least there were no lags anymore. Still, in 2023, I'd at least like to see:

Syntax highlighting
Linter and Prettier
Fuzzy search across the entire project and the current file
Tips to speed up the writing process
Visual navigation

So, my choice fell on NeoVim. Essentially, it's a significantly reworked and improved Vim. It retains almost all of its functionality, but at the same time, it adds rich expansion capabilities. One of the key features is the support for the Language Server Protocol, which allows for syntax highlighting, adding linters, and providing suggestions similar to VSCode. All of this has enabled developers to create a large number of plugins, replicating the functionality of the IDEs we are accustomed to these days.

And here's what I got:

It uses only 170-250 MB of RAM!

Ready-made packages

The quickest and easiest way to start is to use a pre-made setup. Here are a few great well-known options to choose from:

Personally, I use LunarVim. It's quick and easy to install, and it has good documentation. There are many more here: https://github.com/topics/neovim-config.

An important note: most likely, the standard terminal won't be enough for full-fledged work. On MacOS, I switched to iTerm.

How to use it?

So, I've downloaded and installed it, what's next?

There's a nuance here. Everything is controlled by keys, and only sometimes by the mouse. Almost any build has a project search, code hints, file explorer, and code hints.

There are numerous plugins available. For instance, this is a Copilot implementation: https://github.com/zbirenbaum/copilot-cmp. Or prettier: https://github.com/MunifTanjim/prettier.nvim. You might need just edit your configuration file.

Cheat sheet

Here's a short list of commands that will help you quickly get the hang of it and start playing around:

Navigation:

Open file explorer on the left: Space + e
Go to the file reference: g + mouse click

Search

All-available menu: :Telescope
Fuzzy search for files: Space + f
Search within the file itself: Space + s + t

What's needed the most

Copy the selected: y
Paste: Ctrl + V
Edit mode: i, default mode: Esc
Save file: :w
Quit: :q

By default, most of nvim packages have WhichKey plugin which shows popup with available commands. For instance, you press space or g and what for a second:

Add more terminals at the bottom

You can attach terminals using:

:ToggleTerm size=8 direction=horizontal

But I personally prefer adding them using native terminal’s functionality. For instance, iTerms can attach several terminal sessions to the current window.

Learning native Vim commands

If you want to become thoroughly familiar with the commands of Vim and remember them forever, there is a browser game that can help you achieve this: https://vim-adventures.com.

And this comprehensive guide: https://github.com/iggredible/Learn-Vim

Git

You can also work conveniently with git from the terminal. For this, you can install LazyGit:

Quick cheat-sheet for the essentials:

Add files to staged changes: just a mouse click on files and folders
Discard changes: d. It can be applied for lines and for files.
Git pull: p
Commit changes: c
Git push: P

Conclusion

I am impressed by how enthusiasts have managed to implement such complex features from modern IDEs inside the terminal using minimal resources. Personally, I find it to be a great choice when you have limited resources on your laptop or when you need to navigate through system files and make edits. It's also a great idea to set it up on a remote server. However, when I switched back to the powerful laptop, I stopped using it as a main IDE. Thank you phil9l for sharing with me such amazing approach and inspiring to write this article!

File-Based Routing in Node.js

Daniil Sitdikov — Thu, 31 Aug 2023 18:45:16 +0000

About a year ago, I tried Next.js for the first time and was so impressed by their file-based routing that I decided to implement a similar system on the backend. I couldn't find anything suitable, so I took it upon myself to create my own solution. It turned out to be technology-agnostic and works with both pure Node.js, Bun and the popular Express.js.

In this brief guide, we will attempt to partially implement a shop's API. This tutorial uses JavaScript and CommonJS module types to keep things simple and quick to get started.

1. Installation

💿 Install node-file-router:

npm install node-file-router

2. Initialization

Create an server.js file and do the following

If you use pure Node.js:

// 1. Import default http module and node-file-router
const http = require('node:http');
const { initFileRouter } = require('node-file-router');

// 2. Create an entry-point function
async function run() {
  // 3. Initialize node-file-router and the handler function
  const useFileRouter = await initFileRouter();

  const server = http.createServer((req, res) => {
    // 4. Create a server and invoke created function on each request
    useFileRouter(req, res);
  });

  // 5. Start listening a server on 4000 port
  const port = 4000;
  server.listen(port, () =>
    console.log(`Server running at http://localhost:${port}/`)
  );
}

// 6. Run entry-point function
run();

If you use Express.js:

const { initFileRouter } = require('node-file-router');
const express = require('express');

async function run() {
  const fileRouter = await initFileRouter();

  const app = express();

  app.listen(4004);
  app.use(fileRouter);
}

run();

2. A first route

🏡 We will create a home route that displays welcome content.

1. Create an api folder at the root of your project.

├── api/ <-
├── server.js
└── package.json

2. Create a file named index.js inside this folder:

├── api/
│  └── index.js <-
├── server.js
└── package.json

module.exports = function index(req, res) {
  res.end("Welcome to our shop!");
}

3. Run a server using: node server.js command
4. Open a browser and navigate to http://localhost:4000.

You should see the message Welcome to our shop! displayed.

Congratulations! 🎉 You've created a first file route

3. Add http methods

1. Before we start, we need a small utility function which will parse json from a request.
Create a folder utils and put http.utils.js file inside.

├── api/
├── ...
├── utils/
│  └── http.utils.js <-
...

module.exports = {
  parseJson(request) {
    return new Promise((resolve, reject) => {
      let data = '';

      request.on('data', (chunk) => {
        data += chunk;
      });

      request.on('end', () => {
        try {
          const parsedData = JSON.parse(data);
          resolve(parsedData);
        } catch (e) {
          reject(e);
        }
      });
    });
  }
}

2. Create a folder called products and an index.js file inside it.

├── api/
│  ├── products/ <-
│  │  └── index.js <-
│  └── ...
...

3. Implement get and post methods:

const { parseJson } = require('../../utils/http.utils');

module.exports = {
  get: (req, res) => {
    res.end('list of products');
  },
  post: async (req, res) => {
    const newProduct = await parseJson(req);
    res.end(`a product will be created: ${JSON.stringify(newProduct)}`);
  }
}

3. Open a browser and go to http://localhost:4000/products.

You should see a list of products message displayed.

4. Make a POST request using curl, Postman or any tool you like on http://localhost:4000/products

The response should display a product will be created along with your content.

Perfect! 🎉 Let's move on

4. Dynamic routes

1. Create a new file with the name [id] inside the product folder.

├── api/
│  ├── products/
│  │  ├── ...
│  │  └── [id].js <-
│  └── index.js
...

2. Fill it the same way as you did before:

module.exports = {
  // Add the `routeParams` argument as the final argument to the function. This argument will contain
  // all the taken route parameters.
  get: (req, res, routeParams) => {
    const { id } = routeParams;
    res.end(`product ${id} info`);
  }
};

3. Open a browser and go to http://localhost:4000/products/123.

The page should display a message: product 123.

Alright, let's make it more sophisticated.

Say, we want to address the following case:
/catalog/tag-1/tag-2/tag-n

4. Create a catalog folder with [[...categories]].js inside.

├── api/
│  ├── catalog/
│  │  ├── ...
│  │  └── [[...categories]].js <-
│  ├── index.js
...

And add a single get method:

module.exports = {
  get: (req, res, routeParams) => {
    const { categories } = routeParams;

    // This type of route also covers just "/catalog"
    if (!categories) {
      return res.end('all products');
    }

    res.end(`get products that have such tags: ${categories}`);
  },
};

5. Open a browser and go to http://localhost:4000/catalog/men/sneakers/nike.

The page should display a list of categories: men, sneakers, nike

🥁 That's it!

What's next?

Selecting the Right Dependencies: A Comprehensive Practical Guide

Daniil Sitdikov — Sun, 16 Apr 2023 11:14:22 +0000

If you were a chef at an upscale Michelin-starred restaurant, would you buy vegetables and meat from random, unverified sources? The cost of almost any average project is measured in hundreds of thousands or even millions of dollars. I believe that our industry should have the same approach as restaurants.

The first question to ask yourself right away: do you really need a new dependency? Could the problem be solved using the current environment, such as the language or installed libraries? For example, there's no need to install an additional library to generate UUIDs. Node.js and browsers support it out of the box: crypto.randomUUID()

The second question: do you need the entire library? For instance, if you only need a dropdown, is it worth installing something like Bootstrap? Perhaps it's better to limit yourself to a single, focused library with an unstyled dropdown component from Radix UI?

Okay. We have a few candidates in mind. So, how do we choose the right one?

A beautifully formatted README? A well-known name? More forks, stars, and downloads than others? Unfortunately, these factors alone aren't enough. Here, we are selecting a service provider. We want any issues that arise to be resolved quickly, the functionality to remain up-to-date, and, above all, for the service to be safe and reliable. Simple external metrics don't always indicate the quality or long-term suitability. Before installing what we've found on the repository catalog, it would be great to visit the GitHub repository and analyze its content.

I have prepared a list of criteria that I have been using for the last few years. I hope they will help you choose the most suitable libraries. It's essential to consider them comprehensively and, in some cases, make compromises when choosing between them.

Disclaimer: I am not criticizing the libraries mentioned below or trying to discourage their use. In some instances, I have intentionally omitted names to focus on the criterion example while maintaining factual accuracy.

1. Security

How safe is it to use? It may sound like fiction, but yes, dependencies can be dangerous. For example, an interesting feature was added to a library with 500k downloads: it tries to replace all files on the computer with ❤️ if your IP address falls within a specific range.

An interesting fact is that this dependency was used in vue-cli.

How can we discover such issues? Check the issues page, or try googling by the library's name. Usually, such information surfaces quickly. Also, Snyk can be used as an automated tool for security checks.

2. Maintenance

When was the last release? How often do releases occur? Regular releases ensure that issues are resolved and updates support constantly changing technologies. In the context of mobile development, regular releases also ensure that the project compiles successfully.

Here's an example from the world of Go: the authors of a library with 18.2K stars decided to stop maintaining their dependency and archived it. This means that, in a few years, the lack of support and updates will become a problem. Now imagine installing a similar dependency without checking GitHub first. It's sort of checking the expiration date of products.

Here is an example of frequent good releases:

3. Open / Closed Issues

1. What is the ratio of open issues to closed ones? How willing are the authors to accept changes? It's possible that you might need to contribute something someday. For instance, this library is quite popular and has a 98% percentage of closed issues. Only 18 are open.

2. How quickly are critical issues resolved? Once, I chose an ORM with 31k stars, but at some point, we encountered a problem that blocked us. We had to look for workarounds and eventually switch to another solution. Unfortunately, almost four years have passed, and the problem still hasn't been resolved.

Such issues can be identified by sorting by the most commented.

3. Has the contribution process been organized by the creators? Is there a clear, defined workflow in place? For example, the creators of Next.js even recorded a 40-minute video about their contribution process.

4. Code Quality

Yes, there may be a lot of code, but it's always possible to examine its different parts. How is the project organized? Is it understandable, and well-structured, and do good practices apply? The worse the code is written, the higher the likelihood of the project's demise in the future. Many small candidates were eliminated at this stage for me.

5. Test Coverage

Does the library have tests? What is the test coverage? How were the tests written? Even if maintainers review merge requests, there is a chance that something may be overlooked. There are a lot of different people contribute to the library. Normally, test coverage information is displayed on badges at the top of the repository. However, if it is not, we can always search for tests in the project. For instance, the formatjs library family has excellent test coverage and includes various types of tests.

6. Library Size

Mobile applications often have large dependency sizes and the whole app can be even more than 200MB, which can cause issues during cellular network downloads and consume a lot of storage space. This is especially problematic for front-end CSR apps, where slow internet speeds can dramatically increase loading times.

For web projects, there is a great tool to determine package sizes: Bundlephobia. Of course, server-side rendering and tree shaking might reduce the size, but this needs to be always verified.

A popular example is date manipulation libraries. The functionality provided by dayjs (2.9KB) might be sufficient, eliminating the need to install moment.js (72.1KB) or date-fns (26.8KB).

7. Number of Dependencies

All the points listed above are multiplied, to some extent, by the number of dependencies in the entire dependency tree of the project. A great tool to check the complete dependency tree: https://npm.anvaka.com

8. License

Have you ever thought about this? I hadn't either. For example, the MIT and Apache 2.0 licenses allow for the free use of libraries in commercial projects, while some GPL v2 licenses have specific requirements and restrictions. In one of our projects, we had a table prepared by a lawyer to check all our dependency tree's licenses. So if you see something unusual in a license, it's better to consult a lawyer to avoid problems during an audit. We can extract all licenses from existing npm dependencies using the legally utility or the same tool mentioned above in the previous point.

P.S. I'm not a lawyer, and this wasn't legal advice. It's a rare and specialized case that something might not be suitable due to the license, but it's still possible.

The End!

Thank you for reading my article! The key point of it was to show real-world examples that shallow and fast decision-making sometimes can lead not to the best option. By considering these criteria, you will be able to make a more informed decision.

Please feel free to leave any comments or suggestions you may have. Don't hesitate to share your experience in the comments as well. Your likes and comments inspire me to write new articles. Happy cooking :)

Unit Testing Components with Jest in React Native. Approaches

Daniil Sitdikov — Fri, 07 Apr 2023 13:04:11 +0000

If you are interested in technical details, how it integrates into the project and common problems resolutions: read this article.

I've used react-native-testing-library. It has similar API as react-testing-library but includes fewer abilities. A full API is located here.

Let's get started with a simple example:

A user inputs some title
A component finds 1 the most relevant item.

<Search
    testID='search-input'
    value={searchQuery}
    onChangeText={this.onSearchQueryChanged}
/>

^{In this article, I don't use the unnecessary code (such as the whole component, logic of the filter, etc.)}

There are 2 approaches to testing:

Snapshots

it('should rerender component with filtered panels after search text input has been changed', () => {
    const { toJSON, getByTestId } = render(
       <Provider store={store}>
            <Cars {...props} />
        </Provider>
    );

    fireEvent.changeText(getByTestId('search-input'), 'Porsche Macan');

    expect(toJSON()).toMatchSnapshot();
});

Advantages:

Good reliability. It covers the whole state of component: makeup, small details, etc.

Disadvantages:

It could be huge like in an example below, and it's hard to find and change something (if business-requirements has been changed and you wanna update your snapshot for next test-driven development).

Query

It finds a node or list of nodes in the tree of some component.

it('should rerender component with filtered panels after search text input has been changed', () => {
    const { toJSON, getByTestId } = render(
        <Provider store={store}>
            <Cars {...props} />
        </Provider>
    );

    fireEvent.changeText(getByTestId('search-input'), 'Porsche Macan');

    expect(queryByText('Porsche Macan S 2019, London')).toBeTruthy();
});

^{An example of testing by node's content}

Advantages:

It looks like more as specification and easy to read and understand
It's ready for use for TDD

Disadvantages:

It's a very small point of testing, and it can't guarantee that bugs in the resulting state of the component will be found.

There is a full API (at the moment of writing the article, 2019) of query functions:

queryByName: (name: React.ReactType | string)
queryByType: <P>(type: React.ComponentType<P>)
queryByText: (name: string | RegExp)
queryByPlaceholder: (placeholder: string | RegExp)
queryByProps: (props: Record<string, any>)
queryByTestId: (testID: string)
queryAllByName: (name: React.ReactType | string)
queryAllByType: <P>(type: React.ComponentType<P>)
queryAllByText: (text: string | RegExp)
queryAllByPlaceholder: (placeholder: string | RegExp)
queryAllByProps: (props: Record<string, any>)

Unit Testing Components with Jest in React Native. Setup and Trouble Resolutions

Daniil Sitdikov — Fri, 07 Apr 2023 06:22:16 +0000

Setup

1. Jest configuration

I removed properties not related to react-native (such as testMatch, testUrl, etc.)

"jest": {
    "preset": "react-native",
    "moduleNameMapper": {
        "styled-components": "styled-components/native"
    },
    "transform": {
        "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    }
}

Also, it could be jest.config.js (depends on your project organization)

2. Mocking store

I used redux-mock-store.

1. For decrease duplicate code I put it into mocks.

As an example of middleware, there is a thunk here. You could use any.

import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const middlewares = [thunk];
const mockStore = configureStore(middlewares);

export default mockStore;

^{Redux mock store located in mocks folder}

2. I've created a separate render component function.

import { render } from 'react-native-testing-library';
import { Provider } from 'react-redux';
import * as React from 'react';

export function renderComponent(content, store) {
    return render(<Provider store={store}>{content}</Provider>);
}

^{Receives component to render as content and state of the store}

3. And just use it:

import Catalog from './index';
import * as React from 'react';
import mockStore from 'redux-mock-store';
import state from '../../../dev/spec-helpers/state';
import { renderComponent } from '../../../dev/spec-helpers/render-component';

describe('Catalog', () => {
  const store = mockStore(state);

  it('should render component in init state', () => {
      const component = renderCatalog(store, { disabled: true });
      expect(component.toJSON()).toMatchSnapshot();
  });
});

function renderCatalog(store, extendedProps = {}) {
    const props = { ...extendedProps, resultId: 'P39' };
    return renderComponent(<Catalog {...props} />, store);
}

^{Fragment of some component testing}

3. Add more readable expect method "toBeFound"

const expect = require('expect');

expect.extend({
    toBeFound(received) {
        if (received === null) {
            return {
                message: () => 'Target node doesn\'t exist',
                pass: false
            };
        }

        return { pass: true };
    }
});

^{Extension of expect-file}

Create a script config/jest/expect.js
Add it to setupFiles in your jest config:

it('should correctly render last-date laboratory result', () => {
      const {getByText} = renderHomeResult(store);
      expect(getByText('Urogenital swab')).toBeFound();
      expect(getByText('Inhibin B')).toBeFound();
  });

Trouble resolutions:

1. ES6 in node_modules

Error in using of es6+ libraries from node_modules such it:

/Users/dsitdikov/Projects/experimentx-dx-app/node_modules/react-native/jest/mockComponent.js:20 static displayName = 'Component'; ^ SyntaxError: Unexpected token =

Solution:

Use transformIgnorePatterns in jest config:

{
    "transformIgnorePatterns": [
        "<rootDir>/node_modules/(?!react-navigation|react-native|rn-apple-healthkit|rn-fetch-blob)"
    ]
}

^{A fragment of the package.json > jest}

By default, jest transformIgnorePatterns has <rootDir>/node_modules and ignores all node_modules. So that it transforms each file from es6+ to understandable es5 except node_modules. Some modules are not in es6, and we should say ignore all node_modules except react-navigation, react-native, rn-apple-healthkit, etc.

You also can read about it in jest documentation.

2. Modules don't work in jest.

Something like:

TypeError: Cannot read property 'RNFSFileTypeRegular' of undefined | import RNFS from 'react-native-fs';

Solution:

It's ok. Just:

Create mocks.js in your project
Add setupFiles in your jest configuration

{
    "setupFiles": [
      "<rootDir>/config/jest/mocks.js"
    ]
}

^{Fragment of package.json > jest}

3. For each unnecessary and unworking module write the following:

jest.mock('react-native-camera', () => {});

^{An example of a mock some module}

3. Error in using mocked default exported modules.

An error could be such this:

TypeError: Cannot read property 'dirs' of undefined

Solution:

Just add this to your mocks file.

jest.mock(
    'rn-fetch-blob', 
    () => ({
        __esModule: true,
        default: {
           fs: {
           dirs: {
               DocumentDir: jest.fn()
           }
        }
    })
);

A fragment of mocks.js file

How to Master the Senior Developer Role: 7 Criteria to Follow

Daniil Sitdikov — Fri, 07 Apr 2023 05:51:43 +0000

It was a difficult and challenging journey. Many times, I believed that I had reached a senior level, but my tech leaders thought otherwise. The issue was that none of them could provide clear guidance on how to progress in the right direction. Each one had a different opinion. It took me five years to finally overcome this hurdle. I decided to help others who are looking for clear answers and guidance to create an action plan. I am confident that you can achieve your goals faster and with less difficulty.

After reviewing these criteria, you may realize that your current company is undervaluing you. In this case, you can confidently ask for a promotion or look for a new job. If you are already a senior developer and are unsure whether other companies will evaluate you in the same way, this article will help you identify your growth areas and quickly level up. On average, outsourcing companies often have lower requirements for senior developers because they can sell their services to clients at a higher price. In contrast, product companies try to optimize costs and may undervalue their developers.

So, let's begin!

After performing an analysis, I identified seven essential criteria. Every business aims to spend less and earn more. Therefore, money is at the core of each criterion.

Planning and pragmatism

You manage risks and think strategically. You know when to implement solutions quickly and straightforwardly, recognizing that a certain aspect of the project may no longer exist tomorrow. And when you need to invest time in architecture and profoundly work everything out so that it is fast and reliable in the future.
You have a vision for how the project will develop in the future, and you make architectural decisions based on that vision.
You are capable of independently decomposing large features and then planning the development in an iterative approach. This way, the business can start benefiting as soon as possible.
You can estimate the time required for a task in a way that doesn't lead to working overnight and missing deadlines. You can take risks into account and don't let the business down. If something is going completely wrong, you timely suggest alternative solutions.
You have a good understanding of the current development process and can identify its shortcomings. Based on this knowledge, you can suggest improvements to make the process more efficient and effective.

Speed

You possess highly advanced skills. What a junior employee might accomplish in a day, you can complete in just a couple of hours. You rarely need to search for information on how a programming language or library functions work. With your extensive experience, intuition guides you towards solutions with ease.
You know how to quickly and consciously debug code.

Accuracy

You can easily and quickly account for all possible edge cases by considering scenarios such as a large amount of data, unexpected user behavior, or third-party service failures. By anticipating and planning for these situations, you can ensure that the data is saved and users have a positive experience, even if a server goes down completely.
Your code is clean, understandable, and minimal. The style is consistent, and the naming is clear.
You understand how to organize a project by considering layers, creating clear abstractions, ensuring modularity, and determining how components are connected to one another.
The number of bugs in production tends toward zero. The money the business would have spent on fixing bugs and retaining unhappy users is already included in your salary.
Your code works efficiently. You know about data structures and their differences, and you understand how to achieve fast and smooth product performance.
Ideally, you can solve complex problems with simple and inexpensive solutions.
You possess a high level of expertise in the tools and technology you use.

Autonomy

You no longer need help with code or technology.
You will communicate directly with the business to clarify requirements and work out necessary features for implementation.

Broad knowledge

You stay up-to-date with the development of the technologies you use, including new features of the language and frameworks. You have already subscribed to various email newsletters and follow industry leaders on Twitter.
You have worked on several projects with different teams, solving various problems and using a variety of technologies. As a result, you have gained an understanding of the pros and cons of different approaches.

Battle experience

You can integrate the best practices: testing, CI/CD, error monitoring, and so on. By the way, I wrote about this in another article: 7 Proven Practices to Boost Development Speed and Project Quality
You have created projects from scratch, guiding them through all stages: from hypothesis validation to a fully-fledged production application.

Knowledge sharing

You can mentor less experienced colleagues.
You conduct high-quality code reviews: you notice not only the absence of space in a line but also think in terms of solving the problem as a whole.
Ideally, but not necessarily, you do this publicly: write articles, teach, engage in mentoring on special platforms, or organize workshops. Receiving external validation is a huge plus.

In conclusion, you can discuss the possibility of including these criteria in your personal development plan with your manager, or ask your colleagues to evaluate you. This can be a valuable way to continue improving in your role.

Thank you for reading my article! I hope my guide was helpful. Feel free to leave any comments or suggestions you may have, and don't hesitate to share your success stories in the comments. Also, your likes and comments inspire me to write new articles.

7 Proven Practices to Boost Development Speed and Project Quality

Daniil Sitdikov — Mon, 27 Mar 2023 12:54:18 +0000

Introduction

All of these points can be applied to mobile development, web frontend, and backend. I have gathered these practices from different teams and through the issues I faced over the last 6 years. These practices can be especially helpful when you build a project from scratch. Some of them may suit you perfectly, while others may not. If you have your own approaches and different experiences, I would be happy if you share them here. By the way, if you are a middle or junior developer seeking a promotion, implementing these practices in your team can really help. Let’s go!

1. Mocking backend responses until it’s ready

In a standard software development process, when a new feature request comes from the business, it is distributed among several teams: front-end, back-end, and mobile app development. Then, each team proceeds with planning and task decomposition. But what if the back-end team requires significantly more time to develop their part? What if they can deliver endpoints only once a week? The backend becomes a bottleneck. The mobile and front-end development teams end up working like this: "Oh, the back-end has already implemented this. Let me take this task." Then, they take a break, switch their context to another feature, and the cycle continues. This leads to fatigue, decreased speed, and reduced quality.

Solution: agree on a contract with the back-end team and mock all requests.

1. Coordinate with the back-end team on the endpoints and entities.

2A. Implement backend API with stub responses. The Faker library can help with sample data generation.

2B. Or implement stubs on the frontend. This can be an object with data directly in the code. For example, in Node.js, you can efficiently implement this using dynamic imports and avoid increasing the bundle size:

getUser() {
    return import('../../assets/mocks/users')
      .then(data => data.userById)
      .then(deserializeUser);
  };

This also can be a mock HTTP service that fetches JSON files from assets instead of making real requests.

3. Hide the feature behind a feature flag.

4. When the backend is ready, switch to the actual API if you used the front-end stubs approach, and verify that everything works as expected. And turn this feature on.

2. Feature flag

Now, as you probably noticed, in the previous section, I mentioned feature flags. In a nutshell, feature flags a.k.a feature toggles allow developers to turn features on or off in a live environment. There are also a couple of cases when they are useful: rolling out new features gradually, performing A/B testing, enabling beta features, and implementing hotfixes.

We use Gitlab for storing feature flags. It’s a dedicated repository that is consumed by both backend and frontend projects. The great news is that it has a user-friendly UI, thus product managers can manage features by themselves. Previously, we used to use feature flags for each project repository separately. However, this approach didn’t provide the ability to disable features for the whole product at once. So we move everything to the single repository.

In the code, it looks quite simple:

In the project, we fetch all active feature flags. As under the hood, Gitlab is based on Unleash (feature toggle service), we use its official client.
And then, just put if features.YOUR_FEATURE in the code which needs to be hidden.
You can expand the use cases by adding different values in the feature flag. For instance, by adding the color value or the discount value.

3. Monitoring errors for tracking issues in a production environment

When our product transitioned from the MVP stage to a production application, we were concerned that users would get errors that we couldn't reproduce and might not even be aware of. After researching error-tracking tools, we settled on Sentry. The experience was positive. And now, let’s go through some important nuances.

Useless Errors

Under the hood, any uncaught exception will be tracked. As the application and the number of users grow, the number of errors can become so overwhelming that it is getting nearly impossible to notice anything truly important. Sentry can turn into a dumpster if you don't filter out the unnecessary stuff. For example, events like canceled requests, connection errors, and errors from connected scripts are utterly useless and will only spam your work email with notifications. As a solution, you can add filters to the configuration. To do this, simply define a beforeSend callback and put it in your sentryPackage.init. In this callback, you can analyze each caught error and then discard it (by returning null) if it's useless. Here's an example of a filter that excludes unnecessary errors:

function beforeSend(event, hint) {
  const error = hint.originalException;

  const externalScripts = [
    'gtm.js', // Google Tag Manager
    'watch.js', // X Analytics
  ].join('|');

  const errorsToIgnore = [
    AxiosError.ERR_NETWORK, 
    AxiosError.ECONNABORTED, 
    AxiosError.ETIMEDOUT
  ];

  if (axios.isCancel(error) 
      || errorsToIgnore.includes(error.code) 
      || error.stack?.match(externalScripts)) {
    return null;
  }

  return event;
}

Include more data for better debugging

By default, Sentry might not include the content of the request and response in the error report. Without this information, proper debugging is impossible. Fortunately, in the beforeSend handler, we can include this information.

function beforeSend(event, hint) {
  const error = hint.originalException;
  if (error.isAxiosError) {
      const url = error.request?.responseURL;
      const response = error.response?.data;
      const request = error.config?.data;

      event.extra = { 
        ...(event.extra || {}), 
        url, 
        response, 
        request 
      };
   }

   return event;
}

Filter Sensitive Information

Data such as passwords, email addresses, and keys should not be included in the error content. Sentry has a built-in mechanism for hiding this type of information. You can configure it in the security settings. Moreover, you can also remove something in the event object in beforeSend

Standalone Solution

If the nature of your business prohibits storing this kind of data on a server somewhere else, Sentry offers the ability to use it on your own servers.

4. Tracing

Imagine a situation where you successfully capture an error in Sentry, but the information in the description is insufficient. You turn to logs, but how can you identify the specific error among thousands of requests and even more log lines per second? How can you distinguish the correct ones, construct the request chain, and pinpoint the exact error, especially when your business has multiple teams and integrates with other services? This is where tracing comes into play.

Tracing provides a complete diagram of invocations and identifies the precise method that failed, even when you have asynchronous communication performed by a message broker.
It allows you to easily determine which side the error occurred on when integrating with different teams.
Tracing is also useful for performance debugging. For instance, it can help clarify whether rendering takes longer or if a method in a microservice is not optimized enough.

In our specific implementation, we used Jaeger, which is based on the OpenTracing API.

In a nutshell, each request and all its method calls are tagged with a unique label. Each label has a reference to its parent and some metadata. The structure of this number depends on the implementation but as for OpenTracing you can read how it works and get familiar with terms like span, reference, child, parent, and so on the official repository page. In the real life, tracing luckily will rarely be used. However, in these rare accidents, it can save you time.

5. Performance optimization

When we implemented the MVP of the fintech app, we had a quite complicated form. At that time, I was still young and inexperienced. And eventually, we realized that our project was slowing down. We had to spend additional hours figuring out the reason. We had many unnecessary re-renders because we ignored basic rules related to props in React. I wanted to do everything possible to avoid such situations in the future. So, I added to the project linters like this and an additional starting configuration to package.json to run why-did-you-render. In short, this plugin issues a warning if something is re-rendered unnecessarily and suggests how to avoid it. Also, we included running Lighthouse in headless mode. Some people say that premature optimizations are bad, but for me, it's a principle: do it right from the start.

6. Defined code style for all team projects

You've likely heard of the broken windows theory. If there's one broken window in a building and no one replaces it, eventually there won't be a single intact window left in that building.

The fewer rules and controls there are in a project, the greater the temptation to write low-quality code or to write it in an entirely different style. Inconsistent code increases the time it takes to understand it, while clear, familiar, and concise code allows for quick reading. In one of our teams, we described the coding style in one place. As a great starting point, you can take Prettier or Airbnb code style.

7. Regression tests

A significant amount of literature has already been written about the different types of tests, approaches, and how to write them properly. The only thing worth mentioning here is that no production application can survive without regression testing. That's why we focused all our efforts on creating a comprehensive end-to-end testing framework and based on it, we wrote tests that are linked with BDD scenarios and user stories. We used the Page Object pattern to organize our code and the Playwright framework for interacting with the browser. To test across different browsers, including Safari, you can use a solution called Moon. It can be deployed on one of your servers.

Conclusion

Thank you for taking the time to read this article! In conclusion, this article highlights key software engineering practices that enhance development processes and code quality. By adopting techniques such as backend response mocking, feature flags, error monitoring, performance optimization, code style standards, regression tests, and tracing, you can create more efficient and reliable software. Let's continue to improve our software and stay in touch! :)

8 the most essential tested React Native libraries that will skyrocket your app 🚀

Daniil Sitdikov — Sun, 30 Jan 2022 16:44:37 +0000

I have an interesting relationship with React Native: it’s like an emotional rollercoaster, to be honest. Sometimes random compilation errors in my terminal make me cry and whine. But, in general, it’s amazing. Huge thanks Meta for this technology. In this article, I want to overview selected libraries that may improve any application.

1. React-Navigation for the awesome native animated transitions

Basic screen navigation transition as we got used to them in front-end apps seems to be boring. Let's do that them native, more smoothly, more handsome. By the way, it also supports native header and tabs.

2. Lottie for the sophisticated animated images

You can live up your app with the interacted pictures. Lottie is a JSON-based file with some animation. This format is common and designed to be used on many platforms. You can create your own, ask a motion designer, or find something already existing. Just take a peer at the LottieFiles catalogue and you will better understand what do I mean.

3. Haptic-Feedback for the enjoyable micro-vibrations during user actions

It will involve the real-world experience in the digital one by providing touching feedback. However, be careful about overusing it. More information about use cases is described in Apple's guidelines.

4. Svg for any vector graphic like icons or pictures

The main drawback is that you have to convert SVG elements to the library's components firstly.

5. AsyncStorage with the same API LocalStorage has

Sometimes we need to store the user's settings, cache downloaded data, save sessions and so on. The library is built to satisfy this need. By the way, if for some reason you need a synchronized store you can use the alternative synchronized one.

6. In-App-Review for the user's feedback request

The easiest and cheapest way to increase the app's rating is just to ask users about that. I am sure that you came across it in native apps after the user scenario with a positive outcome. Good news: it works for Android as well.

7. Exception-Handler will prevent critical crashes and inform users

This magical thing can save your life. In any critical errors, your app won't just be closed. Now you have not just the opportunity to say sorry and that you are ashamed about what has just happened, but also the ability to provide a choice: relaunch the app or close it.

8. Bottom-Sheet for the bottom sliding area like in Instagram

No comments. Just take a look at the example below!

Final Words

I wish you good luck with creating the best application in the world! ✨

Single place of form validation rules for clients and services with JSON Schema

Daniil Sitdikov — Mon, 17 Jan 2022 20:17:40 +0000

Introduction

In our app, we have around 60 form fields among decades of modals and I am sure that this is not the final number. We work in multinational legal and finance business domains. Because of that, we have to validate a lot of form fields based on some conditions (such as country). Moreover, we are in the early stages of development and it means that the power of changes definitely can affect us.

These circumstances led us to find the solution which has to satisfy these requirements:

It should be one source of the truth. In other words, one dedicated file with validation rules for all consumers: services, web apps, mobile apps, etc. Because in the opposite case after successful front-end validation service can reject a request because of invalid incoming data
It supports conditional validation: for instance, unique rules of legal entity fields for each country.
Understandable language for product analytics. To be able to amend rules without engineers.
Ability to show error messages which are clear for users

Solution

We decided to use JSON Schema (draft 7). It closed our needs. In a nutshell, it's standard represented as JSON which contains a set of rules for some JSON objects. Now we're going to overview the most common and useful validation patterns.

Basic

Let's start with the basic example. We need to verify just one field: it should be required and follow an email regular expression.

Our model is:

{
   "email": "Steve"
}

and our validation schema is the following:

{
   "type": "object",
   "properties": {
       "email": {
           "type": "string",
           "pattern": "(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])",
           "errorMessage": "Can be only in name@domain.com"
       }
   },
   "required": ["email"]
}

Conditional fields

Sometimes we need to apply some validation rules depending on the values in the other selected fields.

Let’s have a look at concreate case. Here, each country should apply unique validation for a VAT number.

For the United Kingdom, it can only be: GB000000000(000), GBGD000 or GBHA000
For Russia: exactly 9 digits and nothing else
For other countries, we don’t apply any validations for now. (as we’re going to extend this piece by piece)

The model is a bit more complicated. Now we have country:

{
   "name": "Samsung Ltd.",
   "country": {
       "id": "GB",
       "name": "United Kingdom"
   },
   "vatNumber": "314685"
}

To perform conditional validation we’re going to use allOf construction as well as if and then blocks. Please, pay attention to the required field in the if block. It has to be here. Otherwise, it won’t work.

{
   "type": "object",
   "properties": {
       "name": {
           "type": "string"
       },
       "vatNumber": {
           "type": "string"
       }
   },
   "required": [
       "vatNumber",
       "name"
   ],
   "allOf": [
       {
           "if": {
               "properties": {
                   "country": {
                       "properties": {
                         "id": {"const": "GB"}
                       }
                   }
               },
               "required": ["country"]
           },
           "then": {
               "properties": {
                   "vatNumber": {
                       "pattern": "^GB([\\d]{9}|[\\d]{12}|GD[\\d]{3}|HA[\\d]{3})$",
                       "errorMessage": "Can be GB000000000(000), GBGD000 or GBHA000"
                   }
               }
           }
       },
       {
           "if": {
               "properties": {
                   "country": {
                       "properties": {
                           "id": {"const": "RU"}
                       }
                   }
               },
               "required": ["country"]
           },
           "then": {
               "properties": {
                   "vatNumber": {
                       "pattern": "^[0-9]{9}$",
                       "errorMessage": "Can be only 9 digits"
                   }
               }
           }
       }
   ]
}

Either one or all

Sometimes we need to fill at least one field. As a real-world example, to perform payments in the UK you should know the BIC/SWIFT or sort code numbers of a bank. If you know both — excellent! But at least one is mandatory.

To do that we will use anyOf construction. As you noticed this is the second keyword after allOf. Just to clarify all of them:

allOf — ALL statements should be valid
oneOf — ONLY ONE statement should be valid. If more or nothing it fails
anyOf — ONE OR MORE statements should be valid

Our model is the following:

{
   "swiftBic": "",
   "sortCode": "402030"
}

And validation schema:

{
   "type": "object",
   "anyOf": [
       {
           "required": ["swiftBic"]
       },
       {
           "required": ["sortCode"]
       }
   ]
}

Implementation on JavaScript

JSON Schema is supported by many languages. However, the most investigated by me was the JavaScript version.

We took ajv library as the fastest one. It is platform-independent. In other words, you can use it as in front-end apps with any frameworks and in Node.JS.

Apart from that, avj makes possible to use custom error messages. Because, unfortunately, they are not supported by standards.

Before we start, we need to add 2 dependencies: ajv and ajv-errors.

import Ajv from 'ajv';
import connectWithErrorsLibrary from 'ajv-errors';

const ajv = new Ajv({
   // 1. The error message is custom property, we have to disable strict mode firstly
   strict: false,
   // 2. This property enables custom error messages
   allErrors: true
});
// 3. We have to connect an additional library for this
connectWithErrorsLibrary(ajv);

// 4. Our model
const dto = { dunsNumber: 'abc' };

// 5. Validation schema
const schema = {
   type: 'object',
   properties: {
       dunsNumber: {
           type: 'string',
           pattern: '^[0-9]{9}$',
           errorMessage: 'Can be only 9 digits'
       }
   },
   required: ['dunsNumber']
};

// 6. Set up validation container
const validate = ajv.compile(schema);

// 7. Perform validation.
// ... It's not straightforward, but the result will be inside the "error" property
validate(dto);

console.log('field error:', validate.errors);

As the result we’ll have:

[
    {
        "instancePath": "/dunsNumber",
        "schemaPath": "#/properties/dunsNumber/errorMessage",
        "keyword": "errorMessage",
        "params": {
            "errors": [
                {
                    "instancePath": "/dunsNumber",
                    "schemaPath": "#/properties/dunsNumber/pattern",
                    "keyword": "pattern",
                    "params": {
                        "pattern": "^[0-9]{9}$"
                    },
                    "message": "must match pattern \"^[0-9]{9}$\"",
                    "emUsed": true
                }
            ]
        },
        "message": "Can be only 9 digits"
    }
]

and depends on our form implementation we can get the error and put it inside the invalid fields.

Conclusion

To perform the validation which is described in one single place we used JSON Schema. Moreover, we came across the cases like conditional validations, selective validation and the basic one.

Thanks for reading! ✨