Some observations re your tweet

[Tommertom]

Hi there leaving some thoughts here on this project. With disclaimers etc.

• you are using Kit in SPA mode. This is somehow the least preferred in kit community, people like to use SSR in serverless - prevent JS being shipped to client if possible. Because you use ionic-svelte it is a SPA. Maybe make the demo without Ionic?
• if you try rxjs in SSR (with adapter-auto on vercel e.g.), then it is interesting how things will work server/client. The load functions should move to +page.ts functions, in order to have one code base. Now you have everything loaded on client side
• fromFetch will not be ideal for internal REST APIs. The kit framework allows to create REST endpoints you can consume yourself or even others. The client side fetch (exposed in +page.ts) overloads the native fetch and uses internals to get internal REST API. If you use fromFetch, the internal API will go via internet, which might affect response time
• I love the $ in Angular for observables, but maybe a bit too much in Svelte? Reactivity in Svelte is very simple, so it is mostly very easy to see a writable
• you have a var in searchbar.. maybe better to use let?
• the NX setup seems to be quite common in svelteland. people are encouraged to put lots of stuff in lib, and minimal in routes. A real mono-repo setup I haven't seen yet a lot in community posts
• not sure if for an outside the relevance of rxjs is that clear - the app shows a list of posts, that is it. Is the reddit api requiring it? I am loving it though. Like all your other rxjs posts !
• I tend to use the Service approach from Angular in Svelte - a *.ts file for each specific data object. I actually use a class that does all the CRUD, in immutable fashion, so I dont expose the set/next outside of that module. Not sure if this is the best, but I like it
• And the interface inferred from Yup/Zod, so I immediately have realtime schema validation and type safety in one go, and I could use it in form validation too. someting I seem to miss in Angular - type inference as a way
• I generally see kit projects having a single store.ts file that just instantiates the writable and exports it. Lots of logic still placed in the component or page.ts. Not sure how that would work in bigger projects

Enjoy SvelteKit - a bit different from Angular, but just as nice

[joshuamorony]

Awesome, thanks for the pointers! It's great to get some feedback from someone who's been using Svelte a lot. The SSR side of things is definitely something I will need to experiment with more.

The RxJS usage in this project is probably a bit too in-depth to be useful as a comparison example - I chose it because it was one of the wackier examples I have (though it still serves its purpose). The idea here is to declaratively create a gifs$ stream, and have a whole bunch of functionality included with that like combining settings, reacting to subreddit changes, auto refetching from the Reddit API until there is enough data to fill a page and more.

I created another simpler repo here to highlight why I am interested in RxJS with Svelte: https://github.com/joshuamorony/svelte-pagination-example and for some additional context, a Twitter thread where Jonathan Gamble provided the store alternative: https://twitter.com/joshuamorony/status/1612747334143864832

[Tommertom]

SSR is pretty neat even in combination with Ionic.

For a company project, I made a landing page using a tailwind template in Svelte. That root/landing page route was SSR and blazingly fast rendered and interactive. Something I cannot achieve with a SPA.

The landing page was to sell and promote an Ionic UI PWA which the use could install with a click on a button on that page.

In order to max the performance of the SPA, I use a service worker on the root route that starts caching in the PWA while the user looks at all the info of the landing page. So that all happens under the hood.

Once the use clicks "install", the SPA launches from a subroute with SSR disabled. And then signup+terms/conditions screen pops up. While that happens, I instruct svelte to prefetch all routes of the app, so all subsequent navigations go very fast.

After installation, a simple guard prevents showing the landing page in the installed app - and starts with a splash page.

The lighthouse scores for this all were great (close to 100). Not sure if SEO test of Lighthouse is a good test, but the score was 100 - easily.

All in one SvelteKit project.

And probably true SvelteKit lovers will say I would have the ditch the static adapter even....To me a minor detail.

But this shows me that I can achieve super performing Ionic PWAs that can also serve landing pages so I don't loose users with marketing campaigns.

Try doing this with Angular... I challenge you! :)

[joshuamorony]

Nice that's a really cool use case for making use of the mixed SSR/SPA abilities - P.S. you may be pleased to know my YT video next week will be on SvelteKit ;)