DEV Community


Posted on • Updated on

My Svelte Journey

person holding a Svelte logo

Beginner to beginner Introduction to Svelte

The goal for this tutorial is to share my learning experience with Svelte, also this is my first post in this platform, roast me but ... be nice!

In November 2020 I decided to change my career and started to learn to code. At first I was decided to prepare the exams for:
CCNA 200-301, but then I realized that I wanted to learn web development, so I started with the basics: HTML, CSS, JavaScript and so many tools that are needed for the job!

After these first 11 months it's time for the JS frameworks!
I decided to start with Svelte because I think it's gonna be implemented in vaste scale in the next years, and so many people are talking about it right now!

One of these people is Mike from @htmleverything.
Probably you know him from the podcast: HTML All The Things.
Mike is very enthusiastic about Svelte, and I have to confess that I have chosen this framework following his words.

This post it's mostly a follow up of Mike's course, so all the credits goes to him, for me this is just another way to keep learning by writing and "teaching" others.

For my first post I will cover just the setup and first step, more weekly updates will follow my study.

Svelte it's simple to use and allows us create and build apps very fast.

Svelte is not a library or a framework, it is a compiler.

This means that your code is not shipped in combination with packages to a browser, but it gets compiled to something else, this something is shipped to the browser.

Because all code gets compiled, the total size decreases, but the performance increases.

Besides, it allows you to break away from writing everything inside a JavaScript function, and have its optimized format.

The Setup step by step

The only tool required it's Node.js installed in your machine and your code editor of choice

Setting up the project directory using Vite
npm init vite@latest

In the Svelte project: npm install and npm run dev

After that we will stop the server with control + c

Next thing installing Tailwindcss npx svelte-add@latest tailwindcss
This will add some dependencies to our project folder

Again we will npm -i and after that npm run dev to restart the server

Importing DaisyUI (component library) with: npm i daisyui and we will paste in the plugins of the tailwind.config.cjs file require('daisyui'), and save

Delete all the CSS, HTML and Scripts already present in the file and the folder: "lib".

That's it to set up the project, let's now dive in the components format and how to use it,


Svelte it's a single file components architecture.

Script, Html , Style .

 JavaScript goes here

HTML  goes here

styles goes here
Enter fullscreen mode Exit fullscreen mode

The script block contains the JavaScript that we are gonna use to run a component instance.

All the variables declared (or imported) are visible and linkable to the markup section.

The code we write in the components it can be shared between multiple instances.
To made reactive statement (to access their value), we prefix with a: $

let count = 0
$: doubled = count * 2;
Enter fullscreen mode Exit fullscreen mode

Anytime the value of count change, the doubledvalue change as well, the dollar sign make reactive the component.

That's it for my first post about Svelte, and my first blog post ever.

I will try to keep this as an opportunity to learn and write constantly every week or so depending on my progress on this framework.

Next week i will write about: Conditional Rendering.

Top comments (7)

saturnych profile image

Noone needs tailwind / daisy to start using Svelte ;)

mikehtmlallthethings profile image
Mikhail Karan

Glad you're enjoying Svelte Alessandro!

alessandrogiuzio profile image

Thank you Mike!

alessandrogiuzio profile image

I think i got most of the grammatical mistakes correct!

coderamrin profile image

wow, i gotta read it tommorow. it's 1am LOL. thanks for writing Alessandro

wesrajoko profile image
Wesra Joko

Svelte is my new favorite frontend work

akhilgautam profile image

Svelte is inverted Vue ๐Ÿ˜