I'm lost when it comes to frontend frameworks like react and some nodejs libraries. I understand the need to run some things on the server & send them to the client but can't understand how/why you'd need a nodejs library that will provide some frontend functionalities. I sometimes work with "web3" libraries (don't hate me) and it seems like I can't do anything in vanilla js. How does it work ? How do frontend frameworks work ?
Example: In the quickstart of web3-onboard [1], the first lines are used to import node modules (which can't be done in the browser) and then awaits some user action (that presumably take place in the browser) ... in the same file ?!
[1] : https://github.com/blocknative/web3-onboard#quickstart
Thanks a lot
I'm sort of wondering if part of the confusion is seeing the name `node_modules`.
The `node_modules` folder _was_ originally created as the place for the NPM package manager to install packages that were, yes, _only_ for use inside the Node JS runtime.
_However_... in today's development world, _all_ libraries your app depends on, both for building the project _and_ for runtime behavior, get installed into the `node_modules` folder of a project. That includes libraries that _only_ run under Node, libraries that _only_ run in a browser, and libraries that can be used on either side.
So, think of the `node_modules` folder not as strictly "a place to install packages that only run under Node", but rather "a place to install _all_ packages used in this JS project, of any kind".
As an example: the React library is normally used for client-side rendering. If I do `npm install react`, it will get extracted to `./node_modules/react/`. I then do `import React from "react"` in my client-side only code, and a bundler like Webpack will end up adding the React library code to my final generated browser JS bundle when I run the build step.
On the other hand, you can _also_ use React on the server side as well, such as pre-generating HTML while handling an HTTP request, and you would again do `import React from "react"` in server-side code too.
At the same time, the Lodash utility lib (which is generic JS code that can be used anywhere) and the Webpack bundler (which is a build/dev-time only tool) would _also_ all get installed to their respective folders in `node_modules`, along with any other libraries they themselves depend on.
You might want to read through my "How Web Apps Work" series to see how some of these different pieces come together:
NPM (node package manager) is a bit misleading here as they arent necessarily modules FOR node. They are often just javascript modules (usually in commonJS format) conforming to the NPM package format.
> How does it work ?
The files, including your code and the referenced modules and their dependencies (usually) go through a build step (using 3rd party tools), which creates a single (but can be multiple) file containing (effectively) a map of all the bundled files and a function to handle the module loading. This file is then run in the browser (which will either execute the program, or expose the programs API/entrypoints in some way).
i.e. it allows you to create your code in a structured way, but then "bundles" up the code in a way to run it in the browser.