npmgraph VS react-router

You don't think depending on dozens or even hundreds of NPM packages with a single maintainer is an issue?

Just as an example, Express depends on 25 modules with a single maintainer.

https://npmgraph.js.org/?q=express

Obviously a router is a fraction of what's needed for any non trivial backend project.

It's not a frontend problem but a JS-ecosystem problem. Happens in the backend too.

The JS landscape is an absolute mess where dependencies have dozens if not hundreds of other dependencies. As an example, this is the dependency graph of Platformatic (a Node framework based on Fastify):

https://npmgraph.js.org/?q=platformatic#zoom=h

Each of those dependencies could be abandoned at any moment. Even huge dependencies like Axios or Express seemed to have been abandoned at one point.

And then each dependency is ruled by whatever their maintainers think is right. Just the other day a dependency I use in prod with aprox 25M downloads per week (React is aprox 26M) and used by 10M Github repos decided it was ok to drop support for Safari versions from about 3 years ago. It's just insane considering Safari has +50% mobile market share in the US.

In recent years, it's started to feel like you can't trust third-party dependencies and extensions at all anymore. I no longer install npm packages that have more than a few transitive dependencies, and I've started to refrain from installing vscode or chrome extensions altogether.

Time and time again, they either get hijacked and malicious code added, or the dev themselves suddenly decides to betray everyone's trust and inject malicious code (see: Moq), or they sell out to some company that changes the license to one where you have to pay hundreds of dollars to keep using it (e.g. the recent FluentAssertions debacle), or one of those happens to any of the packages' hundreds of dependencies.

Just take a look at eslint's dependency tree: https://npmgraph.js.org/?q=eslint

Can you really say you trust all of these?

NestJS is probably the closest thing to a Rails-like framework in JS. Also Platformatic by the creator of Fastify.

Still, the dependency entanglement in JS is just crazy. This is the dependency graph of Platformatic:

https://npmgraph.js.org/?q=platformatic#zoom=h

AFAIK there's no JS framework that solved the whole thing and doesn't depend on other packages.

I don't know why JS devs historically have an aversion to frameworks. Maybe the author of the article is right and this is caused by preventing heavy bloated JS apps in the browser.

In any case, after 10 years of Node in the backend, I'm done with it.

Lots of people taking general pot shots at different languages and ecosystems.

But OP was trying to install gatsby on a different node target. It's not some little library. These kinds of massive libraries break all the time: https://npmgraph.js.org/?q=gatsby

React and react-dom are peer dependencies (npmgraph lists them but doesn't graph them visually). The actual full installation command is: `npm install next@latest react@latest react-dom@latest`[1]. Even if you include react and react-dom, the dependency graph still looks tolerable to me: https://npmgraph.js.org/?q=next%4014.2.13%2C+react%4018.3.1%...

[1] https://nextjs.org/docs/getting-started/installation#manual-...

This looks a lot better than I expected.

One thing that bugs me about this (and Tailwind) is the number of dependencies they pull in. Panda has 152 nodes (239, if you count their dev-dependencies)[0].

Tailwind has 98 (594 if you count their dev-dependencies).

I know they're only dev-dependencies, but still... I've got all of that code running on my machine, just to process CSS. I really don't love it.

[0] https://npmgraph.js.org/?q=%40pandacss%2Fdev

This is what I came up with. I get 514. I got 496 here https://npmgraph.js.org/. I'm curious what you get using npm and/or yarn, or other tool.

Angular comes with a built-in router that provides you a great way to route your URLs, but in React, again, you have to install a third party package like React Router and TanStack Router. After spending hours, I went with React Router because it's the most popular package and it's also easy to learn. Although TanStack Router seems more advanced, I didn't want to overkill my first project.

https://github.com/remix-run/react-router

🔗 reactrouter.com

Behind React Router v7 is a talented team that has worked hard to bring the best ideas from Remix into the router. While Remix co-founders Michael Jackson and Ryan Florence have decided to shift focus to the development of Remix v3, they’ve handed over React Router v7 to an open governance committee dedicated to its ongoing evolution. (More info)

React Router DOM (For smooth navigation)

While SPAs are very convenient for dynamic applications, they lack good support for SEO. For starters, if all you have is a single page, your meta tags will hardly describe accurately each part of your application. Moreover, you won’t be able to generate unique URLs out-of-the-box, having to resort to a client-side routing library like react-router.

CRA makes integrating libraries like Redux and React Router easy without requiring complex Webpack and Babel configurations.