alt Hacker NewsShow HN: JavaScript web apps with WASM layout and GPU rendering in 280 KB
Over the past year, I have been working to find a better way to write cross-platform apps.
The problems I am trying to solve:
- Native frameworks only work on a subset of platforms, so a different implementation of the UI needs to be written per target. - They are updated at the same pace as the platform itself, which forces the developer to split the user base to be able to use new features, or wait a long time for bugs to get fixed. - They also force developers to use specific high-level languages, so they are not a good fit for apps with high performance requirements, like creative apps or games. - Cross-platform frameworks that rely on bundling a browser engine solve the problem of code reuse, but they inherit the limitations of HTML/CSS. - Those that take control over layout and rendering are not efficient and lightweight enough to be used on the web, and require the use of compiled languages.
Ideally, we would be able to bundle the UI framework directly with the application. This would allow developers to use new features and fix issues in the UI framework immediately. It would also allow ideas for improvements to compete in a natural way, rather than being decided by a committee.
Uniform is my idea for how we can solve these problems. This is the structure:
- A layout and rendering engine written in C, compiled to WASM on the web and native code on all other platforms - A JavaScript API where each function call gets forwarded directly into the core, for best performance and efficiency - A native runtime (<2 MB) that makes it possible to run the same JavaScript code on macOS and iOS (more platforms to come). The runtime can also generate packaged apps to upload to app stores. The packaging steps are also described in JS.
Uniform supports very fast iteration cycles via hot-reload on all platforms. Even on iOS, the JS source code of an app can be changed while the app is running. Changes are visible on the next display refresh. No connection to a computer or the internet is required. Apps can be written from scratch on a phone, with native performance.
The readme in the linked repository includes many examples and a detailed explanation of the core ideas. It is handwritten without any use of AI.
And here is a live demo: https://raffk.com/hn-demo/
It should work in any browser that supports WebGPU. (To get 120 Hz support in Safari, the “Prefer Page Rendering Updates near 60fps” feature flag needs to be disabled.)
Comments
What this needs is a demo of something that you can't do natively in a browser. Recreating HN is great, but it shows why it's not as good as HTML+CSS (slower, bigger, no native browser features). This sort of project has the potential to really demonstrate the power of WASM and WebGPU, but in something that's not a game.
You say frameworks "inherit the limitations of HTML/CSS", so show something that can be done when you don't have those limits.
Why doing something that looks like a web page... inside a web browser that can do it natively? I guess that seeing the same this as a standalone application would be much more impressive (if I understand well, that's what it is supposed to do?). As a demo in a browser I'd rather expect a "regular" GUI with buttons, fields, scrollable sections, radio buttons, etc.
This said, not sure why, but loading it takes ages.
I have been dreaming about this for ages, ditching the DOM and building everything in WASM for example. This is insanely great.
This is a good experiment. What does it take to have a wasm powered corss platform architecture for apps. So far tauri had done something, but requires a humongous backend (system webview).
If we can reach this goal in under 1mb or 2, this is a massive improvement to the SoTA. Experiments such as these are what get is there. kudos.
Cool hack. But taking a step back:
Why did you write a layout and rendering engine to run on a browser, which is a layout and rendering engine already? As socalgal2 points out, you’re losing many important features.
The name seems very un-searchable and already overused (I found several other web Uniforms while testing searching for yours, which I didn't find). The demo seemed low framerate or something on Chrome Android, and apparently my main, Firefox Android, doesn't support WebGPU by default.
That's exactly what companies want: truly closed-source website.
Very nice demo! I love these type of optimizations
[flagged]
The problem here is all the OS features are discarded. Can't insert password from password manager because to do so the page would need to access to passwords. Can't use the user dictionary because to do so would be a privacy issue. Doesn't support CJK and other languages that require an input method editor. etc....
It also means a platform's features are not duplicated so your app's behavior sticks out as having a different experience from everything else the user does making it frustrating.
That said, if you want see an app in WebGL/WASM where the browser is rendering everything there's https://earth.google.com as a high end example. It has most of the issues just mentioned as well as the fact that nothing is selectable by default. Want to copy a name so you can paste it into your search engine of choice. NO! Want to right click on a foreign name to find out how to pronounce it? NO! etc....