Svelte vs React - first impressions

My journey through preferred frontend frameworks looks like this:

  1. Vanilla Javascript
  2. Prototype.js and MooTools
  3. jQuery
  4. Backbone.js with Marionette
  5. Angular (for half a year or so)
  6. React or Preact (last five years now)
  7. Next.js with React

And now there is a new kind of player in town. Svelte solves the problem of rendering by moving work from the browser (what React and Vue do) to a compile step to optimize for performance and file size.

Let's take a look at the experience of Svelte so far.

Svelte vs React - my first impressions

Svelte defines itself as a Component Framework and does not rely on the virtual DOM for diffing before rendering, but instead builds the app (or component) with the ability to precisely updates the DOM. This comes with the upside of great performance.

Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM

Svelte comes with a lot of nice features. It also claims that you will write less code and the compiled app will just be a vanilla JavaScript app without framework code included.

Having just started out I already appreciate these parts of the framework a lot:

  • Animations - adding that extra UX delight is easy to do and great support is included
  • Vanilla JavaScript - the feeling of just writing JavaScript and export-ing stuff in a natural way is great
  • Documentation - it wouldn't get the adoption it has if it wasn't for the docs and tutorials
  • Less code - I haven't measured it yet, but I'm convinced I'm writing less code with Svelte

Going back to bindings and the way template syntax feels familiar from Angular which I think is a part of the reason you don't have to write as much code as with React.

I haven't gotten to deploy anything yet, but I spent a couple of evenings experimenting with it. In fact, if it wasn't for Next.js (which covers a bigger scope and feature set) and Now I would probably jump straight to Svelte.