Porting to a framework such as Svelte

[eliandoran]

Currently Trilium is using a home-made framework for component-based templating in the client side. This discussion should hopefully explore changing to a common framework.

At the moment I am inclined towards Svelte, mostly because I have experience with it and it feels easier than React.

This has also been discussed upstream in zadam/trilium#2382.

Advantages for porting:

• Higher performance, as the client now currently seems to refresh more than it needs to.
• Since we are partially rewriting the client, we can develop it mobile-first, making the mobile UX much better.
• Similarly, we can rethink the layout from scratch, to make it easier for newcomers to understand the interface and to reduce clutter.
• Removing the underlying custom framework will simplify the code and thus reduce the maintenance burden.

Disadvantages for porting:

• This would make it basically incompatible with the upstream repo. This will make backporting fixes that @zadam might make on the official repo almost imposible. Similarly, upstreaming important fixes from our repo to his will be difficult.
• It's a bit of a huge undertaking. At the time of writing, there are 155 components that need to be ported.

[zerebos]

I am in favor of switching to a proper framework in general, I'd even be in favor of going pure vanilla JS over using jQuery as Trilium currently does. (jQuery is a huge bottleneck, trust me.). I like Svelte and React a lot, I also like the ones that focus on performance like solid.js (though it seems the new Svelte v5 outperforms solid). I'd have to slightly favor the react paradigm solely because it doesn't complicate the build process like Svelte and Vue can because they transpile down to vanilla js.

As for the disadvantages.... if we really are going full TypeScript from our other discussion, then we are already making backporting and upstreaming fixes difficult. Especially if during the process of conversion we end up requiring refactors.

The more we discuss the massive overhaul changes... the more it feels like this is going to end up as a completely different app that's just inspired by Trilium rather than based on it haha.

[Alumniminium]

Pure TypeScript would have my vote. There's new frameworks every other week.

[bonnepioche]

Hi,

I would love to see how Svelte would fit for trilium. It seems a good choice for me.

However, please keep in mind that what is missing the most for Trilium IMHO, is a true, offline, mobile app!

If we were to rewrite Trilium with a different technology, we should be sure that it allows the creation of a mobile app with minimal efforts.

My 2 cents,

Pat

[rijulraju]

One approach worth considering is to create a responsive PWA, regardless of which framework is chosen. The biggest benefit to this approach is that the client/frontend will have a single codebase that can be ported to a variety of end-user devices. For example, check out https://capacitorjs.com for porting PWAs to iOS/Android clients.

As far as frontend framework, I would suggest exploring NextJS. What sets NextJS apart from the others is that it supports SSR, and SSG (in addition to CSR) out of the box. Using SSR might make the frontend feel more nimble/light/faster/responsive. Using SSG for generating read-only views of notes would be interesting.

For styling, consider Tailwind CSS - https://tailwindcss.com. I scoffed at the concept for a while because of my expertise/familiarity with CSS, but having given it a fair chance, I'm blown away by how quickly it allows you to iterate. I'm a huge fan now.