console

Not a serious test, but I tried M2.5 briefly in OpenCode on a very simple task equivalent to the last commit or two here[0] and it was really, really bad. This is a 250 line self-contained standalone script and what it does is very simple. M2.5 would have required far more detailed prompting to get me the result Opus 4.6 can do with the vaguest hints. [0]: https://github.com/oxidecomputer/console/pull/3070/commits

This is really cool! I have something similar just for checking out PRs in a single bash function, powered by gh and fzf: function ghpr() { gh pr list --limit 100 --json number,title,updatedAt,author --template \ '{{range .}}{{tablerow .number .title .author.name (timeago .updatedAt)}}{{end}}' | fzf --height 25% --reverse | cut -f1 -d ' ' | xargs gh pr checkout } Screenshot: https://github.com/oxidecomputer/console/assets/3612203/2805...

The console is open source, and you can try a demo of it in your browser https://console-preview.oxide.computer/ https://github.com/oxidecomputer/console I also wrote up a blog post walking through me setting up a server by hand: https://steveklabnik.com/writing/using-the-oxide-console You can also use the API, there's a terraform provider, etc.

I've used Storybook during development for a while now and the use case you present is how the Storybook is usually pitched. I actually agree about the simplicity of discovering the components. What I disagree with, though, is that I can't see the value of "develop & test your UI independently from your app" part. It forces me to decouple the state from a component and this in turn adds unnecessary complexity to the architecture. I'm going to use Oxide console [1] as an example because it has a really good setup of MSW + OpenAPI autogenerated mocks (which means that it doesn't need any complete running backend, just a defined contract). Consider this fairly simple page [2]. If I'm using the Storybook pattern, I'm keeping all of the state outside of the component, which means I now have to manually memoize every single variable defined bef

Yeah, I would say using components (rather than classes with @apply, as another commenter said) is the main thing. The class clutter is then contained to that component. You make some components and then in most of your code there are only a few classes here and there. Here's an example from my main work app: Components: https://github.com/oxidecomputer/console/blob/da07ce01a8fb7f... Clean call site: https://github.com/oxidecomputer/console/blob/da07ce01a8fb7f...

SPA mode (what I assume you mean by BFF mode) is brand new, so almost nobody has used it. However, a close example would be the Oxide web console, which we build as an SPA because we want to serve it as static assets from a Rust backend. It's very close to your suggested stack: React + React Router + Tanstack query + zustand, though importantly we also use React Router's loaders to give the app a better-than-SPA feel on navigations. I do plan on moving it to Remix SPA mode when I get a chance, but like I said the result should be very similar so it's not that high a priority for me. If I were starting from scratch I'd probably use Remix SPA. Repo: https://github.com/oxidecomputer/console/ Live demo here with in-browser MSW mock API: https://oxide-console-preview.vercel.app

Yeah, basically. We do it with a function call where the argument to the function is that interface representing all the API endpoints. `makeHandlers` handles parsing path params, query params, and request body and passes them to each endpoint handler. So the runtime validation of request bodies is also generated — we generate a zod schema for each request body in the OpenAPI definition and use it to parse the actual request body that comes in. So it's not just a generated interface — there is also generated runtime behavior that is endpoint-specific. big function call https://github.com/oxidecomputer/console/blob/bd65b9da7019ad... automatic body parsing and argument passing: https://github.com/oxidecomputer/console/blob/bd65b9da7019ad... When an endpoint gets added to the spec, we can rerun the generator and get type errors in the `makeH

We more or less did that too. We generate typed wrappers for every handler, and then we manually implement the internal logic for each endpoint. I doubt reliably generating 100% of the logic is possible, but even if it is, I would guess it's more work to do that than to do it manually. Generator: https://github.com/oxidecomputer/oxide.ts/blob/64401fa2/gene... Generated output: https://github.com/oxidecomputer/console/blob/8e74accf/libs/... Manually implemented endpoint behavior: https://github.com/oxidecomputer/console/blob/8e74accf/libs/...

At my job we've found working with MSW + OpenAPI to be near miraculous. I work on a web frontend and do most of my development against a mock API powered by MSW. This live preview runs against the mock API running fully in-browser. https://oxide-console-preview.vercel.app More details: https://github.com/oxidecomputer/oxide.ts https://github.com/oxidecomputer/console https://oxide.computer/podcasts/oxide-and-friends/1426644 Really excited about this next step for MSW — we'll be upgrading soon. Building on web standards buys you so much. (Reposted at top level because the parent got flagged.)

Sure, it's a lot of fanfare, but at my job we've found working with MSW + OpenAPI to be near miraculous. I work on a web frontend and do most of my development against a mock API powered by MSW. This live preview runs against the mock API running fully in-browser. https://oxide-console-preview.vercel.app More details: https://github.com/oxidecomputer/oxide.ts https://github.com/oxidecomputer/console https://oxide.computer/podcasts/oxide-and-friends/1426644