//

Same but different: Introduction to Svelte

18.2.2020 | 2 minutes of reading time

Compared to the past few years, the JavaScript world has become relatively quiet lately. Especially in the frontend React, Angular, and with some distance Vue are established and delight a growing user base. Component-based approaches have gained acceptance here and WebComponents are still a possible next development step, which could rather be the foundation for the established frameworks as a real alternative.

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.

About Svelte

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

share post

Likes

1

//

More articles in this subject area\n

Discover exciting further topics and let the codecentric world inspire you.

//

Gemeinsam bessere Projekte umsetzen

Wir helfen Deinem Unternehmen

Du stehst vor einer großen IT-Herausforderung? Wir sorgen für eine maßgeschneiderte Unterstützung. Informiere dich jetzt.

Hilf uns, noch besser zu werden.

Wir sind immer auf der Suche nach neuen Talenten. Auch für dich ist die passende Stelle dabei.