3 ms·

OP here. Your comments are helpful so far. To clarify some things: I know how a website works (HTML/CSS/JS, even with PHP & MYSQL or Node and a database) so I t

by Hbruz0 4y ago

OP here. Your comments are helpful so far. To clarify some things: I know how a website works (HTML/CSS/JS, even with PHP & 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've used browserify before and I thought it was "hacky", is this similar to how things are done usually ? Thanks for your replies, I have seen great resources linked in the comments

acemarke 4y ago
Yeah, one of my "How Web Apps Work" posts covers much of this question: https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-client-dev-deployment/ https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-... Quick sequence walkthrough, for the typical "Client-Side Rendering (CSR)" scenario: - Ahead of time, on a developer build system: the original app source code is run through a full compilation process, including stripping out types, processing assets like images and CSS, bundling the hundreds/thousands of original source files into a handful of merged files to minimize downloads, and minifying it to shrink download size. (Once upon a time this was done with Browserify. Today, it's typically a build toolchain based around Webpack, such as Create-React-App, Next.js, or the Angular CLI, or a similar toolchain using tools like newer / faster tools ESBuild or SWC.) - These "static files" are deployed to some web server system, and the server software waits for a user to request that page. - Browser requests a site for the first time. Server returns a small HTML page that has links to the primary page CSS, and the pre-built JS app bundle files. - Browser loads the JS, and the client-side app code bootstraps itself. It attaches itself to a given DOM node (usually an empty div that just acts as a placeholder), and does an initial render, generating all of the initial DOM content as it works through the component tree - Now that the UI is initialized, the UI framework waits for user interactions, at which point it applies state updates, checks to see what the UI should look like _now_ based on the component tree, and efficiently updates the DOM to match the desired results. There's also "Static Site Generation (SSG)", where the same React/Vue/Angular/Svelte UI components can be used to generate plain HTML files ahead of time, and "Server-Side Rendering (SSR)", where those same UI components can be used to render HTML as a string on the server on demand in response to a page request.

by Hbruz0 4y ago

acemarke 4y ago

Yeah, one of my "How Web Apps Work" posts covers much of this question: https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-client-dev-deployment/ https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-... Quick sequence walkthrough, for the typical "Client-Side Rendering (CSR)" scenario: - Ahead of time, on a developer build system: the original app source code is run through a full compilation process, including stripping out types, processing assets like images and CSS, bundling the hundreds/thousands of original source files into a handful of merged files to minimize downloads, and minifying it to shrink download size. (Once upon a time this was done with Browserify. Today, it's typically a build toolchain based around Webpack, such as Create-React-App, Next.js, or the Angular CLI, or a similar toolchain using tools like newer / faster tools ESBuild or SWC.) - These "static files" are deployed to some web server system, and the server software waits for a user to request that page. - Browser requests a site for the first time. Server returns a small HTML page that has links to the primary page CSS, and the pre-built JS app bundle files. - Browser loads the JS, and the client-side app code bootstraps itself. It attaches itself to a given DOM node (usually an empty div that just acts as a placeholder), and does an initial render, generating all of the initial DOM content as it works through the component tree - Now that the UI is initialized, the UI framework waits for user interactions, at which point it applies state updates, checks to see what the UI should look like _now_ based on the component tree, and efficiently updates the DOM to match the desired results. There's also "Static Site Generation (SSG)", where the same React/Vue/Angular/Svelte UI components can be used to generate plain HTML files ahead of time, and "Server-Side Rendering (SSR)", where those same UI components can be used to render HTML as a string on the server on demand in response to a page request.