Frontend Framework

Objective

The objective of this RFC is to evaluate various frontend frameworks, one that enable faster development, is lightweight, performant and easy to use. Maturity of the framework plays a major role here, we do not want to pick up a framework which is still in its early stage with a small community. This leaves us with a handful of frameworks to consider which are listed below, some more alternatives are discussed in the last section:

1. React
2. Svelte
3. Vue

Motivation

We have been using React for a long time now and while it has served us well, we believe it's showing its age with an API that is increasingly hard to use and leaves a lot to be desired. The main problems we faced while working with react are as follows:

1. Code Complexity - React with it's hooks API and non-reactive model is very hard to work with, this would result in a very side-effect prone codebase with a lot of unnecessary re-renders if not used correctly. This was the main reason to look for alternatives.
2. Meta-Framework - Next.js is the most successful meta-framework for react however it's model is more suited for static/landing pages, while it is possible to create fast applications with it hybrid (server + client) model and it's newly released app directory a lot of the defaults that it has does not suite SPAs out of the box. We also tried Astro.js which lets you bring the framework of your choice however it ended up restricting us in ways which was only suitable for static websites as advertised by them.
3. Decision Fatigue - One downside of having the biggest open source community is that there are multiple ways do achieve the same result which causes decision fatigue.
4. Performance/Weight - React is sufficiently performant however it is not the most optimized framework out there, with a complex enough app measuring performance and tuning it is hard in react. Even for a very small app you end up shipping a lot of JS to the client.
5. Out of Box Functionality - React is not a framework, its a library (opens in a new tab). Want to add some animations?, install react-spring, want forms? install ract-hook-forms, want a global store? install redux, whats that? need derived state from your redux store? install reselect. Great now we have a 5MB bundle and our app is still not production ready.

Design Proposal

To get straight to the point we picked Svelte (+ SvelteKit) after a lot of comparisons, the reasons are listed below:

1. Simplicity: Svelte does not pretend (or want) to be a big brain framework, its code is simple to read and concepts very easy to understand, it will remind you of html and javascript that you learned as a beginner. It's very powerful.
2. Reactivity: At the core of Svelte is its reactivity, one of its biggest strength and also one of the more controversial topics about svelte. Svelte chose to extend Javascript with a new symbol $ which declares/subscribes/unsubscribes reactive statements/subscriptions magically under the hood. Technically speaking its not JavaScript but SvelteScript (opens in a new tab)
3. SvelteKit: We liked SvelteKit (Svelte's meta-framework) as much as Svelte itself, it follows the same philosophy that Svelte does, keeping it simple, providing everything within the framework with sane defaults. Some highlights are mentioned below:
   1. Client side routing
   2. Prefetching
   3. Data fetching + Streaming multiple promises
   4. fetch Caching
4. Lightweight: As mentioned above Svelte is technically not JavaScript so it comes with its own complier which allows it to do all kinds of optimizations that you wouldn't be able to otherwise, keeps our bundle sizes very low. It also does not ship its own runtime since it does not have a virtual dom. Additionally fact that you rarely need to depend on additional libraries makes the codebase extremely slim.
5. Future: Svelte's future looks bright, its loved by its community, it has a strong stance for keeping things simple even it its controversial, Rich Harris, creator of Svelte also recently got hired by Vercel so it will be backed by one of the top dogs in the industry. We believe Svelte will be a framework that will be supported for a very long time.

Drawbacks

The team will lack expertise in Svelte and will need to learn from scratch, we're hoping the simplicity of Svelte will make this easier but until our UI starts getting more complex we will not get to know it's main downsides.

Another drawback to consider is the lack of community (or rather a smaller community compared to React), we will try see this as an opportunity rather than a drawback. Being part of a community in its early stages has its own merits, like having less clutter and noise, lots of visibility for libraries/projects we might open-source and even to an extent a better understanding of how the framework has evolved over time.

There is a chance we might switch back to React for its ecosystem which is its only strong point today but personally I do not see it happening, either way I have to mention it here. Worst case scenario we'll get a good blog post out of it.

Alternatives

I've listed the alternatives we considered, in all honesty all these frameworks are very good and picking any of these would not have been a bad decision but I've still jotted down some quick pointers over why we picked Svelte over it:

1. Vue

   1. Performance: Svelte's compilation process and lack of runtime results in smaller bundle sizes and faster load times, offering better runtime performance compared to Vue.js.
   2. Simplicity: Svelte's straightforward syntax and concepts make it easier for developers to learn and become productive quickly, while Vue.js has a steeper learning curve, much like React
   3. Reactivity: Svelte's reactive nature simplifies state management and ensures highly responsive user interfaces without external libraries, which requires additional setup in Vue.js.

2. React Much of the document compares React with Svelte so I won't be writing anything else here. For an exhaustive comparison of their respective meta-frameworks, this like was helpful: https://github.com/jasongitmail/svelte-vs-next (opens in a new tab)

3. Qwik Qwick uses a very novel approach of resumable components (opens in a new tab) which streams html from the server to the client. This gives it serious performance benefits, the framework however was too new for us to have the courage to consider is seriously.

4. Solid.js Think of Solid as Svelte + JSX (React Templating Format), under the hood they use similar no-vdom, compiled approach as Svelte. Solid even performs better then Svelte for larger apps and has a very familiar syntax as React all thanks to jsx. If anything could beat Svelte in our comparison both in terms of performance and simplicity, its Solid, but again due to its newness we did not want to adopt it. The community is much smaller and its meta framework SolidStart is still in beta.