Yup vs Joi for frontend validation

Question

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:

• Joi has better performance
• Joi is more popular for backend validation, while Yup is more popular for frontend validation
• Joi has a lack of support on the frontend
• Per official docs, Yup is leaner and built with client-side validation
• Yup bundle size is ~2.5 times smaller than Joi - link

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.