“Everything should be made as simple as possible, but not simpler” – Albert Einstein
But what does a simple development process mean for us?
Well, lets use an example to show case the simplicity of Svelte. Below we have 3 code sandboxes. Each sandbox implements addition using two input fields. The first uses Svelte, the second React and the third Vue.
When reviewing the Svelte code below, notice how little code is actually written compared to React and Vue. Also notice that the Svelte code achieves exactly the same functionality as the other two, such as state change and reactivity.
React requires a large amount of boilerplate code to achieve state change; importing the
useState module, creating functions to handle the state change and then assigning the functions to manage the state.
While the Vue code contains less characters than the React code, you cannot have two top level elements in the
template tag without the need
div tag. Defining your variables
Why consider learning Svelte?
Svelte tutorials and relevant frameworks for SPA and PWA implementations
Svelte is a new take on front end development, and does not have a large of a community. But that does not mean you cannot build modern single page or progressive web applications. If your’e interested in learning Svelte follow this tutorial from their documentation. Also, there exists the Svelte spa router for single page applications. And if you’re interested in building a progressive server-side rendered application you can use Svelte Kit which was released for beta on the 23rd of March 2021, aiming to migrate from Sapper.