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:
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 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.
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 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 -iand after that
npm run devto restart the server
Importing DaisyUI (component library) with:
npm i daisyuiand we will paste in the plugins of the tailwind.config.cjs file
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.
HTML goes here
styles goes here
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;
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.