A brief guide to Svelte, a framework that allows you to write complex Web applications focusing on the performance aspect. Introducing SvelteKit, the most recommended tool for creating apps.
For those who have historically used the best known programming languages, i framework they can sometimes represent a question mark. Yet in web application development, a framework can significantly relieve the developer by using code reuse techniques and an approach middleware which allows you to do before and after HTTP requests.
In mid-December 2022, after two years of development, SvelteKit has reached its final version: it is a framework for building web applications which in turn is based on Svelte. Free and open source project born in 2016 from the idea of Rich Harris, Svelte it is itself a framework: it is not the classic JavaScript library but a solution that, even in the same development phase, takes care of compiling the code. What you get is codice JavaScript native that can be immediately interpreted and compiled by the browser without additional steps.
Furthermore, unlike other frameworks, Svelte loads only the necessary JavaScript code into the project, avoiding unnecessarily burdening the application. These attentions allow the obtainment of lean code, capable of ensuring performance up to 10 times higher than for example a React.
Quick lets you create the apps so declarative starting with components that combine markup, styles and behaviors. To get an idea of the usable syntax and what is possible, we suggest taking a look at the basic Svelte examples.
Bringing you to the more complex examples, like this one, observe the result but above all the JavaScript and CSS code generated starting from the Quick instructions.
As mentioned above, i Quick components they are compiled into small, efficient JavaScript modules that eliminate the overhead traditionally associated with using other frameworks.
A SvelteKit app can be thought of as two distinct entities working in symbiosis: server e client. The first deals with processing requests from the client and, for each of them, providing an answer; with the second the developers of Svelte and SvelteKit refer to the JavaScript code that is loaded in the browser.
SvelteKit connects client and server: on initial page load, the server renders the HTML, which means that the content is visible as quickly as possible. The client then puts itself into a process called “hydration“: the idea is to speed up the operation of the application by avoiding subsequent new loading of the same page. The client requests code and data from the server according to specific needs.
How to try SvelteKit
Who wants to get out of the comfort-zone and try a framework that, really, helps speed it up web development can try the final version of SvelteKit immediately: it can be used on any device that is able to install and run the JavaScript runtime environment Node.js.
The important thing is to make sure you have the latest version of the package manager npm so you don’t get the error message EBADENGINE, Unsupported engine when using SvelteKit for the first time.
There are various techniques for updating Node.js in Ubuntu and other Linux distributions.
Alternatively, it is possible try SvelteKit also in Windows using WSL 2, a subsystem developed by Microsoft that allows you to run Linux in Windows.
To use SvelteKit in Windows with WSL 2 just install Ubuntu 22.04 from the Microsoft Store then run the following commands from the Linux terminal window:
sudo apt update && sudo apt upgrade -y
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
You must therefore completely close the WSL 2 window and then reopen it. The following command installs the components needed to use SvelteKit (see the Microsoft post on Node.js and WSL 2 for more information):
nvm install –lts
At this point you can try an example with SvelteKit by simply typing the following:
npm create [email protected] test-app
After pressing the “y” key (Ok to proceed) you can press Enter at SvelteKit demo app in order to save the demo app in the subfolder test-app. You can then select Yes, using JavaScript with JSDoc comments and answer No to the following questions.
With the following commands the application will run:
cd test-app
npm install
npm run dev
By typing the URL indicated in the address bar of the browser (in the example localhost:5173), you can interact with the application entirely created with Svelte.
All the code that led to the generation of the web pages and application was generated with SvelteKit. By clicking on Sverdle you have access to an interactive game similar to the known Wordle.
How to start developing with Svelte and SvelteKit
The examples help a lot to understand the rudiments of Svelte and SvelteKit. If you’re impatient to get started with a basic project template, just type the following and take your pick Skeleton project:
npm create [email protected] my-app
As usual, as seen previously, the following commands must therefore be issued:
cd mia-app
npm install
npm run dev
To work on the project files, the use of Visual Studio Code is recommended together with the Svelte extension, which can be downloaded and installed separately.
The file named package.json contains all project dependencies while the folder src the source code of the application.
The paths defined within the app and, therefore, the behavior that it must keep when a page is visited, are indicated in the folder src/routes.
In the case of WSL 2, the Svelte app sources can be accessed by simply navigating to the folder \\WSL$\Ubuntu-22.04\home\username\svelte-app-name.
All the information on the Svelte syntax to use for your apps is contained in the official tutorial.
Another section contains information about SvelteKit.