1. Introduction

When talking about Javascript frameworks or libraries, there must be 3 famous names that people will mention: React, Vue and Angular, it is also true that these frameworks / libraries are at the top, behind them is a whole. Huge community to support. But in this article I will introduce a new framework called Svelte .

Svelte – also read in vietsub style as “Touching”, this is a client-side Javascript framework built by Rich Harris . This is probably a relatively new framework for many people, and in Vietnam I think it is not widely used.

A brief history of birth :

Rich Harris released the first version of svelte at the end of 2016, two years later, the second version released in 2018. In 2019, the third version released – also the current version, at the time of this writing (2021). On svelte ‘s github, developers are still actively contributing to the development of this open source project. Svelte ‘s repository on github is currently receiving more than 40,000 stars and more than 2,000 forks.

2. Advantages / disadvantages of Svelte

Svelte is a pretty suitable choice for small, simple projects. Maybe for more complex projects, we should have careful consideration because this framework is quite new and the support community is not much.

Advantages

• Easy to approach if anyone has worked with VueJS or ReactJS because Svelte has similar concepts.
• Code is fast, neat and fast
• Without using the Virtual DOM, from the perspective of Svelte developer – Rich Harris using the Virtual DOM is not really fast, so Svelte did not use the virtual DOM, instead Svelte directly updated the changes on the DOM. In fact, omitting the intermediate step of using the Virtual DOM like other Javascript frameworks / libraries do.
• Using reactive mechanism is very easy to use
• Having quite complete documentation
• Server side rendering – Sapper support
• Build your own structure

Defect

• Not much use community
• Not many 3rd party libraries support (package, component …)
• Not really stable because it is still quite new

3. Initialize the Svelte project

Creating a Svelte project is very simple, just run a command

Then install the dependencies we run the command

To run the program

The default port of Svelte is 5000. Access http: // localhost: 5000 / you will see the default interface of Svelte looks like this.

Open the project, we will see a few folders and files built in Svelte . Inside

• src : this is the directory containing the main code of the project.
• src/main.js : This is the input file of the application with the default name main.js, if you want to change the file name, you need to reconfigure.
• src/App.svelte : Each .svelte file is treated as a component . .svelte is also a way to specify a file in svelte .
• rolllup.config.js : This file is used to customize source code installation. Svelte uses rollup to bundle source code instead of webpack that we often see
• package.json : Contains the dependencies of the project.

4. Find out

A lot of lengthy lines, now I will introduce syntaxes in Svelte .

4.1. Component

To talk about client-side javascript frameworks like VueJS or ReactJS, the concept of component is very common. Then in Svelte this concept was also born. A component file in Svelte ends with the extension .svelte .

The file structure is also a bit similar to VueJS (if anyone has come into contact with Vue). A file looks like this

We can encapsulate code of HTML, CSS and Javascript into a component. To reuse the declared components, just import the required file. Suppose

If you want to use the Product.svelte file in the App.svelte file, App.svelte just need to import it

In very simple and concise. It looks quite similar to VueJS, if in VueJS we need to declare more usage so it will be more verbose like this.

However, Svelte has shortened the code when only needing to import it is already using the component. Very fast and neat

4.2. Data

A component does not simply have static markup but sometimes also needs to use data . To define a data in the component we put in a pair of script tags is okay.

To print out the data we just need to enclose the curly braces {} to print out the value

4.3. Dynamic attributes

In the same way that we printed the data above, for attributes we will also use curly braces to print attrubutes’ values. For example

Svelte also provides us with a concise way of writing if the attribute has the same name as the variable you set as in the above case is src={src} then you can write it short, only {src}

4.4. Props

When working with components, we inevitably sometimes need to pass data from the parent component to the child components, then we will use the props . This is also a concept that is too familiar with VueJS and ReactJS developers.

To define props we declare along with keyword export . For example

To make it easier to understand for those who have not worked with Vue or React, I have a child example like this.

Declare child components

In the parent component we pass the value down to the child component

The result when running the program will be

4.5. Logic

Regular HTML does not support the way of writing logic in code such as conditional statements or loops. In svelte will help us do this job. The syntax will be different from VueJS or ReactJS, but I find Svelte ‘s writing reminds me of Django – Python’s famous framework.

The if-else conditional statement

To apply this conditional statement to code we need to remember its syntax

In it, we use the # character to start a conditional statement, and else or else if statements will start with a character : for example :else . And finally use the / character to identify the conditional closing tag.

For example

Loop

To use loops in Svelte we can use each to loop, the syntax is similar to the if..else conditional if..else , where the # character to start the loop statement and / to end loop.

For example

4.6. Event

One of the most powerful features of Javascript is Event, instead of writing like pure Javascript, Svelte also has its own writing style. To listen for an event in Svelte we start with the on: directive.

For example

We’ll do the same with other events as well. In addition, Svelte also fully supports us like modifier

• preventDefault : When using this modifier it calls event.preventDefault() like we would write with Jquery or plain Javascript, used to cancel the event
• stopPropagation : calls event.stopPropagation() , preventing event’s spread to other tags.
• passive : used to improve the performance of events like touch or wheel .
• capture : The trigger event turns from the DOM parent to the DOM that registered the event
• once : Delete the event once done

…. It’s relatively easy to use

Or we can use many different modifiers simultaneously

4.7. Binding

This concept is similar to the concept in VueJS, it will simply be understood that we have an input cell, the data entered from the input box will bind to the data we declare.

The syntax is bind:binding_name .

For example

Result

In addition, we can also bind to checkbox , select … and many more.

4.8. Lifecycle

Like Vue or React, Svelte also has its own lifecycle. Specifically here are the lifecycle methods

• onMount : this method is called after the component is rendered, at this method we can call api.
• onDestroy : This method is called when a component is destroyed.
• beforeUpdate : This method was called before the DOM was updated
• afterUpdate : In contrast to beforeUpdate , this method is called after the DOM has been updated

For example

4.9. Slot

Like Vue, Svelte also has a Slot concept. This concept simply understands we will “save” a space in the component, when we need to use that space, we will call the slot.

For example, I have a child component ProductDetail

And the Product component called

The result on screen will be

Now if we want to add content to the ProductDetail component, instead of going to ProductDetail.svelte to edit, we can add the content at the Product.svelte component where we call the ProductDetail provided that the slot has been created in ProductDetail.svelte .

Result

5. PS

The article is also a bit long, I have also introduced important concepts of Svelte , hope it will help you. These can be said to be the background knowledge.

Through the above concepts, we also see that using Svelte is completely easy and concise, and can meet the needs of simple web pages. However, there are certain limitations on the support library as well as the lack of community, so Svelte has not really exploded like other frameworks. But surely in the future someday Svelte will develop like Vue or React =))

If you find this article useful, please give yourself an upvote for inspiration to write more =)) Dear