6 ms·

So basically Deno has its own bundler that lets you not have a local build step and it gets bundled dynamically per-route as requested by users, right? This is

So basically Deno has its own bundler that lets you not have a local build step and it gets bundled dynamically per-route as requested by users, right? This is very different from industry standards and possibly has many new concerns from devs, none of which are addressed in the article since it's treating the system as a perfect solution, which makes sense since it's a marketing page ("content marketing"). If it was a 3rd party article, I'd be interested in things like: - How do you measure bundle size and make sure it remains small? (e.g. make sure that a PR doesn't accidentally import a massive dependency) - How do you measure bundling speed/performance, does it add significant time to the first request? To subsequent requests? Is it linear, exponential, etc. with the number of LOC? Again like in the previous point, how do we make sure there are no regressions here? - How does this work, well, with absolutely anything else? If I want my front-end in React? Vue? etc.

mattlondon 4y ago
From the article: "Fresh renders each page on the fly and sends only HTML" So the bundle size is zero.
- kamikaz1k 4y ago
  Fresh supports islands, so it also does send JavaScript for the interactive bits. If you have a react (default is preact) island then that'll be bundled and sent down.
- IncRnd 4y ago
  > unless an Island is involved, then only the needed amount of JavaScript will be sent as well It's not just HTML but also JS that gets sent.
deleted 4y ago
[deleted]
brundolf 4y ago
It sounds like (it is a little vague) there is no bundling at all, the only thing Deno does magically at request time is transpiling TypeScript/JSX to browser-compatible JS. Beyond that I think the idea is it relies on native ES module imports (and import-maps), both of which are browser standards
- doodlesdev 4y ago
  > Transpiling TypeScript/JSX to browser-compatible JS. Which is another way to say it's a form of compilation..... [0] [0]: https://en.wikipedia.org/wiki/Source-to-source_compiler https://en.wikipedia.org/wiki/Source-to-source_compiler
  - brundolf 4y ago
    Yes, but it's distinct from bundling, which is what most of the GP's concerns were around.
- onion2k 4y ago
  both of which are browser standards ES modules have great support but import maps don't. Your website won't work on iPhones if you launch with them today. They're close though. Give it a month and it should work.
  - brundolf 4y ago
    Fair. I wonder if Fresh includes some kind of polyfill for those (or maybe the transpiler factors in which browser the current request is being made from?)
  - explaininjs 4y ago
    Based on https://www.digitalocean.com/community/tutorials/how-to-dynamically-import-javascript-with-import-maps https://www.digitalocean.com/community/tutorials/how-to-dyna..., aren't import maps a massive step back in the world of tree shaking? It would seem every export needs a dedicated file for it or else you get the whole world when you try to make a single request. (And better hope that single file doesn't import any other ones!)
    - brundolf 4y ago
      I might be missing something, but I'm not seeing how import maps are related to tree-shaking (of individual declarations within a module) Importing ES modules directly instead of bundling will probably mean you ultimately load more code, yeah, which is one reason bundling hasn't gone away. Though you get other benefits in exchange- more granular caching, free and very granular "bundle splitting" (every module is "split" and can be downloaded lazily or in parallel), on top of the simplified workflow. Will be interesting to see how popular each approach ends up being, with ES modules getting more attention lately! I think at this point people will only use something if a framework they like uses it, for better or worse, so I'm glad to see a framework that's representing this alternate way of doing things
KyleJune 4y ago
They are not using their own bundler. They are using esbuild at runtime to generate bundles for individual islands when the process starts up. Then they store those files in memory in a Map. When the bundle files are requested, it just pulls the copy that was generated at runtime. Here is a link to the source where esbuild is used. https://github.com/denoland/fresh/blob/main/src/server/bundle.ts#L87 https://github.com/denoland/fresh/blob/main/src/server/bundl... I personally think it would be better to bundle at deployment time so that the bundles don't need to be regenerated each time a new process starts up or on demand when a request comes in for one of the bundle files.
- falseassertions 4y ago
  Man the things that pass for innovation in the node-adjacent space continues to blow my mind. It feels like hte horrors of /r/programmerhumor meets generic internet hype-beast cycles.
  - moritzwarhier 4y ago
    What kind of innovation would you prefer? (removed snark) Web code is made of duct-tape, nothing new. Deno is a pretty big departure from Node in some respects as far as I can see. I admit I haven't used it, but if it keeps only half of its promises to simplify frontend bundling and compilation/transpilation, I think it's innovative.
  - agency 4y ago
    A poor craftsman blames their tools.
    - hinkley 4y ago
      Because a good craftsman picked his tools and knows it’s his fault if they’re garbage. This pattern of “thinking” pisses me right off. It’s an axiom about quality and avoiding deflection and it’s always used in a low-quality reply as a form of deflection. I can’t recall the last time I heard someone use that phrase the way it’s meant to be used.
andrewmcwatters 4y ago
Maybe this is before your time, but there have been runtime minifiers/“builders” in the past. I remember them in the PHP days. It’s not a new idea.
pier25 4y ago
> How does this work, well, with absolutely anything else? If I want my front-end in React? Vue? etc. It doesn't. Fresh uses Preact and that's it.

mattlondon 4y ago

From the article: "Fresh renders each page on the fly and sends only HTML" So the bundle size is zero.

kamikaz1k 4y ago
Fresh supports islands, so it also does send JavaScript for the interactive bits. If you have a react (default is preact) island then that'll be bundled and sent down.
IncRnd 4y ago
> unless an Island is involved, then only the needed amount of JavaScript will be sent as well It's not just HTML but also JS that gets sent.

deleted 4y ago

[deleted]

brundolf 4y ago

It sounds like (it is a little vague) there is no bundling at all, the only thing Deno does magically at request time is transpiling TypeScript/JSX to browser-compatible JS. Beyond that I think the idea is it relies on native ES module imports (and import-maps), both of which are browser standards

doodlesdev 4y ago
> Transpiling TypeScript/JSX to browser-compatible JS. Which is another way to say it's a form of compilation..... [0] [0]: https://en.wikipedia.org/wiki/Source-to-source_compiler https://en.wikipedia.org/wiki/Source-to-source_compiler
- brundolf 4y ago
  Yes, but it's distinct from bundling, which is what most of the GP's concerns were around.
onion2k 4y ago
both of which are browser standards ES modules have great support but import maps don't. Your website won't work on iPhones if you launch with them today. They're close though. Give it a month and it should work.
- brundolf 4y ago
  Fair. I wonder if Fresh includes some kind of polyfill for those (or maybe the transpiler factors in which browser the current request is being made from?)
- explaininjs 4y ago
  Based on https://www.digitalocean.com/community/tutorials/how-to-dynamically-import-javascript-with-import-maps https://www.digitalocean.com/community/tutorials/how-to-dyna..., aren't import maps a massive step back in the world of tree shaking? It would seem every export needs a dedicated file for it or else you get the whole world when you try to make a single request. (And better hope that single file doesn't import any other ones!)
  - brundolf 4y ago
    I might be missing something, but I'm not seeing how import maps are related to tree-shaking (of individual declarations within a module) Importing ES modules directly instead of bundling will probably mean you ultimately load more code, yeah, which is one reason bundling hasn't gone away. Though you get other benefits in exchange- more granular caching, free and very granular "bundle splitting" (every module is "split" and can be downloaded lazily or in parallel), on top of the simplified workflow. Will be interesting to see how popular each approach ends up being, with ES modules getting more attention lately! I think at this point people will only use something if a framework they like uses it, for better or worse, so I'm glad to see a framework that's representing this alternate way of doing things

KyleJune 4y ago

They are not using their own bundler. They are using esbuild at runtime to generate bundles for individual islands when the process starts up. Then they store those files in memory in a Map. When the bundle files are requested, it just pulls the copy that was generated at runtime. Here is a link to the source where esbuild is used. https://github.com/denoland/fresh/blob/main/src/server/bundle.ts#L87 https://github.com/denoland/fresh/blob/main/src/server/bundl... I personally think it would be better to bundle at deployment time so that the bundles don't need to be regenerated each time a new process starts up or on demand when a request comes in for one of the bundle files.

falseassertions 4y ago
Man the things that pass for innovation in the node-adjacent space continues to blow my mind. It feels like hte horrors of /r/programmerhumor meets generic internet hype-beast cycles.
- moritzwarhier 4y ago
  What kind of innovation would you prefer? (removed snark) Web code is made of duct-tape, nothing new. Deno is a pretty big departure from Node in some respects as far as I can see. I admit I haven't used it, but if it keeps only half of its promises to simplify frontend bundling and compilation/transpilation, I think it's innovative.
- agency 4y ago
  A poor craftsman blames their tools.
  - hinkley 4y ago
    Because a good craftsman picked his tools and knows it’s his fault if they’re garbage. This pattern of “thinking” pisses me right off. It’s an axiom about quality and avoiding deflection and it’s always used in a low-quality reply as a form of deflection. I can’t recall the last time I heard someone use that phrase the way it’s meant to be used.

andrewmcwatters 4y ago

Maybe this is before your time, but there have been runtime minifiers/“builders” in the past. I remember them in the PHP days. It’s not a new idea.

pier25 4y ago

> How does this work, well, with absolutely anything else? If I want my front-end in React? Vue? etc. It doesn't. Fresh uses Preact and that's it.