Fresh – The next-gen web framework

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • fresh

    The next-gen web framework.

    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...

  • astro

    The web framework for content-driven websites. ⭐️ Star to support our work!

    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

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • Apache Thrift

    Apache Thrift

    > 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

  • es-module-shims

    Shims for new ES modules features on top of the basic modules support in browsers

    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

  • buildless-hot-reload-demo

    Experimenting with hot reload for workflows without build steps

    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

  • htmx

    </> htmx - high power tools for HTML

    The htmx library is a good way to do that: https://htmx.org

  • solid-site

    Code that powers the SolidJS.com platform.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  • react-18

    Workgroup for React 18 release.

    “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

  • lit

    Lit is a simple library for building fast, lightweight web components.

  • deno

    A modern runtime for JavaScript and TypeScript.

    Not really, Fresh already powers several websites https://deno.land/, so it definitely has production use.

  • joystick

    A full-stack JavaScript framework for building stable, easy-to-maintain apps and websites.

    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.

  • deploy_feedback

    For reporting issues with Deno Deploy

  • Alpine.js

    A rugged, minimal framework for composing JavaScript behavior in your markup.

    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.

  • petite-vue

    6kb subset of Vue optimized for progressive enhancement

    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?

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts