⏱ Estimated reading time: 4 minutes

By Romain Crestey, Frontend developer @ MesAidesPubliques
Slides - Demo

Table of Contents

On React and what feels wrong

Today, React dominates the market. However, React is not the only frontend framework and before React there were others such as jQuery. So why does React dominate? Because frontend is hard and there was no common way to do it, no structure. That was until 2013 when React chimed in with its virtual DOM, components, JSX and Flux.

The learning curve of React does not benefit junior developers. React classes require understanding object oriented programming, render and state require knowledge about application state management. Even hooks which are meant to simplify things cannot save React from its learning curve.

React is not lightweight: 45kB for the basic empty app with no user contributed line of code. Virtual DOM is not the most efficient either as it needs to compare each and every attribute of every DOM node for its diffing algorithm! On a side note: as this diffing is expensive, can we truly define React as “reactive”?

On Svelte and what feels right

Fast-forward to 2016. Rich Harris wanted to experience an alternative to React, one that removes the vDOM and the render loop by compiling the UI and the application code together. Svelte was born. Svelte knows where to edit the DOM on state change, Svelte is lightweight, fast and reactive with no runtime. Syntax-like, we are closer to an augmented HTML.

A component is a single file named following a convention. This file contains behavior and style in <script> and <style> tags. Everything is simplified: script is run once unless specified otherwise and templating uses specific tags of the likes of {#if}{:else}{/if} and {#each}{/each}. Vite provides the development experience on the bundling and dev-server side as much as common transitions and basic state management capabilities are native to Svelte. While the state debugger cannot provide time travel debugging, it delivers an efficient experience.

SvelteKit is the equivalent of what Next and Nuxt are to React and Vue. An application framework that quickly gets apps up and running on Vercel.

Vue 3 has taken inspiration from Svelte while Solid melds ideas from both React and Svelte. Svelte, Vue and Solid are at the inception of the new generation of JavaScript frameworks: performant, lightweight. This does not mean that the days of React are counted: the v18 blog post announced major improvements such as Concurrent rendering and automatic batching! Moreover, React benefits from a large community of users and contributors and a solid ecosystem.

Questions and Answers

What French companies rely on Svelte?

There aren’t much yet except indie devs, small shops and the occasional RadioFrance which uses SvelteKit under the hood.

Are there design systems yet?

There is one however it is not as advanced as what can be found in the React and Angular ecosystems: Svelte Material UI. No other serious option today. Both React and Angular receive massive investments from their respective founder companies and the community while Svelte did not receive as much love yet.

How to parse the JavaScript ecosystem today?

React is way ahead, Solid is interesting but not mature, Vue and Svelte are challengers.

Is there a Svelte equivalent to React-Native?

Perhaps Svelte-Native? Not mature but has the merit of existing. There is an equivalent to Three.js called Svelte Cubed, though. Storybook not working well enough led to the creation of Vitebook.

How will Svelte hold its ground?

Hard to say. React and Angular are here to stay.

What about component testing?

There is no consensus about testing today and no obvious way to unit test components. On a higher level, Cypress or Playwright could do the job.