Settings

Theme

Show HN: Replacing HTML/CSS/JS with Rust

fui-rs-demo.effindom.dev

3 points by zionsati · 5 comments · 3 min read

Reader

I've previously launched FUI-AS (retained UI in AssemblyScript) as a browser-only canvas framework. However, the dream was always something substantially bigger. It's to have a retained mode UI framework for the web, native and iOS/Android with SDKs available in multiple languages.

This is the second slice of that dream.

FUI-RS (retained UI in Rust) now runs the same retained application model (via the same EffinDOM runtime as FUI-AS) in browsers (including mobile browsers, so it has extensive touch gesture support / event system) and as native desktop applications without embedding a browser, thus no Electron/WebView. Major OSes supported are Windows (D3D12), macOS (Metal) and Linux (Vulkan). Comes with packaging tools for their respective OSes too (MSIX, DMG and AppImage).

In the FUI-RS demo, have a play around to see and feel what a typical web app looks like with FUI-RS. Try: - VoiceOver on macOS (yes, we have extensive semantic roles / customization support in the SDK) - bring up the page inspector (Cmd/Ctrl+Shift+F12) and inspect the mirrored DOM elements - multiline text editor with the various options - password manager compatible text inputs - drag-drop reorder - external file drop site - worker with progress reporting - HTTP fetch (POST/GET demo) - Copy the rich text in the demo and paste it in a word doc - Immediate mode tab with real time graphs and interactive dancing yarn - A mouse painter canvas

There's also a virtual list that demos 100k rows. If you're on your phone, pinch to zoom, fling scroll, pull to refresh will work as usual too.

How's FUI-RS different?

In the UI land of Rust, FUI-RS fills a gap for people who want a clean modern fluent syntax that is unencumbered by HTML/CSS on the web as well as native apps (iOS and Android are definitely in my view), and want to code purely in Rust. The same Rust code that runs on the web browser also runs natively without Electron or WebView, giving you retained controls with persistent identity and state (you'd probably guessed by now I'm not a big fan of React along with its many fragmented state management libs).

Try it out via crates.io: https://crates.io/crates/cargo-fui

Cargo-fui scaffolds and builds web and native apps.

cargo install --locked cargo-fui cargo fui new my-app --target universal cd my-app cargo fui dev

There's also a community created Galaga game based on an early version of FUI-RS here: Galaga-RS - https://jatm80.github.io/galaga-rs/

FUI-RS repo: https://github.com/zion-sati/fui-rs/

2 threads
frabia

what's the benefit of UIs in the canvas with Rust, as opposed to HTML/CSS/JS?

  • zionsatiOP

    For a lot of front end devs, CSS/JS are frowned upon. We use it because we have to. In fact, we typically avoid JS by having TypeScript transpiled to JS. Not to mention CSS is still very inconsistent across the various browsers.

    Porting HTML/CSS/JS to native apps is another big problem, which is why we ended up with Electron/WebView. The amount of RAM it gobbles up just to run simple apps is pretty horrible.

    Why Rust? It's a strongly typed application language across browser and native. It also has a massive ecosystem and this allows us access to all of it.

    BTW canvas is only the renderer. There's a lot of engineering that went into making the canvas not a typical "canvas UI app". We have solved accessibility, touch gestures, direct/immediate draw etc.

    There's more reasons behind this if you're keen, I've written up a more comprehensive doc https://dev.to/zionsati/html-javascript-css-should-have-died...

    • frabia

      ts is superset of js, so I wouldn't say you avoid it. It's like saying you run to avoid walking.

      On the web, I get that CSS is not straightforward, and HTML is not the coolest technology, but by using the canvas you also lose a lot stuff that you need to rebuild from scratch: accessibility and interactivity, responsiveness, etc. So the only argument that I'd buy is that it has lighter & more performant UIs, which I get it might, given that the canvas uses the GPU, but is it worth the effort? Like, is it THAT much better?

      I get the argument of native apps though. I guess if you want to build one interface and serve it both as a web and native app, it could make sense.

      Edit: thanks for the link - I'll look it up. Also I didn't mean to sound too annoying. I'm starting to see UIs built in Rust but I'm still struggling to see the hype.

      • zionsatiOP

        Yeah all good. They're all good questions.

        My point around ts is people want strongly typed languages these days.

        The bigger problem with HTML/CSS is, when you're trying to do more sophisticated things (see the immediate drawing page on the demo), you'll find you need to use a canvas/HTML5. That then becomes a mini UI framework of its own...

        For simple webpages, HTML/CSS is probably still the best way to go. But I wouldn't say the same for webapps?

manyatoms

This is great!

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection