TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Ask HN: Can you help me understand modern web development?

10 点作者 Hbruz0大约 3 年前
I&#x27;m asking here because I think I&#x27;ll get replies from individuals who love simplicity &amp; effectiveness.<p>I&#x27;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 &amp; send them to the client but can&#x27;t understand how&#x2F;why you&#x27;d need a nodejs library that will provide some <i>frontend</i> functionalities. I sometimes work with &quot;web3&quot; libraries (don&#x27;t hate me) and it seems like I can&#x27;t do anything in vanilla js. How does it work ? How do frontend frameworks work ?<p>Example: In the quickstart of web3-onboard [1], the first lines are used to import node modules (which can&#x27;t be done in the browser) and then awaits some user action (that presumably take place in the browser) ... in the same file ?!<p>[1] : https:&#x2F;&#x2F;github.com&#x2F;blocknative&#x2F;web3-onboard#quickstart<p>Thanks a lot

5 条评论

acemarke大约 3 年前
I&#x27;m not quite sure I entirely follow the question, but I&#x27;m happy to try to answer (and also chat more directly over in the Reactiflux Discord where I usually hang out, if that&#x27;s easier - <a href="https:&#x2F;&#x2F;www.reactiflux.com" rel="nofollow">https:&#x2F;&#x2F;www.reactiflux.com</a> , can ping me @acemarke in a channel like #general-tech ).<p>I&#x27;m sort of wondering if part of the confusion is seeing the name `node_modules`.<p>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.<p>_However_... in today&#x27;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.<p>So, think of the `node_modules` folder not as strictly &quot;a place to install packages that only run under Node&quot;, but rather &quot;a place to install _all_ packages used in this JS project, of any kind&quot;.<p>As an example: the React library is normally used for client-side rendering. If I do `npm install react`, it will get extracted to `.&#x2F;node_modules&#x2F;react&#x2F;`. I then do `import React from &quot;react&quot;` 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.<p>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 &quot;react&quot;` in server-side code too.<p>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&#x2F;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.<p>You might want to read through my &quot;How Web Apps Work&quot; series to see how some of these different pieces come together:<p><a href="https:&#x2F;&#x2F;blog.isquaredsoftware.com&#x2F;series&#x2F;how-web-apps-work" rel="nofollow">https:&#x2F;&#x2F;blog.isquaredsoftware.com&#x2F;series&#x2F;how-web-apps-work</a>
supermatt大约 3 年前
&gt; but can&#x27;t understand how&#x2F;why you&#x27;d need a nodejs library that will provide some frontend functionalities<p>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.<p>&gt; How does it work ?<p>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&#x2F;entrypoints in some way).<p>i.e. it allows you to create your code in a structured way, but then &quot;bundles&quot; up the code in a way to run it in the browser.
lmiller1990大约 3 年前
I tried to explain a bit about how we came from a single index.js to the modern workflow work webpack etc in this video, maybe it’s useful for you: <a href="https:&#x2F;&#x2F;m.youtube.com&#x2F;watch?v=QliwSwWHJoQ" rel="nofollow">https:&#x2F;&#x2F;m.youtube.com&#x2F;watch?v=QliwSwWHJoQ</a>
Hbruz0大约 3 年前
OP here. Your comments are helpful so far. To clarify some things: I know how a website works (HTML&#x2F;CSS&#x2F;JS, even with PHP &amp; MYSQL or Node and a database) so I think my main confusion comes from frontend frameworks like React, Angular, Vue etc. Are they run on the server then the rendered version is sent to the client ? I&#x27;ve used browserify before and I thought it was &quot;hacky&quot;, is this similar to how things are done usually ? Thanks for your replies, I have seen great resources linked in the comments
评论 #31251162 未加载
dantate大约 3 年前
Do you want to know about development or how a website works from the ground up. It sounds like you&#x27;re confused in a few places.