Why I ❤ Svelte
Those two things in combination, compiling our sourcecode to regular imperative JS code that surgically updates the DOM, ultimately means we are doing less work in the users browsers, making the current approach seem silly in comparison.
The compiler also offers other special features such as built-in accessibility testing and a transition and animation API that are included. Only the features that are used end up in the final bundle, so a variety of features can be included inside Svelte without every end-user having to pay the cost.
Svelte also has a 100% score on Custom Elements Everywhere, a site that tests the compatibility of frameworks with Web Components. Furthermore, the Svelte compiler can also be used to generate Web Components as output. Thus it would be possible to change out the framework of an existing, previously Svelte based Application by compiling the Svelte components to high-performance Web Components and using them in a rewrite. In a Webcomponents.dev article titled “All the Ways to Make a Web Component”, Svelte ranked third for bundle size of a single Web Component and fourth for performance. This makes Svelte the only library (besides the regular HTMLElement-based approach) in the top 5 in both categories. (Note: Prism is currently above Svelte in both bundle size and performance. That said Prism was just an experimental Project that will no longer be developed, according to its GitHub Description.)
While Svelte is still relatively new, there is already a fairly active, well-organized, and helpful community.
For example, projects like Routify provide a simple folder structure based router that can easily be delivered as a server side rendered app. This website is written using Routify! (Note: Not anymore actually, I rewrote it in Astro because it fits the use case better).
Elder.js is a framework to create huge, static and SEO friendly web applications.
@sveltejs/vite-plugin-svelte, the lightning fast Vite can be used as a dev sever and production bundler.
Svelte also took first place in the Satisfaction and Interest categories in the Front-end Frameworks section of the State of JS 2020 Survey.
svelte-preprocess is an official preprocessor that enables the use of TypeScript and Sass/SCSS (among other technologies) within Svelte components without complicated configurations.
TLDR Pro Svelte:
- smaller .js bundles for the client bringing faster initial load times
- better performance, as no Virtual DOM
- simple, boilerplate-free, HTML-based syntax gets out of your way
- other advantages like integrated accessibility testing and transition API
- Compatible with Web Components and also as possible output of the compiler
- Active and helpful community
- TypeScript compatible, thanks to