Introduction to Svelte

What is Svelte?

Svelte is a modern JavaScript framework for building user interfaces that are designed to be fast, efficient, and easy to use. With Svelte, developers can create complex and interactive web applications quickly and easily.

What makes Svelte different?

It has a unique approach to building web applications. Whereas traditional frameworks like React and Ember do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

The edge Svelte has over other frameworks is that Svelte is a compiler, and therefore it doesn’t use virtual DOM.

The outcome of this approach is not only smaller application bundles and better performance, but also a developer experience that is more approachable for people that have limited experience with the modern tooling ecosystem.

Svelte sticks closely to the classic web development model of HTML, CSS, and JS, just adding a few extensions to HTML and JavaScript. It arguably has fewer concepts and tools to learn than some of the other framework options.

How does Svelte work?

Svelte, being a compiler, has the ability to extend HTML, CSS, and JavaScript by producing efficient JavaScript code without any runtime overhead. To accomplish this, Svelte expands upon vanilla web technologies in the following ways:

• It extends HTML by enabling JavaScript expressions in markup and introducing directives that enable the use of conditions and loops, similar to handlebars.
• It extends CSS by implementing a scoping mechanism that enables each component to define its own styles without the potential for conflicts with styles from other components.
• It broadens the capabilities of JavaScript by reinterpreting certain directives within the language, resulting in true reactivity and streamlined component state management.

The Svelte compiler only intervenes in highly particular circumstances and solely within the scope of Svelte components. Changes made to the JavaScript language are kept to a minimum and chosen with great care so as not to disrupt JavaScript syntax or estrange developers. You will primarily be utilizing plain JavaScript (or optionally, TypeScript).

To try Svelte in an interactive online environment you can try the REPL.

Creating your first Svelte app

To create a project locally the recommended way is to use SvelteKit, the official application framework from the Svelte team:

npm create svelte@latest myapp
cd myapp
npm install
npm run dev

SvelteKit will handle calling the Svelte compiler to convert your .svelte files into .js files that create the DOM and .css files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, and deployment.

A typical SvelteKit project looks like this:

myapp/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [your server-only lib files]
│ │ └ [your lib files]
│ ├ params/
│ │ └ [your param matchers]
│ ├ routes/
│ │ └ [your routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ └ hooks.server.js
├ static/
│ └ [your static assets]
├ tests/
│ └ [your tests]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

You can read more about SvelteKit project structure here.

After running npm run dev, Svelte will compile and build your application. SvelteKit will start a local server at localhost:5173. It will watch for file updates and automatically recompile and refresh the app for you when changes are made to the source files.

Go ahead and play with the files generated in the myapp folder and see the changes live on your local server. If you face any difficulty or want to learn more the official docs are your friend.

Conclusion

Svelte stands out as an incredibly intuitive framework that I have grown to love more and more with each use. For beginners, I highly recommend Svelte as your first choice because of its focus on adhering to web standards. As a seasoned web developer, you will likely appreciate the simplicity of Svelte and perhaps even rediscover your passion for web development.