Svelte is not reinventing the wheel, but is gaining more and more attention in the community. In this article, I would like to highlight what Svelte has in common with the established approaches and where it comes to breaking new ground.
Svelte is a component-based framework just as we already know it from React, Angular and Vue, but differs from the established top performers in one important aspect: they require declarative, State-driven code, which the browser has to convert into DOM operations using techniques like a Virtual DOM.
Svelte is not a classical framework but rather a compiler, which converts the code into highly efficient imperative code and manipulates the DOM directly. Since Svelte does not require any framework code, it produces smaller bundles, and without a Virtual DOM in memory it promises better performance.
This sounds quite promising and already feels very good in practice. Unfortunately, the IDE support is not comparable to the established frameworks but the official site helps a lot.
A glance at Svelte
Once your IDE is set up, you can use one of the predefined templates to set up a Svelte project. On svelte.dev the use of degit is recommended, and simple project templates for rollup and webpack are available.
Using webpack, the whole thing looks like this:
1npx degit sveltejs/template-webpack svelte-app 2cd svelete-app 3npm install 4npm run dev
Hello world example
Now that we have a project up and running, we can take a brief look at the components: these are stored in .svelte files and at first glance look quite similar to the components we know from Vue. Inside a
Your job at codecentric?
More articles in this subject area
Discover exciting further topics and let the codecentric world inspire you.