ImHUI: Imgui-style library for the web using actual HTML output | Hacker News Reader

ImHUI: Imgui-style library for the web using actual HTML output

games.greggman.com

95 pointsingve25 comments

The library looks interesting, but the author's React code shows he doesn't have much experience using it. React provides a `useEffect` hook that lets you watch a value outside the react tree and update your components when it changes (or vice versa).

Once a value is passed down as props, you get all that reactivity for free.

Russian speaking segment of HN will be delighted

Just for those who don't know Russian: the name can be read as "I'm the dick".

Dick is somewhat softer word then the one implied.

Used that word as I am writing from Canada - country of liberals and democrats.

More strong connotations of that word are from vocabulary of our southern republican neighbor. Pronunciation is usually accompanied by trumpets and other pompous instruments :)

And to painfully spell it out, you have to code switch to read it that way: I[']m in English, then HUI as a transliteration of хуй.

Bulgarian too :)

https://en.wiktionary.org/wiki/Reconstruction:Proto-Slavic/x...

OMG! - Ok so "chuvat" (watch attentively in other slavic languages) seems related to "chuvam" (е.g. "listening attentively" in bulgarian). thank you!

If I understand immediate mode GUIs correctly, you basically redraw the UI every iteration of your (game) loop. How does that work in this case? Do you call these functions in a loop? Does it automatically remove the dom nodes at the end of every loop iteration? That seems quite wasteful, so I doubt that's what happens, but I'm curious to how it actually works.

Not sure how they actually work but I can imagine that it's not that bad in OpenGL, DirectX, Vulkan, etc. You can just fill a preallocated buffer with a certain capacity with the right data on the fly and send it to the GPU in one swoop. Should be fine for a couple of thousand of elements, as long as you don't invoke OpenGL commands for each individual elements, but only for the buffer containing all elements.

For html, it's probably much tougher since the DOM is statefull and fares badly with frame-wise changes to it. That might require caching elements to avoid layout invalidation and rebuilding the dom.

It can work much like React does, using dom diffing. You can run to collect virtual dom, diff, and update only what changed.

Immediate mode GUIs don't necessarily rerender all the pixels every loop iteration either. The thing that gets "redrawn" every loop iteration is the programmatic representation of what the UI should look like. Eg every iteration you say "draw a button of this size with this text, then draw a dropdown with this size, then if the button was clicked draw this else draw that, ..." . The library then compares what you want against what's already on screen, and renders the difference.

It reminds me of Visual Basic. I had fun creating front-end GUIs for batch files and Quake. I even had my program on PlanetQuake! Under the inspired name of "Quake Loader" I think. They gave me a little HTML I could put in the site. I even used VBScript to install the Quake font on Windows computers. Oh the things kids do.

Woah, cool to see Greggman on Hacker News. Between Polm and Greggman the Tokyo Indie game scene punches above its weight eh.

A HTML driven imgui sounds cool, I hope Gregg continues building it out.

Of course the irony is in running immediate mode logic through a retained mode UI model. In theory this should be a horrible x horrible idea. Yet I suspect, the results bare out, that web renderers manage.

imgui tends to get much love around here. i have to say, the most interesting aspect of the swift language ecosystem for me is swiftui. they really nailed declarative ui. the web should really steal that model.

I've heard opinions that SwiftUI is inspired by React.

Have you used react at all? Check out react + rxjs for a similar experience, add some typescript on top and it becomes even better!

I love rxjs but I wouldn't call it user friendly. It's essentially a text encoding of data flow programming and requires a totally different mental model to react. The explicit coding of time is great, but for most reactive js code react's own logic is simpler and more idiomatic.

For sure, dont mean to argue that point at all. I'm just saying the interface of swiftui is very much observables + a react like component setup, its pretty neat to see something like that coming from Apple

oh yeah, totally agree. I'm building a business based on observability and reactivity though so I'm biased ;)

Stencil, angular, vue with the class api are all delightfully declarative through decorators

I am enjoying browsing though the code of this. The way the author abstracts HTML elements has some appeal.

I'm not convinced this has a benefit over React et al. You could even render react 60 times per second and use only plain values not state if you think that will be beneficial. Virtual DOM and the incredible computing power in our devices will make it work.

I have never worked with real immediate mode gui toolkits though, so I may be missing something nice, e.g. about that sequential declaration style? Or that it feels even less taxing to reason about than react?

Never expected the retained vs immediate mode debate to pop up in this way, but neat.

So, Basically an HTML, CSS Engine based on Imgui using Virtual DOM concepts. Interesting

Reply on news.ycombinator.com