All frameworks provide some magic that allows you to write more declarative code, but Svelte does this in a way that is beginner friendly and incredibly easy to transition into. I’ll take you through the basics and why I think everyone should try it on their next project.
It all comes down to having a great developer experience. Every single one of them does [00:01:00] this with some sort of magic that hides away the harder parts of web development simplifies, the amount of code we write and the way we build our applic. Svelte is a powerful framework for beginner or advanced developers, synonyms for the words Svelte are graceful and lean.
So in this component, we’re only showing the count. If it is greater than zero. in the script tag, we have declared a variable called count set to zero in the style tag. There is CSS applied that is scoped. So it only affects the elements that are in this component. And then we have the markup. This is where PTs power really shines.
In the HTML button element, you can see an on colon click where we have some magic happening. [00:03:00] This is how Svelte handles events. It intercepts the Dom click event and fires the inline function to increase the value of count and update it anywhere. It is used, making it truly reactive. We can dynamically show or hide the count using an if block the count will only be shown if it is greater than zero.
this makes it the most beginner friendly framework for new developers and incredibly easy to grasp for those transitioning from other frameworks. Now let’s take a look at how to pass props in Svelte, instead of just declaring the variable in the count component, we’re going to export it. This follows the same principle as modules, where we export what we want to access outside of the component and then import it into other components.
We can then pass the count as a prop in app dots felt file to be something different than zero. This is a pretty basic example here, but hopefully you can see Svelte takes basic syntax and gives it superpowers to create those truly [00:04:00] reactive experiences. Svelte is similar to react and view with one key difference.
Why did rich Harris, the founder of Svelte decide to move all new development from Saper to Svelte kit before it could be quite confusing for users new to Svelte to decide which path they should take when starting a new project Saper or Svelte. so the goal with SPEL kit is to have a single recommended path for building everything from high performing web apps to static blog pages.
Plus loads more. This makes it incredibly easy to build small apps or extensive complex projects at. Rich has now joined the amazing team at Versace to work on SPEL and spell kit full time. That means we can expect faster updates and more amazing features in the Svelte ecosystem. The community around Svelte is one of the fastest growing and most supportive communities.
I’ve been fortunate enough to be a part of the discord server is the place to be, to see upcoming events, get the latest. Answer your questions, or just hang out at the last Svelte summit. My co-founders and I announced a new group for women and non-binary people in the Svelte community. This Svelte sirens in conjunction with this Svelte society.
We’re adding more content than ever to this Svelte society, YouTube channel [00:06:00] we’re providing more talks and bringing on guests for live streams to show how to integrate Svelte with databases, content management systems authentication and more. You know, you want a little magic in your life with all the exciting things happening.
I think this is definitely the year of S spell and I hope you will join us in this amazing journey. Thank you.