Npm, Webpack, NodeJs where to start?

Question

IT education

Help where to start studying or working, I don’t even understand how to ask a question correctly in order to begin to understand at least the essence.

For the last 3 years I have been working with my own php projects, doing everything from landing to REST API and working with RabbitMQ, Redis, MemCached, jQuery, Databases. High loaded project. And everything works well, quickly.

But I wrote all this without using frameworks like laravel, and even more so without using nodeJs, Webpack, npm and similar goodies.

But now very often there is a task to fasten some module (like the LTE admin panel) and I just have a stopper. Because all this is written using preprocessors, a dozen dependencies for the sake of the simplest function, hundreds of plugins that are compiled through webpack, or it’s not at all clear what they are compiled through. And I just can't tie it to my project, which has dozens of times more functionality than this admin template, but at the same time, in which just a million lines of code are used.

Tell me where can I start to understand all this? And is it necessary? Am I the only one? Where did I miss the moment when everything began to be based on millions of dependency lines that are almost impossible to control. And there should be conflicts of libraries, plugins. Also their duplication or duplication of plugins with the same functionality

. The biggest problem is when the instructions for the project say "run npm i" and as a result a bunch of errors come from who knows where they came from and who knows how to fix.

Please let me know your thoughts on this issue. Maybe everything is really so complicated that I will never figure it out and it is worth tying up with development. Or maybe on the contrary, everything is simple with the principle "installed windows and don't think about how it works"?

It was not a question, but a cry from the heart. It’s just that all development, as far as I understand now, has turned into downloading plugins. Yes, even in php, if you get into some laravel, then there are so many dependencies that once you hook into some module, it will be simply impossible to change something.

Answer 1

The front has developed in some wrong direction, it's true
. Rolling into the front is very difficult, that's also true. Moreover, it is unreasonably difficult.
I would single out two ways how you can get into all this:
1. Create an application in Vue or React using tutorials, then figure out how and why it is all
2. Understand how and why it is all (aka Vanilla JS), then work on reacts
IMHO , option number 2 is preferable and simpler, because on option number 1 there is a huge chance to get stuck, never understanding how it works and raise paws for any non-standard errors.
What you need to understand here:
1. There are different versions of ES (ecmascript), they are all backward compatible. The programmer can write in any version he likes. Usually take the latest stable
2. For a project, there are usually two versions of ES: the one that programmers write in and the one that runs in the browser or in the node (more on that later). For example, a programmer writes in ES8, and the code is translated to ES5. This allows you to use the latest death rattles of the JS fashion craze while running everything on ancient shit like IE11. Transpiling code from JS / TS of one version to JS of another version is handled by the transpiler: babel / esbuild / swc
3. New versions of JS contain standard library extensions that are not available in older browsers (for example, Array.from, Object.entries, etc.) . These holes are plugged with polyfills, they are also shims. The most popular hole punching machine - corejs
4. All code is obviously not written in one file and can be written in TypeScript (aka TS), JSX / TSX (react syntax). All this needs to be collected in one or several files, that is, compiled. This is handled by bundler: part of webpack/esbuild/spark/etc.
5. The same guy is responsible for ensuring that the thousand libraries that are in node_modules get into the final conditional main.js, but not entirely, but only what is used. The last one is called tree shaking
important for SEO, render with something non-reactive or make SSR - do work for Yandex on the server (on the node), imagining in the mind that we have a DOM and a browser (actually not), get the initial HTML state at the output , give it to the client (browser or search robot), and JS'om its so-called. "hydrate", in other words - to revitalize.
7. webpack is responsible for everything from above in one form or another. It's a food processor where you throw a bunch of junk in one form and you get another pile of rubbish in a different form.
I advise you to start with parceljs, which is much easier to learn than webpack. And on writing code as much as possible without libraries.

Answer 2

I am a backend developer. A typical task is to take from SQL and post JSON to a URL. From time to time it becomes interesting - what is there, on the other side of the wire) For example, try to render in the browser what I send there.
Started with an understanding of the DOM, how XMLHttpRequest works, how SVG is integrated, and how to draw on canvas.
In webasm and webgl I poked, but did not master it.
In the DIY front hobby, I settled on yarn for dependency management and rollup for assembly.

Answer 3

"Am I the only one" - no, all such complex configs and lines of code are not written by one person and not in one day. Plus there is a cognitive error that these lines are written by smart people - this may not always be the case and large sizes may not be justified
webpack - takes the project structure and represents it as a tree of files, goes through the files and divides them into different groups according to their extensions (js to one group, css to another) - and then applies its own set of changes to each group. All these plugins are needed for abstract convenience - the user (compressed files, styles available for all browsers, code available for old browsers, etc.) or the developer (logs, metrics, analyzers, etc.)
npm - well, yes, it is, with a large number of duplicates. In fairness, all open package managers are like this, depending on the activity of the language communities, the same pip in python or rust crates may resemble npm. Strong duplicates go away over time, because. a common community codestyle appears, where everyone tends to use only one library over time.
I would advise you to go from simple to complex - if you can skip a step, then skip it. for example, webpack comes pre-configured for many frameworks, you don’t have to touch it, some frameworks have a convenient CLI that makes it possible to immediately preinstall the most necessary libraries and not touch anything else there
Well, or you can do it differently - start with bare html-js-css and then gradually screw tools to them from above, at the same time understanding what they are all for