I have published Kilua 0.0.1 - the first public release of my new compose powered web framework for ...

# compose-web

[Robert Jaros]

I have published Kilua 0.0.1 - the first public release of my new compose powered web framework for Kotlin/Wasm and Kotlin/JS.
Kilua allows you to:
• Use powerful Compose programming model and state management to develop web applications.
• Compile the same application code for Kotlin/Wasm and Kotlin/JS targets.
• Create fullstack applications with companion Kilua RPC library.
• Deploy your application with full SSR (Server Side Rendering) for better SEO performance and user experience.
More information can be found at https://github.com/rjaros/kilua
Any feedback is welcomed 🙂
Slack Conversation

[David Herman]

Congratulations, Robert. An initial release is a huge milestone! Kilua already looks very ambitious, and I'm excited to watch it evolve.

[Luca]

@Robert Jaros Would you expect any difficulties adding another module for ssr with kilua for this example duplicating the webApp module, if I want to try it out? https://github.com/luca992/KMP-App-Template

[Robert Jaros]

Kilua SSR is based on dedicated routing component (it's a modified version of routing-compose). This template app is using shared navigation with Voyager, so it would need to be somehow re-implemented.

[Robert Jaros]

And of course a server module needs to be added, to launch the SSR engine, because currently it's a frontend-only project.

[Robert Jaros]

Last but not least, Kilua is already on Kotlin 2.0. It's probably incompatible with 1.9 based project.

[Luca]

Cool so basically I could split the navigation out into the frontends. And then add the server 👌

[Luca]

I've updated a more extensive fork of this to 2.0 already so shouldn't be a problem

[Robert Jaros]

So just let me know if you need any assistance 🙂

[Luca]

Think the same tailwind config will work how it is? Or I will need to do things differently?

[Robert Jaros]

CSS will be an issue too, I'm afraid. For optimal user experience, CSS should be put directly into html pages rendered by SSR and extracted from JS bundle. Kilua do this automatically for its built-in styles (e.g. from bootstrap module). But it will not work out of the box for tailwind.

[Robert Jaros]

I'm not sure what this tailwind config does.

[Robert Jaros]

An alternative could be to include tailwind directly into <style> element in the index.html and not with Kotlin code.

[Luca]

are you referring to my use of:

@JsModule("./globals.css")
external val cssFile: dynamic

That’s the only way I could get tailwind to actually work. I think it gets stripped by webpack if it’s not used in the code because tailwind uses sideEffects or something.. Honestly I’m not a web-dev expert so it’s all very confusing.

[Robert Jaros]

I haven't used tailwind so I'm not an expert also. But it will for sure require additional work and configuration.

[Robert Jaros]

A quick search on google tells me it's not trivial to setup SSR with tailwind even in pure JS world 🙂 Frameworks have dedicated support for this.

[Robert Jaros]

I will try and play a bit with tailwind to see how it could be managed.

[Luca]

sweet. Yeah lmk. I don’t care if it’s tailwind, but isn’t a theming/styling library like tailwind or bootstrap pretty standard in webdev to not have to style a site from scratch in pure css?

[Luca]

like the equivalent of the material3 library for android

[Robert Jaros]

I'm a bootstrap user for a long time, and Kilua has nice bootstrap module 🙂 But tailwind support would be nice as well.

[David Herman]

Just curious, how does CSS work when you're targeting Wasm?

[Robert Jaros]

Kotin/WasmJs compiler produces both wasm and js bundle.

[Robert Jaros]

External js files from npm libraries and css are packed into js file just like with K/JS target.

[David Herman]

Is css ever referenced from within the Wasm js target?

[David Herman]

(my understanding of wasm which could be very wrong is that it is kind of a sandbox separate from HTML/css dom structures)

[Robert Jaros]

It's probably true when it comes to pure wasm. But Kotlin/Wasm generates also some bridge code, which gives you access to JS environment.

[Robert Jaros]

When you use external types in Kotlin, it's all "auto-magically" connected to JS env.

[David Herman]

Interesting, didn't realize that. Thanks!

[Robert Jaros]

@Luca Tailwind module for Kilua is available in 0.0.2. SSR is working as well.

[Luca]

@Robert Jaros sweet! I’m going to try it out soon 🙌