https://kotlinlang.org logo
Join Slack
Powered by
can i manipulate the dom with kotlin wasm? is ther...
# webassembly
c
can i manipulate the dom with kotlin wasm? is there a signal based framework in the style of solid for kotlin wasm? or is it possible to create one with the current apis?
r
Yes. Sure you can manipulate DOM. My Kilua framework is doing that (though it's not signal based but compose runtime based). You can check https://kilua.dev
c
is there an architectural overview how it works? or what classes should i look at to see how it works?
also is there an example of a complex web app with sourcecode that uses it?
r
It's works like all other compose based frameworks - the node tree is managed by compose runtime and composable functions. In this case it's a tree of components which are wrapping dom elements.
There is a 
realworld
example app in the 
examples
directory based on https://github.com/gothinkster/realworld project.
I've built more complex apps, but they are unfortunately not open source.
c
i wonder what are the performance considerations of compose vs signals.
r
I would bet compose is slower. There are still many performance issues when it comes to managing a large number of nodes. But there are improvements with every release.
c
so how would i build a signal based component framework prototype? what libraries are essential?
r
I have no idea. It's too much JavaScript for me 😉
c
hehe. I really like typescript as language but I don’t like the ecosystem
r
c
thanks!
it would be great to see kotlin results for something like this: https://krausest.github.io/js-framework-benchmark/current.html the fastest wasm framework there seems to be this: https://rustwasm.github.io/docs/wasm-bindgen/ (I just searched for wasm on the page, maybe there is a faster framework that does not have wasm in the name)
do you know why idea shows the gradle tasks not for each example but for the top level examples? is that an idea bug?
r
I don't know. I'm used to using command line for gradle.
c
sorry better screenshot:
how do i run the wasm version of the real world example?
r
./gradlew -t :examples:realworld:wasmJsRun
and open http://localhost:3000 in the browser
The app is configured to use https://realworld-backend-micronaut.onrender.com/ backend, which seems to be down at the moment
I've just found out the realworld project is eol 😞 https://github.com/gothinkster/realworld/issues/1611
So there will be a problem to find a usable api backend.
c
maybe just include a mock backend written in kotlin jvm?
r
I'll have to think about it
c
how would something like https://github.com/shadcn-ui/ui work with kilua?
r
I'm not sure it's possible - I think these are components for React.
c
yes but they have been ported to all frameworks. basically its frameworks that you copy to your project as source, and then change them to look how you want them to look, to avoid having to make everything configurable. its very widely used for example openai uses it on its sites.
r
I can't find anything about frameworks other then React. The FAQ states: 
You can use any framework that supports React. Next.js, Astro, Remix, Gatsby etc.
c
r
So probably the components could be ported to Kilua as well (it's basically all html, js and css, right? 🙂), but that would be really a lot of work.
c
i think its more a philosopy or a pattern than a lib. the different versions use different component libs
r
I think https://franken-ui.dev/ is something, that could be fairly easy integrated with Kilua and looks similar to shadcn.
If you want to talk more about Kilua, please join #C06UAH52PA7 channel. This is probably not the right place to discuss a single project.
23 Views
Open in Slack
PreviousNext
Powered by