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@latestIn the Svelte project:
npm installandnpm run devAfter 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 folderAgain we will
npm -iand after thatnpm run devto restart the serverImporting DaisyUI (component library) with:
npm i daisyuiand we will paste in the plugins of the tailwind.config.cjs filerequire('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,
Components
Svelte it's a single file components architecture.
Script, Html , Style .
<script>
JavaScript goes here
</script>
HTML goes here
<style>
styles goes here
</style>
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;
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)
Noone needs tailwind / daisy to start using Svelte ;)
Glad you're enjoying Svelte Alessandro!
Thank you Mike!
I think i got most of the grammatical mistakes correct!
wow, i gotta read it tommorow. it's 1am LOL. thanks for writing Alessandro
Svelte is my new favorite frontend work
Svelte is inverted Vue 😝