MicroFrontends with Svelte + SvelteKit

[vekunz]

MicroFrontends are a relatively new approach, where the concept of splitting a monolithic backend into microservices is brought to the frontend. Today we already split the Frontend into several components at development time, but at compile time these components are merged into one big Frontend. With MicroFrontends parts of the Frontend are outsourced into dedicated web service. The benefit of this is that each MicroFrontend can be developed and deployed independently from the others.

With client-side rendering, the browser can now fetch the JavaScript and CSS files for each MicroFrontend individually from each web service. But I think we all know the benefits of server-side rendering. Currently, there are several small libraries for MicroFrontends with server-side rendering, but they are not compatible with Frameworks like Angular, Next.js, Nuxt.js, or SvelteKit.

I think it would be a great benefit if SvelteKit supports MicroFrontends with server-side rendering out of the box.

If you still do not have any clue what MicroFrontends should be, there is a good website that explains the topic very good https://micro-frontends.org/.

[SamuelEarl]

I have not used this myself, but as I've been looking for a similar solution I came across this project from Namecheap: http://ilc.namecheap.technology/. If SvelteKit decides to support micro frontends out-of-the-box, then maybe they could borrow some ideas from this project.

[UltraCakeBakery]

I do not see how you can't already build microfrontends with svelte-kit... what kind of workflow are you looking for? I think this is one of those cases where a technology doesn't advertise itself as something even though it can facilitate that thing...

[tjvsx]

@BryceHayden I would be grateful for this if you have time. I did find these implementations - https://github.com/svelte-micro-frontends & https://github.com/Svelte-React-Vue-Angular-SPA - on the single-spa examples page as well

[BryceHayden]

Yeah I'll create a repo and share the link once I get it up.

[frederikhors]

@BryceHayden yes, please! Thanks!

[vekunz]

The point with single-spa is that it does all work in the browser, and not server-side rendered.

[BryceHayden]

Okay I threw this together quickly so hopefully I didn't miss anything. The README doesn't go into great details on why things are setup the way they are...so if you need more explanation just let me know and I'll try to add more details.

This repo is the bare bones of what we are going to use for our Single-SPA/Svelte frontend. Let me know if you have any suggestions or concerns with the way I have it setup.

Oh and please don't judge me on the look of the pages. I know it's ugly but the idea is it's functional.

[gevera]

Actually already using Svelte as a single among other React single-spas in enterprise.

[vekunz]

The point with single-spa is that it does all work in the browser, and not server-side rendered.

[gevera]

You are 100% right. We are using regular Svelte app, with svelte-spa-router. No server side att all

[jeruktutut2]

You are 100% right. We are using regular Svelte app, with svelte-spa-router. No server side att all

does svelte-spa-router can serve or load page (from different apps or server) at runtime? did you use module federation?

[bertybot]

I have researched this topic extensively, and I will just say straight up that in my opinion, using Svelte for "MicroFrontends" with Fully Dynamic SSR (Not prerendered), and hydration is insanely wasteful and unneeded. First, of all I will say that using Sveltekit for this is completely out of the option. Sveltekit itself assumes it is in charge of the whole page, and 2 instances can not live together on the same page. This is due to the multiple window globals Sveltekit adds for things like routing. You are also going to run into problems with hydration, since Sveltekit is not going to output clientside hydration scripts in the manner you expect for Microfrontends.

So, you are going to need to basically write your own "Sveltekit" meta framework to build Svelte in the way you require for Microfrontends. I know anyone who has done this before will highly recommend that you try to avoid this if you can. Just think about it, Sveltekit is still in beta after over a year with the creator working on it full time, and a ton of other extremely smart people working really hard on it around the clock. The reality is that there is no way you are going to be able to match the quality of Sveltekit, so you need a pretty good argument for not only just not using it but, spending a ton of effort rolling up your own solution. To me, just putting two different separately compiled pieces of html and js together on the page which would most definitely result in performance degradation is not worth it, and I would highly recommend you avoid the misery you would put yourself under to get there.

On the technical side, I was actually able to get a quick demo of what you require working. The main problem you are going to run into is the fact that Svelte is not a traditional JS framework, but a compiled language. With this comes several complications over traditional frameworks. Svelte does not have a traditional runtime like other frameworks, components runtimes are compiled at build to save space. Due, to this you have to compile your Svelte twice. Once for the server and once for the hydration on the client, you also have to track these files together which complicates things even further. On top of that, the fact that Svelte "compiles" is going to be a problem. The Svelte compiler does a lot of optimizations, like taking out unused slots, events, etc. which has the boon of saving you a ton on bundle size. This is amazing if you are developing traditionally but, in your case since you are compiling things separately this can cause a ton of problems. The 2 components you are going to have on the page are going to need to be fairly self contained, and probably only communicate through a global store. You also need to avoid a lot of access of global browser window due to having the ability of effecting the other.

Again it's possible but, you have to ask yourself is the pain you are putting yourself through worth it? Sveltekit works pretty well right now and is well supported. Svelte's major selling point is how it compiles to decimate bundle size, and you would be throwing all that away, Modern ESM modules and Svelte component already serve as a good supported way to modularize Svelte components. Sveltekit itself also compiles extremely fast, at least in dev, due to Vite so you don't need to worry about build times. I would just recommend to you to save yourself a lot of misery and just stick with Sveltekit and drop Microfrontends entirely.

[tsukhu]

Single-spa is definitely the most solid specially if you are looking for CSR .
One thing I feel is if you have to use MFE do it at the route level rather than component level. It's just safer and lesser issues and complexity

[vekunz]

You are building your own meta framework and opening a Pandora's box of work that should not be taken lightly.

I still do not see the point why a new meta framework should be necessary.

You are going to have to do a ton of testing to ensure that one Micro frontend isn't effecting the other

A ton of automated testing should be normal for every application.

Yes, but there is no way you are going to approach anywhere near the amount of performance as a singly compiled Sveltekit instance, this is a known drawback to the Microfrontends approach, and not admitting that is disingenuous.

This is true. Every distributed system is slower then a monolith.

[bertybot]

I still do not see the point why a new meta framework should be necessary.

Once you start working on it you'll slowly begin to see what I am talking about. You'll start making a Svelte Fragment server. First, you are going to have to add a vite config, then you are going to have to add routing to decide how you get which component, then you are going to have to add ways to handle authentication, etc and it will quickly snowball from there. The amount of work can get out of hand pretty quickly. You can probably get a quick working demo up quickly but, if you are doing this at scale you are going to need a lot more work then that and as someone who has fallen into this trap before I would highly recommend not doing it. Since, you're daily work day will devolve to you just working on this setup, and you're coworkers complaining to you about missing features, bugs, etc. If you are going to do it I would say that you should always make it open source since then you can at least get some support from the community.

You are going to have to do a ton of testing to ensure that one Micro frontend isn't effecting the other

My point was you are going to need a lot more than you would in a true microservices architecture since one can always effect the other. My main pain point with the Microfrontends approach is that single webpages are inherently monolithic.

[vekunz]

If you are going to do it I would say that you should always make it open source since then you can at least get some support from the community.

Since I never talked about building my own private framework, but extending Svelte/SvelteKit with these features, it would be open source of course.

I never said that it would be very easy to create something like this and I never said that I want to (or even can) build such a thing myself. Therefore I created this discussion here in the SvelteKit repository, to discuss this. And your argument "it is too complicated" is not an argument, because creating something like Svelte and SvelteKit in the first place is way more complicated, I think. We can discuss MicroFrontends, but only if you do not reject every point with your single argument that "it is too complicated".

[ktsangop]

Thanks for the valuable insight.
After investigating micro frontends for a while, it's really important to find real world testimonies.
I have read more than a few "promo" articles, but very few (if none) real world scalable examples. Even failed ones (as a matter of fact these matter the most).

One thing's for sure. There is no easy way to micro-frontend land, and everyone's on their own.
Web components might be close but no-one wants to write vanilla JS to create a full application or a complex widget/component.
And mixing frameworks or multiple SPAs into one might create more issues than it solves.

[Relaxe111]

i've tried a nice library which seems to play really nice with sveltekit. micro-app.

[jonshipman]

[esafak]

Which parts of these are you deploying independently?

[subho951m]

Did you find any solution on how to use microFrontend with sveltekit? @vekunz