Innovative Perspective — Svelte
The world of web development is vast. I enjoy discovering new technologies in this vast world. In this article, I would like to explain Svelte technology, which I have learned about with interest recently. Svelte is a web framework that has attracted a lot of attention in recent years and offers a unique experience to developers. By adopting a different approach from other frameworks, it offers a performance-oriented and easy-to-learn environment. So let’s dive into the depths of Svelte!🫧
Topics of this article:
- What is Svelte?
- What is the Difference of Svelte from Other Web Frameworks?
- Syntax of Svelte
- Component Creation
- Data Transfer Between Components:
- Conditional Statements
4. What is Reactivity, the Basic Principle of Svelte?
5. CSS and Svelte
6. Creating Your First Project
What is Svelte?✨
Svelte is a JavaScript framework used to create user interfaces. Unlike other frameworks, Svelte optimizes your code at compilation rather than at runtime and sends lighter JavaScript code to the browser.
Learning Svelte can be a very easy and good start, especially for junior developers. Thanks to Svelte’s simple syntax and component-based structure, it is very easy to understand and write your code. This helps you progress quickly in your learning process and focus on your projects.
Svelte’s performance-oriented structure allows your web applications to load and run faster. This makes it easier for junior developers to learn from the start, reducing the need to dive deep into performance optimization topics.
What is the Difference of Svelte from Other Web Frameworks?✨
Svelte claims to take a different approach than other web frameworks. So what are these approaches?
Compile Time Optimization:
Svelte optimizes your code during the compile phase, and these optimizations ensure that more performant JavaScript code is sent to the browser. In the end, it makes your project run faster. Other frameworks usually make these optimizations at runtime.
Reduction of Runtime Dependencies:
Svelte generates code containing only the features used. In this way, you get smaller files that contain only the parts you need for your project. Other frameworks often produce large files containing all dependencies.
Reactivity:
Svelte presents the concept of reactivity in a simpler way than other frameworks. It allows the component to be automatically re-rendered when the state of the variables changes.
Scoped CSS and Component-Based Approach:
Svelte supports the use of Scoped CSS for each component, which provides more organized style management. It also encourages modularizing the project and makes project progress easier by adopting the component-based development approach.
Learning Curve:
Svelte has a simpler syntax. Therefore, the learning curve is lower compared to other frameworks. This allows developers to learn Svelte faster and use it effectively.
Syntax of Svelte✨
Svelte has a very simple syntax to use. This syntax offers a unified structure that includes HTML, CSS, and JavaScript. Files are created with the .svelte extension. I would like to show some code blocks to convey more clearly that the syntax is quite simple. I created these code blocks with REPL, Svelte’s online coding environment.
Component Creation:
I want to show you how to create a component in a very simple way with Svelte:
We write our JavaScript code inside the <script> tag. Here I defined a variable named name. We can write our HTML codes under the <script> tag. Here, I called my variable within {} curly brackets in the <h1> tag. If you’re writing ReactJS, you’re familiar with doing something similar with curly braces. We write all the codes related to the style into the <style> tag. Let’s look at the result:
Voilà! Here is our first Svelte component ready!
So how do we call this component on the page?
To call the component, it will be sufficient to import it in the <script> tag and call it under the tag. This usage is very similar to the component calling logic in other JavaScript frameworks.
Data Transfer Between Components:
It is quite simple to switch props from one component to another in Svelte. For probe switching, communication is provided between two components, and one component can transmit data to the other. Let’s examine it with sample code blocks:
Parent Component (App.svelte):
Child Component (ChildComponent.svelte):
In this example, I transferred the parentMessage variable in the App.svelte file to the childMessage prop in the ChildComponent component. In this way, the ChildComponent component creates its content using the prop it receives.
The export statement provides an external prop to the ChildComponent component. In this way, the childMessage becomes available to the ChildComponent component.
Conditional Statements:
It is also very easy to create conditional statements with Svelte. If/else if blocks are also used in Svelte. It has a slightly unorthodox but familiar syntax. I talked a lot, so let’s look at the code😄:
I defined the loggedIn variable as true in the <script> tag. If loggedIn is true, then “User is logged in!” If false, “User is not logged in.” I want you to write. To use the if block in Svelte, I create my if block with the # sign in curly brackets and close my if block with the / sign. To perform if-else operations, we can write else using the : sign inside curly brackets in the if block.
I wanted to explain Svelte’s syntax with the examples above. This easy syntax from Svelte allows developers to create web applications quickly and efficiently.
What is Reactivity, the Basic Principle of Svelte?✨
Reactivity, the basic principle of Svelte, means that changes in the values of variables are automatically reflected in the code. In other words, when the value of a variable changes, this change is immediately and automatically reflected in the application interface. So how? Let’s go over the code:
Reactivity on Variables:
In this example, I defined a variable called count. When the button is clicked, the count variable is incremented by one with the on:click event, and the number in the interface is instantly updated. The ability to automatically update the interface when the value of this variable changes is called reactivity.
Monitoring Dependencies:
In this example, I would like to talk about the $: sign, which represents the reactivity you may encounter in Svelte works. I wrote a block of code that works when the window width changes. In this way, as the width value of the screen ($:) changes, the isMobile variable is automatically updated, and the texts in the interface change dynamically depending on this situation. The $: reactivity sign allows the relevant code to become dynamic.
The Reactivity principle ensures that code is automatically optimized and updated. Adding reactivity to variables, expressions, and dependencies allows developers to write more understandable, readable, and maintainable code.
CSS and Svelte✨
Scoped CSS:
Svelte supports the use of Scoped CSS to avoid style conflicts between components. The CSS in each component is specific to that component and does not affect other components. For example:
Global CSS:
Sometimes we may need to make global style definitions. We can define a global style using the :global() selector. For example:
CSS Preprocess:
Svelte allows using preprocesses such as PostCSS, SCSS, Less, and Stylus. To do this, you can first download the relevant library from the link I left below:
You can then define the relevant style block with the lang property. For example:
I tried to explain the use of CSS in Svelte clearly with these sample codes. Concepts such as Scoped CSS, Global CSS, and CSS Preprocess are frequently used methods for applying styles with Svelte.
Creating Your First Project✨
Now, let’s set up your first Svelte project together by following the Svelte documentation. I leave the documentation link below:
Let’s start the project setup now:
I created a folder called svelte-deneme. I go to the terminal and run the npm create vite@latest ./ command. Later:
I choose Svelte from the list that appears. Later:
It asks in which language we want to write. The Svelte team recommends we choose SvelteKit, but this is our first project; let’s take the easy way first. That’s why I chose JavaScript. Later:
Now we install node_modules by running the npm install command. Later:
We run the npm run dev command to run the project on port 5173.
We created our first Svelte project. That’s all!🥳
All in all, Svelte offers a powerful solution for those looking for speed, performance, and simplicity in the modern world of web development. Its unique reactivity system, component-based structure, and optimizations at compile time offer developers a more effective coding experience. This innovative approach provides more control to developers and also stands out as a framework that allows the development of performance-oriented applications. Introducing Svelte could be an exciting step into the future of web development.
If you have questions, comments, or topic suggestions, please let me know. Your feedback helps me further improve my blog series. See you in the next article!
