Menu

React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

React vs. Svelte, the JavaScript build-time framework

Svelte is a new way to build UIs on the web. While this may sound like it's been done many times before, Svelte has a different approach. Instead of pushing the complexity of the UI generation and maintenance in form of browser abstractions, Svelte works completely at compile time.

The key difference to React is that there is absolutely no trace of Svelte sent to the browser. Each time users need to download the whole abstraction library of React for drawing the UI. This may seem like insignificant overhead, but unlike native built-in browser functionality - downloading and initializing causes a delay.

Because the downloaded script contains only raw JavaScript, the Svelte framework can create surprisingly small applications. In the case of the commonly used example of TodoMVC, the Svelte implementation weights practically nothing:

The Svelte implementation of TodoMVC weighs 3.6kb zipped. For comparison, React plus ReactDOM without any app code weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.
- Introducing Svelte: Frameworks without the framework

In a sense this is exactly what TypeScript is doing to JavaScript on the language level. By nature JavaScript is a weakly typed language, but TypeScript adds typing support for development time. When the TypeScript source is compiled, all that is left is regular JavaScript.

Svelte is still a young effort and it's impact remains to be seen, but the rising popularity of Web Components and Svelte signal that there is more to tap into the capabilities of the browser directly. In 2017 we expect forward to JavaScript client applications to increasingly take advantage of native features for CSS scoping as well as modularization of HTML.

React itself has already grown to be a truly multi-target platform with React as a server side rendering engine and React Native, but for developers just targeting the browser the added complexity being added in React Fiber can be an overhead without few returns. Svelte is also currently not talking too much about routing, state management and other necessities for building single page apps.

Learn more about Svelte on the official introductory post or jump straight into the source on GitHub.

Written by Jorgé on Wednesday November 30, 2016

Permalink -

« Koa 2, the Node.js framework engineered for async/await - Mixing Angular 2 and Polymer Web Components »