trunk VS vike

Trunk is a WASM web application bundler for Rust. Trunk uses a simple, optional-config pattern for building & bundling WASM, JS snippets & other assets (images, css, scss) via a source HTML file. - Trunk

Note that Leptos uses Trunk to serve the client side application. Trunk is a zero-config Wasm web application bundler for Rust.

I've been using Rust and WASM for my latest front-end project, and I think this setup is a viable alternative to commonly used JS frameworks for those willing to put in some effort to ramp up on new technology. Addressing the concerns from the article:

"No universal import system" - Rust has it's own module system and Cargo is used for managing dependencies, no need to worry about different module systems.

"Layers of minification, uglification, and transpilation." Just compile Rust to WASM file for the browser, same as using any other compile target.

"Wildly different environments." Something that you'll still need to deal with. Some runtime dependencies are system-specific (code running on the browser usually needs access to Web APIs, and JavaScript, code running on the server can't access WebAPIs but can access the system clock and filesystem. Sometimes separate libraries or separate runtime configs are needed (e.g. configurable time source)

"Overemphasis on file structure." Not a problem for imports, but you may still have file structure dependencies things like CSS, image resources etc.

"Configuration hell." Pretty much non-existent once you have your Rust compiler setup locally.

"Development parity." Just use trunk: https://trunkrs.dev/, to watch, build and serve, config is minimal.

Trunk, the Rust-equivalent of Webpack & Vite, comes with tailwind built-in. You heard that right! You don't even need to install the tailwind CLI via npm or something like that. No more package.json! <3

Can you not use dioxus with "trunk" (https://trunkrs.dev/) ?

Thanks a lot! As I said in an earlier comment, building this allowed me to explore a lot of features of rust like Traits, Dynamic Dispatch, Pattern Matching, Const evaluation, Static variables, etc. and that on top of that trying to figure out how to conveniently port it to WASM was also a nice learning experience. I am currently using trunk as a bundler which ties in neatly with a GitHub action but before that, I tried cargo-run-wasm, which felt a little hacky. So overall a whole lot of learning.

Here here. I don't think programmers - as a group - get to complain about people not learning programming tools while simultaneously making them so unapproachable (especially Linux things).

It's not just the overuse of acronyms. There's also:

* Religious devotion to the CLI despite it having terrible discoverability.

* Really bad naming. Git is probably the worst offender at this, but the whole of Unix is a naming mess. WTF is `usr`? Is that where user files go?

* Generally over-complicated tooling. A good example of this is Node/NPM. So complicated to set up! Contrast it with https://trunkrs.dev/

* Deification of distro packages. No I do not want to spend half of my development time packaging my app for 10 different distros. I guess I'll go with curl | bash then.

* Distain for binary app distribution. I'm looking at you glibc.

I used Notan for drawing the game board in combination with the excellent egui for adding UI elements. It was surprisingly easy to bring it to web with Trunk.

Hi, the author of MailCrab here :-) Yew is nice, especially if you enjoy writing Rust. However, it definitely takes more time and dedication than writing a frontend in React, Vue etc. Yew and the surrounding ecosystem keeps improving, and it is way more usable than when I first tried it. The tooling I used (Trunk https://trunkrs.dev/) is very minimal with respect to the number of features compared to many of the popular web-bundlers (Webpack etc.) but it works well for most simple use-cases.

Yew is way way nicer in that regard because it uses Trunk which is very excellent and you don't have to deal with any of that really. Just trunk serve and away you go. Plus you get the advantage of not having to deal with Javascript. Typescript is nice, but it's no Rust.

Here are some collected notes of the distinctions between SSRx, Vinxi and Vike, to share with anyone else searching the web. Since my Google search came up empty, and I had to ask around on Twitter/X and GitHub to find out.

We're working on exactly this. You can already do this with Triplit but it's challenging to make an out of the box solution because each framework passes context/data different from server to client differently. There's a cool project called [Vike](https://github.com/vikejs/vike) that generalizes this pattern across SSR'd UI frameworks

Anyone have experience with https://github.com/vikejs/vike?

have you seen https://vite-plugin-ssr.com/ ? i've only browsed their docs, but AFAICT their pitch that it's a more DIY approach to a framework, where you keep a lot of control over how things are wired together.

I agree and, as the author of vite-plugin-ssr[1], that's what I recommend to my users: go for static whenever you can.

I think it's something every web developer should be aware of. Static is indeed a lot simpler than dynamic.

I've wrote more about it over here[2] (SSG = static, SSR = dynamic).

[1]: https://vite-plugin-ssr.com

Maybe vite-plugin-ssr? It's pretty unopinionated and doesn't get in your way.

Also have a look at https://vite-plugin-ssr.com/ (author here).

VPS is slightly lower level which gives you a lot more control: integrate with your existing Node.js backend (use any backend framework you want), deploy anywhere, use any React alternative (Solid, Preact, ...) and any data fetching tool (e.g. Relay can't really be used with Next.js).

The flip side is that you've to write a little bit more glue code. Although this will be alleviated by a lot with projects such as Bati[0], Stem[1], and vike-react (see Vike Rebranding[2]).

VPS also cares a ton about details, such as hooks for full control over i18n (use any i18n strategy you want), better Base URL support (VPS supports setting a different base for your server and your CDN), automatic deploy synchronisation, domain-driven file structure, polished and helpful error messages (especially the next upcoming release), ...

Detailed comparison with Next.js: [3].

If you run into any blocker then it's quickly fixed (or at least a workaround is proposed).

It supports not only SSR and pre-rendering, but also SPA in case you don't need SSR. It's going to support RSC but doesn't yet (RSC isn't ready for production).

Because it's lower level and because it's decoupled from React everything is designed in an agnostic way and with meticulous care. In other words: vite-plugin-ssr is becoming a robust foundation. There are breaking changes coming for the v1 release but beyond that chances are that there won't be any breaking change for years in a row.

In a nutshell: vite-plugin-ssr takes care of the frontend and only the frontend. You keep control over your architecture. (Whereas frameworks tend to put themselves right in the middle of your architecture restricting you in fundemetanl ways.)

Last but not least: it's powered by Vite which means blazing fast HMR.

[0] https://batijs.github.io

[1] https://stemjs.com/

[2] https://github.com/brillout/vite-plugin-ssr/issues/736

[3] https://vite-plugin-ssr.com/nextjs-comparison

Now by default, Vite doesn't do SSR. One way to do Vite+SSR is to use vite-plugin-ssr. You can scaffold an example project that does SSR based on some dynamic data:

vite-plugin-ssr