How to Svelte
quick-start guide for using the frontend framework, and comparing Svelte to React
But, First
Before we begin, I want to add that the best tool to take a deep dive into Svelte is most definitely directly from the source, where you of course can (and should) look through their docs, plus they have an interactive tutorial that will take you all the way through the languages most basic and advanced concepts. There is a “Learn Svelte” button located on the home page which will take you to the right section, but I’ll also link it in the ‘Further Reading’ section of this post below. Some of the material that follows will come from there, but much of it will come from my experience with Svelte.
What is Svelte?
Svelte is framework used to build user interface for the web, much in the same capacity as Vue or the fan-favorite React codebases. Svelte has a similar feel to React in more ways than one. If you’re even somewhat experienced with React then it instantly feels familiar. This will make learning to use the framework a bit easier. The differences between Svelte and other similar codebases lie mainly under the hood. Code written in Svelte is handled differently at run time than that of React. While React does the majority of its work within the browser with the use of a virtual DOM. This virtual DOM acts as a virtual barrier between your code and the actual DOM. Svelte however uses a compiler at run time, and manipulates the real DOM itself. Since the browser is not doing all of the work at run time, thus resulting in better performance.
Requirements
As stated on their website, you will need to integrate it with a build tool. Luckily for you, officially maintained plugins for both webpack and Rollup can be easily installed. Additionally, if you plan to use VS Code, you can simply install the official Svelte extension. If you are using a different text editor, a setup guide will be linked below.
Basics
- Consider the static header:
<h1>Hello World!</h1>;We can add script tags, within which we declare a normal javascript style variable:
2. The same approach can be done for adding attributes to elements
Notice we only had to type src once. This gives us a slight increase in speed of writing code, but also makes it easier for other developers (including yourself in the future) to understand our code
3. Components can be styled within the same file using <style> tags. For example, to style a basic paragraph element, we can do as follows:
The main takeaway from this is the fact that any styling is applied to the p tag, and ONLY that one specific p tag is styled, as opposed to all the p tags in the application. In other words, that styling is scoped only to that component’s p tag(s)
4. There are many reasons an app’s components are broken down into small pieces, that are mostly isolated from one another. To allow two components to interact with each other, we import the component’s file into the file within which we want to use it. In Svelte this is done using <script> tags.
What if ListItems.svelte contains multiple p tags within its own file? Well because Svelte stylings are only scoped to the component that they exist within, the ListItems will not inherit the stylings that apply to the p tag inside List.svelte.
Similar to React, the variable names for components are capitalized by convention, this helps distinguish the difference between normal HTML tags and user built components.
5. To add an event handler to an element in Svelte, we use overall the same event attribute names (such as onClick, onChange, etc.) however there is a slight change in the syntax. The following is an example of a button component that multiplies count by 5 on each click.
Conclusion
All of this just scratches the surface on Svelte’s potential. It is a very strong framework with a high level of reactivity. Its performance and rendering strategy will be game changers. That was a quick rundown but you should take the time to explore Svelte for yourself!
FURTHER READINGSvelte homepage: https://svelte.dev/Learn Svelte: https://svelte.dev/tutorial/basics
