33

I want to implement frontend validation with either Yup or Joi.

From all the docs and articles that I've found, I've got to a couple of conclusions:

However, I didn't manage to find what Joi lacks in terms of support compared to Yup?

Right now, from all of these conclusions, it's choosing to either have a smaller bundle or better performance.

Nikola
  • 332
  • 1
  • 3
  • 6
  • 1
    Yup.InferType is one my most used function. It removes the necessity of defining the types for the same object twice. Such an option is not there in Joi and that increases the bootstrapping code. – Shubham Prasad Mar 25 '21 at 08:49

3 Answers3

30

In the past, it was true that joi lacked browser support, at least out of the box. It uses a few Node.js APIs, which aren't available in the browser, to implement some of its features. It was still possible to use Browserify on it, or use the unofficial joi-browser npm package, but the process was cumbersome enough that it was less common to see joi used on the frontend. Yup was basically a workaround for that.

However, that information is out of date, as joi now includes an official browser build that's easy to use and roughly the same size as yup. See its package.json: https://github.com/sideway/joi/blob/83092836583a7f4ce16cbf116b8776737e80d16f/package.json#L8

Your bundler, assuming it is set up correctly, should detect the browser build and use it automatically. For example, if you're using Rollup, make sure you are using @rollup/plugin-node-resolve with the browser: true option.

I would strongly recommend using joi on the frontend now as you can share schemas between frontend and backend, which is really fantastic.

Seth Holladay
  • 8,951
  • 3
  • 34
  • 43
  • Interesting.... – Hendy Irawan Nov 10 '21 at 15:56
  • Very interesting opinion, but now consider the situation to change in 2023. Joi's bundle size seems bigger than Yup. What I would recommend is we can convert Joi validation schema to Yup very easily just use chatGPT. We don't need to spend too much time creating from scratch. Using chatGPT, can convert it easily and optimized the frontend. – Voon Tao Tan Feb 09 '23 at 06:39
  • In 2023, I still use joi on the frontend without any problem. The bundle size is fine if you are using a good bundler setup like esbuild or rollup. Sharing schemas between backend and frontend is lovely. I see no reason to use yup. – Seth Holladay Aug 16 '23 at 08:31
14

For frontend performance bundle size is more important than fast work (you do not need to make millions of validations on the client-side). As you mentioned: "Yup bundle size [60.1kB] is ~2.5 times smaller than Joi [145.9kB] - link"

So my choice is Yup.

But if you use Joi for backend and you're going to share schemas with frontend, I agree with Seth Holladay.

Luis Cárcamo
  • 309
  • 1
  • 3
  • 11
Konstantin
  • 221
  • 3
  • 7
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 14 '22 at 21:31
0

I would lean towards using joi even if you are only using it for the frontend for the simple reason that more and more backend work in nodejs is moving towards Nestjs. And in the documentation of nestjs https://docs.nestjs.com/techniques/configuration#using-the-configservice at partial registration it uses joi for schema validation. So yup might be a slightly better tool but for communicating with backend devs on a future project I would recommend at least learning joi.

MalcolmXYZ
  • 126
  • 8