“Everything should be made as simple as possible, but not simpler” – Albert Einstein
Build boilerplate-free components with HTML, CSS and JavaScript/TypeScript, let Svelte compile your code, and get a static application that starts fast and stays fast.
Svelte is not bound by the particularities of JavaScript. All of the heavy lifting is performed during compile time and not in the browser like your traditional front-end framework React or Vue. Since Svelte compiles into vanilla JavaScript there is no virtual DOM. No virtual DOM means no complex state management libraries. No complex state management libraries means a simple development process.
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.
The CodeSandBoxes
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 a and b is cumbersome and unlike the simplicity of JavaScripts let.
Why consider learning Svelte?
Fundamentally Svelte is different to React and Vue. During the compile step your Svelte code is parsed into highly optimised vanilla JavaScript, and because of this there exists no virual DOM. What brings the speed to Svelte, is this. There is no longer the computational overhead of the virtual DOM, the users browser is no longer doing the manipulation of the virtual DOM.
Modern front-end frameworks are JavaScript frameworks, yet sometimes they feel miles away from JavaScript. Svelte does the heavy lifting in the compile stage and lets you be closer to JavaScript before and after compilation. And if you already know JavaScript you will have absolutely no issue learning Svelte within a day. It’s seriously simple, yet powerful.
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.
