-
I wouldn't run on node, deno loads the dependencies from a url directly (no need to install that) a convention is to use a `deps.ts`[0] file. Also with node you will need quite a setup to run this project (if it could run), you will need ts-node, webpack or similar, etc, while deno comes with all that tooling included by default.
[0] https://github.com/lucacasonato/fresh/blob/main/src/server/d...
-
CodeRabbit
CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
-
If I understood correctly, it all renders server side and then adds the interactivity where it's necessary, and in a react app is kinda easy to spot which components are interactive or not, the biggest difference here, vs a traditional react framework, is that fresh is more similar to astro[0] than next.js/remix, so it ships less js.
What I read from other comments is that fresh does code splitting, so for example if the interactivity is out of your viewport and you scroll down to that element, it will then load the js required to make it interactive, while I find that idea cool, what worries my is that it could take a few ms to load the js and then other few ms to boot that component and render it interactive. But I don't have experience with any of the frameworks (besides next.js where I build a small demo project to try it out).
[0] https://astro.build
-
> That's just your choice of how to build your app, right? You could've avoided this by rendering templates on the server and sending static HTML to the client, keeping the business logic on the server.
No, that's a requirement on most business cases, my comment stated 'complex and dynamic web apps'. Re-rendering the whole page everytime the user checks a box or clicks a button is (a) terrible UX, (b) hard to track the state between page refresh, (c) wrong practice and (d) bad performance.
> Here's just one of ten-thousand other battle-tested options you can use: https://github.com/apache/thrift/
Sure, I should setup a complex and huge dependency for just one of the many problems I highlighted. What a great idea
-
I explored using client-side service workers for build-less deployment workflows a while back, but the blocker was the initial visit when the service worker hasn't been installed yet. Ended up using es-module-shim's fetch hook (https://github.com/guybedford/es-module-shims#fetch-hook) instead, which worked quite well.
I kept the demo repo around here, in case it's helpful to anyone: https://github.com/lewisl9029/buildless-hot-reload-demo.
The repo itself is quite out of date at this point, but my current project, Reflame, is essentially the spiritual successor: https://reflame.app/
Reflame has the same ideals of achieving the developer experience I've always wanted for building client rendered React apps:
- instant production deployments (usually <200ms)
- instant preview environments that match production in pretty much every imaginable way (including the URL), that can also be flipped into development mode for fast-refresh (for the seamless feedback loop we're used to in local dev) and dev-mode dependencies (for better error messaging, etc)
- close-to-instant browser tests (1-3 seconds) that enable image snapshot comparisons that run with maximum parallelism and only rerun when their dependency graphs change
-
I explored using client-side service workers for build-less deployment workflows a while back, but the blocker was the initial visit when the service worker hasn't been installed yet. Ended up using es-module-shim's fetch hook (https://github.com/guybedford/es-module-shims#fetch-hook) instead, which worked quite well.
I kept the demo repo around here, in case it's helpful to anyone: https://github.com/lewisl9029/buildless-hot-reload-demo.
The repo itself is quite out of date at this point, but my current project, Reflame, is essentially the spiritual successor: https://reflame.app/
Reflame has the same ideals of achieving the developer experience I've always wanted for building client rendered React apps:
- instant production deployments (usually <200ms)
- instant preview environments that match production in pretty much every imaginable way (including the URL), that can also be flipped into development mode for fast-refresh (for the seamless feedback loop we're used to in local dev) and dev-mode dependencies (for better error messaging, etc)
- close-to-instant browser tests (1-3 seconds) that enable image snapshot comparisons that run with maximum parallelism and only rerun when their dependency graphs change
-
The htmx library is a good way to do that: https://htmx.org
-
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
“The page remembers the click” was the original intent [0], but the latest version of React includes a feature called selective hydration [1] which can hydrate a component synchronously in response to an event if possible (i.e. without replaying the event). Naturally React itself has to be loaded for any of that to work.
[0] https://twitter.com/dan_abramov/status/1200118229697486849
[1] https://github.com/reactwg/react-18/discussions/130
-
-
Not really, Fresh already powers several websites https://deno.land/, so it definitely has production use.
-
If you need something a bit less esoteric and want a traditional, straightforward approach to building web apps with JavaScript: https://github.com/cheatcode/joystick.
Add an Express route -> tell it to render a component/HTML via a res.render() function -> it auto-hydrates everything on the client for you. Components are written in plain HTML, CSS, and JavaScript (no JSX or other funky syntax) with a quick-to-grok API.
No new concepts to learn and keeps you as close to the core technology (HTML, CSS, and JavaScript) as possible.
-
-
I recently wrote a small web app.
I started with https://alpinejs.dev/ linked via CDN, and OpenJSCAD, also linked via CDN - I wrote basic html, marked it up with alpine `x-model` and `x-data` tags, and sprinkled a little vanilla js on top. Everything worked well and I got 80% of the way through the project.
In the final 20% I ended up adding bundler, so I could bring in an scss framework and override its variables. While it added a fair bit of complexity to the project (dev dependencies, parcel config files) I gained lighter files via parcel's tree-shaking and minification, auto-recompilation/reload during development, and re-usable html partials via `posthtml-include`. I'm also set up to swap to typescript quickly, if the project gets more complex and I start to get annoyed with the lack of compile-time type checking.
So, it's 2022, and you can write a web app without any of the things you mentioned (transpilers, package managers, typescript). Yes, adding even one of them nets you a 100+ dependency node_modules directory - but the reason we keep adding them to our projects is the things it gives us are NICE, and the cost (complexity) is mostly worth it.
-
There is a 6-KB 0-build-step web framework Petite Vue by Evan You :https://github.com/vuejs/petite-vue. How is Fresh better that this?
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
Related posts
-
🔥I have launched a project and think it help you, maybe :)
-
A tale about migrating a 200 entries Gatsby blog untouched for 3 years to Astro
-
htmx vs. React: Choosing the right library for your project
-
Here are the 10 projects I am contributing to over the next 6 months. Share yours
-
VueJS turns 10 years old