Svelte

rendering

• does not support a virtual DOM. Svelte article claiming rendering a virtual DOM, then reflecting bindings on the real DOM is taxing middle step, and changes to the virutal DOM forces a re-render anyways which repeats the process. If you have to re-render things anyways, just use the real DOM.
• Svelte transpiles code into vanilla JS to run client-side and affect the real DOM directly (surgically updating).

development

• uses a superset of HTML including:

1. script block
2. styles block

HTML markdown is inject wherever is convenient

• prop drilling requires an exported variable that is populated when the child is declared in the parent

Qiwk

rendering

• supports a virtual DOM
• renders page by skipping hydration and utilizing resumability
• the big problem with hydration is whent the client receiving the HTML and javascript, the javascript has to exectute to even find out which components to bind to which DOM element.

note: javascript executed server-side to find out what to send to client. javascrit re-executed client-side to figure out state and bindings.

• resumability has the server do a pertial render, send to client with serialized logic of “where to pick up from” in HTML.
• Article with pretty good visual comparison.

React.js

rendering

• supports a virtual DOM

Next.js

rendering

• uses SSR and client-side hydration
• hydration: get the server to partial render, send to client. client runs javascript to run the server render, create new state and bind events

Vue.js

rendering

• supports the virtual DOM
• uses reconciliation in its patch phase of the render module to find the difference to in virtual DOM nodes.

reconciliation partially solves the virtual DOM issue raised by Svelte

development

• uses Single-File Components that have the following composition:

composition

1. script block
2. template block (html)
3. style block

options

1. script block -> exports default named (data) function returing state
2. template block (html)
3. style block

• prop drilling requires an execution of a defineProps method in script block
• Vue’s reason boils down to “its more ergonomic” with the exception of:

1. allows compile-time optimizations by cross-analyzing template and script
2. out-of-the-box Hot-Module Replacement (HMR) support

Solid.js

rendering

• doesn’t support the virtual DOM
• supports vanishing components by compiling code into necessary DOM elements and creating signals with JavaScript. This allows for surgical updates rather than re-rendering components and children
• it looks like it solves a lot of the problems Svelte was trying to solve, but without breaking the component mental model

development

• uses componets that are functions that return jsx
• supports in-function JavaScript that is either turned into a signal or used on the server to format the DOM

My opinion

React:

I like using React. I don’t think the framework challenges are that hard to overcome, but it’s not a silver bullet. Its a SPA so its definately not optimized for every application type. If I was building a larger application I’d prefer the perfomance boost from a SSR framework that has reactivity.

pros:

I like the mental model that it provides. the ecosystem is huge, so there’s likely a tool to help you with challenges from the framework.

cons:

State management and over-rendering are definitely challenges with the framework. React must share the same mentality as tkdodo

“Re-renders are a good thing. They make sure your app is up-to-date. I’d take an “unnecessary re-render” over a “missing render-that-should-have-been-there” all day every day.”

Svelte

I like the problems that Svelte is trying to solve, but I think the the file design being a superset of HTML breaks the component mental model for me. I don’t like the developer experience. I’ve heard that Svelte gets hate for doing “black magic” with the compiler. I don’t care about black magic as long as it’s developer friendly and performant.

Next.js

Next next, you’re breaking my heart. Next has been leading the game with SSR components with hydration performed in parallel with server components in the new app router. The problem is that the eco-system is struggling to catch up to Next.

Vue.js

I think Vue does the worst of both worlds of React and Svelte. It tries to fix Sveltes critique of React by having reconciliation rather than full DOM updates, but it also keeps Svelte’s “superset of HTML” design by having template, script, and style blocks.

Solid.js

I think Solid does the best of both worlds of React and Svelte. It keeps React-like formatting to maintain my mental model while also performing surgical updates and shipping little JavaScript to the client.