re: My React stack for 2019 VIEW POST

FULL DISCUSSION
 

Nice share!

Second, we want to have deterministic and easy to use dependency management - this is why I use Yarn

I'm curious, why are you using Yarn in 2019? npm offers much of what Yarn does - and more. Plus it comes out of the box with every node installation. The fewer tools, the better!

The world has been much nicer since the invention of Fetch API. We no longer need to make AJAX calls with jQuery. But still - who wants to remember how to create a JSON POST request with native Fetch? And who wants to write their own API wrapper?

Writing a wrapper around fetch to support the basic use cases takes ~50 LOCs and saves you a couple of KBs from Axios (which, by the way, uses XMLHttpRequests under the hood!). Plus easily allows you to hook into the configurations when you need to do stuff like auth token, so I'm curious if you're taking advantage of features such as Axios interceptors or it's very wide browser support. Otherwise, seems like there's not too much value on using it.

I'd imagine that you still abstract away data fetching from your React Components using Mobx async actions (not doing so would be a crime on middle-to-large projects).

 

Hi, thanks for your input

npm offers much of what Yarn does

I disagree:

  • Yarn is much faster
  • Yarn workspaces allow for easy monorepo management
  • Yarn has upgrade-interactive. NPM has a separate package for that.

Writing a wrapper around fetch to support the basic use cases takes ~50 LOCs and saves you a couple of KBs from Axios

You're right. But writing those 50 LOC for every project may seem like a waste of time (of course there are still cases when it is better choice). I could make a module from it, but why would I create another Axios? I never needed to use interceptors, I'm using Axios because the API is nice and it offers pretty features out of the box.

I'd imagine that you still abstract away data fetching from your React Components using Mobx async actions

Yes, of course :-)

 

Yarn is much faster
Yarn workspaces allow for easy monorepo management
Yarn has upgrade-interactive. NPM has a separate package for that.

Can you link me to the benchmarks? Much of the posts that I find says that they're par on speed. Just now I tried both a cold install and a warm install inside a Docker container and got these results:

npm cold install: 48s
yarn cold install: 1m12s

npm warm install: 24s
yarn warm install: 20s

Note that for CI environments, npm has npm ci which install the dependencies 3 times faster. I didn't find a yarn equivalent.

About monorepos and upgrade-interactive: I don't use monorepos and I update dependencies like once in a month, so I don't actually mind those features. Like you said there's a separate package for both features so you can do:

npx npm-check --upgrade
npx lerna ...

There's no npx equivalent on Yarn.

Some recent benchmarks are here. They're on par most of the time, but Yarn is pretty fast with cache and lockfile.

Easy to be fast with cache when Yarn cache litterally everything (every month I needed to remove 80GB of data from Yarn cache when i was using it)

By the way npm ci is what you use normally when you're not locally developing on the package so every installation aside your local install is 3x faster.

For mono repo, there's lerna which you can use via npx

 

afaik fetch

  1. does not have a way to track progress
  2. cancelling can be cumbersome(abortController is not supported by IE and claimed to be experimental)
  3. there a must be wrapper code to translate 4xx/5xx status codes into rejected promise.

to me looks more than 50 loc to write.
or has thins been changed recently?

code of conduct - report abuse