Create web app with shadow-cljs and Svelte

Greetings everyone!

I found Svelte very interesting and started to experiment it with ClojureScript. For those who don’t know, the elevator pitch of Svelte is:

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Based on @thheller 's next-cljs, I created a hello world example in the link down below. Currently, this example can only spit out a static app (i.e., no reactivity, no props, and no states.) The approach is to use shadow-cljs’s build-hook to generate the *.svelte stub files that invoke the cljs functions.

The reasons for this post is to discuss:

  1. Are Svelte and ClojureScript a good fit?
  2. What is a good approach to building a ClojureScript Svelte web app (presumably with shadow-cljs)?
  3. Any feedback/idea?

Links

1 Like

For what I can think of:

Are Svelte and ClojureScript a good fit?

I think so. ClojureScript apps tend to have larger bundle size because we need to include the cljs. The bundle size of a Svelte app is usually smaller and it doesn’t require the overhead of virtual DOM.

What is a good approach to building a ClojureScript + Svelte web app?

N/A

Any feedback/idea?

N/A

No, not at all. Svelte very much relies on mutable JS interop that can be analyzed at compile time to add its “magic”. Idiomatic CLJS code will look nothing like the code Svelte is looking for or even able to handle.

There are however some fantastic ideas in Svelte and some of them I definitely plan on integrating in my experiments I started a while ago. Combining this with some of the good ideas in React it should be possible to build something CLJS native that offers a bunch of nice features over just using a wrapper over external JS libs. I very much plan on continuing that work in the future.

4 Likes

Thanks for sharing the project! I didn’t know much about the compile time magic svelte does, so thanks for pointing out.

Thank you for trying it!